Shopify App and Theme Development tutorials for those who are familiar with code and want to dive into Shopify.

You may be just getting started with Shopify or maybe you've been working with themes for a while, editing in the online editor and longing for the days of shortcuts, extensions, and themes that come with your favourite text editor. Well, Shopify has a wonderful solution whether you are just starting or looking to optimize your development flow to allow you to develop locally with ease: enter Theme Kit 🙌 .

Installing Theme Kit

If you are on Linux or Mac Theme Kit provides the installation script below that you can run in your terminal to get started.

To install on Windows the instructions are a little more in depth, but well outlined in the Theme Kit installation documentation.

Once you have gone through the installation steps, open a new terminal window and type in:

theme

If all is working as expected you should see a set of commands and flags available from Theme Kit.

Try running theme version in the terminal. This should print out the version number of Theme Kit you are running.

Theme Kit Configuration

Now that Theme Kit is installed, let's configure it to work with a store you are currently developing.

Set Up a Private Application to Access the API

In the admin dashboard for your store you want to develop locally, create a new private app.

To set up a private app:

• Click on the Apps tab in the sidebar.
• Select Private apps in the top-right corner.
• Click Create private app.
• Name your app. I like to call mine Theme Kit for reference.
• Update the default permissions for your private app. Automatically these will be set to No Access or Read Access. I like to switch them to Read and write wherever possible for the purposes of local development.

Once you have gone through the steps, save the app. You will be redirected to a page with your private application credentials. Great 😁 , keep this open as we will be using it in the upcoming steps.

Create the Theme Kit Config File

🔥 Tip: You can either configure Theme Kit to watch development on the theme currently published to your store or on a particular theme referenced by id. We'll go over setup for both scenarios below.

Another wonderful feature of Theme Kit is the configure command that helps you create a config file. Open up a terminal window and navigate to the root directory of your theme. Now run the following command:

If Your are Editing the Currently Published Theme

theme configure --password=your-app-password --store=your-store.myshopify.com --themeid='live'

your-app-password is the password that was generated when you created your private app and will be used for authentication.

your-store.myshopify.com is the URL for your store without the https:// or trailing /.

--themeid='live' is to indicate that the theme you are working on is the currently published theme on the store.

If you want to edit a specific theme (not necessarily the one currently published)

theme configure --password=your-app-password --store=your-store.myshopify.com --themeid=your-theme-id

your-app-password is the password that was generated when you created your private app and will be used for authentication.

your-store.myshopify.com is the URL for your store without the https:// or trailing /.

your-theme-id If you want to work on an unpublished theme, you could add the theme ID for that theme. To find the theme ID, go to Online Store > Themes and find the theme you want to configure. Click on the ... and select edit HTML/CSS. You'll be redirected to a page with the online editor (🚫 don't make edits in here). At the end of the URL will be the theme ID. Copy this and use use it to set the themeid flag.

Once you have run the config command in the root directory of the project you should have a generated config.yml file with all the config options you set.

Test it Out

Still in the root directory of your theme folder run:

theme watch

You should see a message similar to this one:

Watching for file changes for theme live on host my-store.myshopify.com

Try making a change to one of your files and check it out in your online store (if it is the live one) to see the change automatically uploaded to your theme 🎉🎉 !!