After you have created a Shopify Development store, it is time to add a theme to code in. I suggest on starting with the bare minimum of a theme to begin with as we do not want to be distracted about the different elements and functionality a theme can have. Also, the benefits of a skeleton theme is we will remove all the extra assets free and paid themes include. This helps minimize our website size so our page speeds are fast and efficient. Let's get started!
There are many different files and folders that are essential to a Shopify theme, but we only need two files and two folders to begin tinkering in Liquid programming. They are layout/theme.liquid and templates/index.liquid.
The theme.liquid file is rendered on all pages of your website. It should include your header, footer, styles, and scripts. This file is used to include content from blogs, pages, products, and collections.
The index.liquid file is used as the front page of your website. It renders what most say is the most important page of your store, the homepage. Important because it is what most users see when they visit your website.
I have zipped these files in a theme for you to download in the following link:
Bare Minimum Shopify Theme by Joe Pichardo
Once you download it, log into your development store's dashboard. On the left side menu, click "Online Store" under "Sales Channels". The link will navigate you to the "Themes" page.
Then scroll to the bottom of the page to find the "Upload theme" button. Click on it and the upload theme form will come up.
Click on "Choose File" and navigate to the downloaded zipped theme. Then choose the file to upload it. Finally, click "Upload file" button and the theme will begin to upload.
We now see our uploaded theme in the "Theme library" section. Click on the "Actions" menu on the right side of our theme name. Choose "Publish" to make this theme our "Current theme" of our website. A popup will appear for you to confirm the publish action and preview the theme's homepage. Click the "Publish" button again.
The theme is now the site's current theme.
Great!
Now we have the assets to help us learn about Liquid development. Before we continue, let me quickly explain the contents of theme,liquid, since index.liquid is an empty file.
Here is the theme.liquid code:
<!DOCTYPE html>
<html>
<head>
<title>Joe Pichardo</title>
{{ content_for_header }}
</head>
<body>
<h1>Shopify Liquid for Beginners</h1>
{{ content_for_layout }}
</body>
</html>The doctype, html, and body tags are requirements for website files. As we learned earlier the theme.liquid file will be rendered on all our website pages. In this file we need to include {{content_for_header}} inside our head tags. This global liquid variable is used to include Shopify scripts like the integrated Google Analytics, Shopify Analytics, plugin app files, and more. The {{content_for_layout}} variable outputs different files and content based on the current page. Shopify recommends to have a product.liquid file to show the product page, a cart.liquid file to show the cart page, a page.liquid file to show store pages, so on and so on. These are all rendered through the {{content_for_layout}} variable.
We are off to a great start in learning and setting up our development environment for the Shopify platform. We also now understand the basics of a Shopify theme.
You can now edit the code from the Shopify editor by going through the theme dropdown actions: "Edit Code".
You can the theme files in the left sidebar that includes all the basic folder structure of a theme: layout, templates, sections, snippets, assets, config, and locales. We will learn about the other folders later, but for now we focus on two files layout/theme.liquid and templates/index.liquid.
The Shopify editor is great if you are doing some quick fixes, but this requires going online to the backend of Shopify for the edit code page. To improve the developer workflow we will need to download the editor the best fits the Shopify Liquid programming language. Next, which editor I approve for theme development.
Having trouble? Ask for help.