Getting Started with Shopify Theme Development

Onboarding yourself to a new Shopify store can be difficult if you don't know where to start. By the end of this post, you should be up and ready with a theme development workflow to start making changes to an existing Shopify store.

Table of Contents

1. Shopify store access
2. Theme file export
3. Git init
4. Branch setup (main/develop)
5. Connect themes to Github

1. Store access

If you have a Shopify Partner account, you will be able to request access. You can find out the store URL by viewing the source code for the live site and searching for .myshopify.com. Once you have this, you can send a request to the store owner for access.

If you don't have a Shopify Partner account, you'll need to ask the owner for direct staff access.

2. Theme file export

Once you have access to the store, you can navigate to /admin/themes and click the ellipsis menu and select Download theme file which will send a zip file of all the theme files to your email.

Once you have the theme export in your email, download to your computer. I typically keep my code in my Home directory under a folder called Sites. I like to keep my folders organized within the Sites directory with both a clients and ref folder.

Within clients directory, I'll create a folder with the client's name and extract the zip file within the client folder. Once you extract, you may delete the original zip file. I also like to rename the extracted directory as {clientname}-shopify in case I have any other small apps or repositories that need to be created for the client.

3. Git setup

Once you have the directory, you can open it in your code editor and terminal. You'll need to initialize a git repository so you can start tracking changes. This will allow you to sync content and theme changes across the Shopify store and your local machine.

You should also create a new Github repository (typically the same folder name as your local directory) and push your new repo up to Github. In the next step we'll set up our development workflow.

4. Branch setup

Creating a workflow for making changes can be a little confusing at first, but having a git branch for development and a main branch for production can be a life-saver. This way when you're making changes and/or getting ready to deploy a new feature, you can do so on the development theme. You can do all your QA and testing before the feature actually goes live to customers.

Note: don't forget to push the development branch to Github as well

5. Connect themes to Github

Once you have both branches set up. You can connect them to the Shopify store by navigating to /admin/themes and clicking on the Add theme dropdown. You should select the Connect from Github option and connect both branches to your store.

After previewing your main branch and making sure it matches up with the live store, I typically publish the main theme so that it will automatically track any changes in git that your clients make to the theme.

Now ready to start making changes. Make sure you're working in the development branch and start making changes. Remember, small commits!

Helpful tips and links

You'll need the Shopify CLI for themes to develop locally. This allows you to sync content and have a local proxy of the store running to see changes.

Other helpful links

• Testing with Cypress
• Oh Shit Git!