Shopify's recent Online Store 2.0 upgrade is like a gorgeous gift box triple sealed with duct tape. While it has desirable features that will benefit your business, it also takes valuable time to unpack and navigate the changes. Don't fret, like the dutiful assistant everyone needs, I've simplified the new features and created an easy to comprehend breakdown on Shopify's Online Store 2.0. Let's get started.
How do I develop a Shopify theme?
Using CLI. Prior to the upgrade, theme development was done using Theme Kit and the CLI tool was exclusively for Shopify app development. Now with Online Store 2.0, the recommended tool for theme development is CLI.
What happens to stores that were originally developed using Theme Kit?
Don’t worry, Theme Kit can still be accessed for development of older stores that were originally created using Theme Kit. But what you should not do is use Theme Kit to build any new themes for stores using the Online Store 2.0 platform. From here on out it is CLI all the way.
I'm a Shopify theme developer, what should I do now?
- The CLI installation process varies for each operating system, check the official documentation to know the steps appropriate for you.
- You must install Ruby and Git. Once installed, the next step is to authenticate CLI for your store using the command shopify login --store[store name].myshopify.com
- Either (1) create a new theme using the command shopify theme init or (2) connect to an existing theme by navigating to the theme directory in the terminal and using the command shopify theme pull.
Are there any new or improved features I should know about?
Prior to the upgrade, you had to spend a lot of time manually adding dummy products in the admin. Now, you can populate your store with test data. For example, if you set up a new store and need some dummy products to use for theme development, you can generate test products using the command shopify populate products.
I've created my theme, how do I view it?
Use the command shopify theme serve. This creates a locally hosted version of the theme that can be accessed at the URL http://127.0.0.1:9292. A great feature here is that it automatically refreshes the page when any changes to CSS or section files are made, saving you the trouble of hitting F5. Note: this preview feature at present only works in Google Chrome.
The theme is created and running locally, it is time to code!
- The process of developing the theme is the same as it was with Theme Kit but CLI has an added "lint feature" to check your code for errors and adherence to Shopify’s guidelines. You can run this using the command shopify theme check.
- When you are ready to push local changes to your theme on the store, you do this with the command shopify theme push.
There we have it, development 101 using CLI.
I hope that wasn't too difficult to unwrap. After spending some time adjusting to the upgrade, I believe you'll find that Shopify Online Store 2.0 offers powerful, time-saving features to enhance your business, including tools like Shopify Flow for store automation.