So you wanna develop a Shopify theme. But where do you start? This tutorial will get you set up with a starter theme and and a basic understanding of how to start developing it.
Setting up a Development Shop
First things first, you cannot develop a Shopify theme entirely locally. You must first create a Development Store. So head over to Shopify Partners Site and sign up. Once you're there, on the left hand menu select Development stores and then in the top right corner click Create a new store. You'll have to give the store a name and then create login credentials. Once that's done, it will prompt you to log into your store and take you to the admin panel
The Shopify Shop Admin Panel
The shopify admin panel is found at https://test-shop.myshopify.com/admin . Also, after you create the dev store, you'll get a message at the top of the screen with a login link. Once there, on the left hand menu, select Online Store then in the second menu that pops up choose Themes
Now we've made it to where we can finally upload a theme! You'll notice at the top right hand of the page a button Upload Theme.
The Shopify Skeleton Theme
At this point you'll probably notice that you don't have anything to upload. Luckily, Shopify provides a nice Skeleton Theme to help you get started.
Head over to thier GitHub and download or clone it.
The file structure is as follows:
-skeleton-theme
--assets
---arrow-down.svg.liquid
---cart.svg.liquid
---shop.js.liquid
---shopify_common.liquid
--config
---settings.html
---settings_data.json
--layout
---theme.liquid
--snippets
---article-grid-item.liquid
---collection-grid-item.liquid
---collection-listing.liquid
---open-graph-tags.liquid
---product-grid-item.liquid
---site-nav.liquid
---social-links.liquid
---twitter-card.liquid
--templates
---404.liquid
---article.liquid
---blog.gird.liquid
---blog.liquid
---cart.liquid
---collection.liquid
---index.liquid
---list-collection.liquid
---page.liquid
---product.liquid
---search.liquid
We won't go into detail in this post about each of these files, but we will discuss a few notable things. First, you may have noticed that most of the files end with .liquid. Liquid is shopify's own templating language. For more info on that you can reference the Liquid Cheat Sheet.
The layout/theme.liquid contains the header and footer. Each template is brought in inside the content_for_layout section.
{{ content_for_layout }}The Templates folder contains all the templates that will be brought in. The Snippets folder contains components that are brought into templates like so:
{% include 'social-links' %}In the config file, there are two files settings.html and settings_data.json. These files contain a definition of the settings that you make available to customize the theme. Once the theme is uploaded, you or a client will be able to click the customize theme button and the options set in these files will be available. To understand more about the settings file, you can look at the Shopify docs or read our post on theme customization with the settings file
Uploading the Skeleton Theme
Well, now that we have a theme, we can get to uploading it at last. In the shopify store admin in Online Store / Themes, in the upper right hand corner there is an Upload Theme button. First, compress/zip the skeleton-theme you downloaded and upload the zipped file to the store. Now your theme is uploaded!
Just above and to the right of the theme example screens, there's an eye icon, clicking this will take you to a preview of the store. Right now you don't have any products. It's a good idea to put a few sample products in to play with while you're developing. Visit https://test-shop.myshopify.com/admin/products to do that.
Improving your development flow
As we said at the beginning, you cannot entirely develop a Shopify theme locally. Now that your theme is uploaded, you can edit the HTML/CSS by clicking the ... button and selecting the edit HTML/CSS option.
If you're the kind of developer that likes to develop in their preferred text editor (and who isn't?) you'll want to check out our posts about the Shopify development flow. We discuss local development in the Theme Gem post. In the SASS, Compass, and Liquid post, we discuss improving the process further by adding multiple SASS files and using liquid tags right inside them.
