I have spent a some time learning and developing my first Shopify Theme (Tishfy) and in this guide I’d like to share necessary guidelines which could save time when starting with Shopify theme development:
Shopify Base Knowledge
Shopify is an e-commerce platform that allows anyone to configure an online store and sell products with it. If you have experience with other eCommerce platforms such as Magento or WooCommerce, you will find using Shopify easy, the Admin is very intuitive to be used.
Create a Development Store
You cannot install Shopify locally on your computer. Instead, you can use a Shopify development store. It’s free and it includes most of the features available in Advanced Shopify plan. You can register such store from HERE (you will have to register for a partner account).
Shopify Theme Kit
Shopify provides an command line tool Theme Kit which allows you to upload theme files from your computer to Shopify Development store:
1. Install Theme Kit
You need to download version for your OS.
2. Get API Access
Shopify Store Admin -> Apps -> Manage Private Apps -> click ‘Enable private app development’ and create new private app with adding read and write permissions for ‘Theme’ option. Then copy the password for the app.
3. Open terminal and navigate to the theme kit installation folder and execute the following commands:
Verify Theme Kit is successfully installed:
$ theme version
Create a new theme:
$ theme new --password=[your-password] --store=[your-store.myshopify.com] --name=[theme name]
Get list of Shopify themes:
$ theme get --list -p=[your-password] -s=[you-store.myshopify.com]
Download an existing theme:
theme get -p=[your-password] -s=[you-store.myshopify.com] -t=[your-theme-id]
Watch local theme files for changes and upload theme files into store on every file change:
theme watch -p=[your-password] -s=[you-store.myshopify.com] -t=[your-theme-id]
Once the watch command is running, you can open and update theme files (with any text editor). On every changed file save, the ThemeKit will auto-upload files to the Shopify Development Store and you will be able to see the change when refresh you storefront in browser.
Get Familiar with Liquid and Theme Files
Once you have a Theme Kit configured and running watch for a theme files changes, you can start developing your theme.
You will have to learn Liquid (Shopify template language and theme files structure).
In my opinion the best approach is to download some of the free Shopify theme i.e. Debut and review its code.
Here some links that could help:
- Slate (base theme example which is deprecated): https://shopify.github.io/slate/docs/about
- Shopify Themes Documentation (best approach to get familiar with Liquid): https://help.shopify.com/themes
- Submit Shopify Theme in Shopify Theme Store (currently disabled): https://themes.shopify.com/services/themes/new