How to Edit Shopify Themes Locally with VS Code and GitHub

While the default online text editor for Shopify is functional, it often lacks the robust features developers need. It has a tendency to improperly auto-format code, lacks access to essential extensions, and—let's be honest—has a less-than-ideal dark mode.

In this tutorial, we will walk through how to integrate GitHub with your Shopify store. This setup allows you to edit your site locally using Visual Studio Code (VS Code) and push changes through GitHub, which will automatically update your live Shopify site.

Why Use This Workflow?

• Better Formatting: Avoid the auto-formatting quirks of the online editor.
• Extensions: Access the vast library of VS Code extensions.
• Version Control: Keep a history of your changes via GitHub.
• Search: Easily search through all theme files for specific keywords.

Step 1: Set Up Your GitHub Repository

First, you need a place to host your code.

1. Log in to GitHub and create a new repository.
2. Name it something relevant (e.g., test-site_dawn).
3. Set the visibility to Private (recommended for store code).
4. Leave the initialization options (README, .gitignore) unchecked for now.
5. Click Create repository.
6. Copy the repository HTTPS link provided.

Next, open your terminal or command prompt, navigate to where you want the project stored on your computer, and clone the empty repository:

git clone [PASTE_YOUR_LINK_HERE]

Step 2: Download Your Theme Files

We need to get your current theme code out of Shopify and into your local machine.

1. Go to your Shopify Admin > Online Store > Themes.
2. Find the theme you want to edit.
3. Click the Actions (three dots) button and select Download theme file.
4. Shopify will email you a ZIP file containing the theme.
5. Download the ZIP file and extract the contents into a folder.

Step 3: Push Theme Files to GitHub

Now we need to move the theme files into your local Git repository and push them to the cloud.

1. Copy all the extracted theme files.
2. Paste them into the folder you created during the git clone step.
3. Open your terminal, cd into that folder, and run the following commands to stage, commit, and push your files:

# Check the status of your new files
git status

# Add all files to the staging area
git add .

# Commit the files with a message
git commit -m "Initial commit"

# Push the changes to the main branch
git push origin main

Note: You may be prompted for your GitHub passphrase or credentials during the push command.

Step 4: Connect Shopify to GitHub

With your code now on GitHub, it's time to link it back to Shopify.

1. Return to your Shopify Admin.
2. Go to Online Store > Themes.
3. Click the Add theme button and select Connect from GitHub.
4. If this is your first time, click Add account to authorize Shopify to access your GitHub repositories.
5. Select your repository (test-site_dawn) and the branch (main).
6. Click Connect.

Once connected, you can publish this theme to make it the live version of your store.

Step 5: Editing in Visual Studio Code

Your development environment is now ready. You can open the folder in Visual Studio Code by typing code . in your terminal or opening the folder manually.

Any changes you make to the files in VS Code can now be committed and pushed to GitHub. Shopify acts as a subscriber to that repository; as soon as you push updates to the main branch, those changes will automatically reflect on your Shopify store.

Recommended VS Code Extensions

To make your Shopify development experience even better, I recommend installing these two extensions:

1. Liquid Syntax Highlighting: Look for the version with over 100k downloads. This ensures your .liquid files are color-coded correctly, making the code much easier to read.

2. Shopify Liquid Template Snippets: This extension saves time by allowing you to use shortcuts for common Liquid tags. It helps you quickly assign variables and logic without typing out every single bracket and percent sign manually.

Conclusion

By moving your development workflow to VS Code and GitHub, you gain full control over your code, access to powerful tools, and a reliable backup system for your theme. If you found this guide helpful, be sure to check out more content on Shopify development to streamline your workflow.