Version Control for Shopify Themes with Git

Shopify‘s built-in version control limits you to 20 versions, making it challenging to manage complex theme updates. Git offers unlimited version history, team collaboration tools, and offline development – making it essential for professional Shopify theme development.

Key Benefits of Using Git:

• Unlimited History: Track every change without limits.
• Team Collaboration: Use branching and merging for seamless teamwork.
• Complete Rollbacks: Restore entire theme states, not just individual files.
• Offline Development: Work without needing an internet connection.
• Detailed Tracking: Maintain a clear commit history for every update.

Quick Comparison: Shopify Version Control vs. Git

Git, especially when paired with Shopify’s GitHub integration and tools like Theme Kit, ensures efficient, reliable, and organized theme management for stores of all sizes.

How to Use GIT with Shopify Themes

Git Setup for Shopify Themes

Using Git for Shopify theme development helps you manage version control effectively. It involves three main steps: installing Git, creating a repository, and setting up configurations.

Git Installation Guide

The process of installing Git depends on your operating system. Here’s a quick guide for each:

Once Git is installed, set up your identity with these commands:

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

Starting a Theme Repository

To create a Git repository for your Shopify theme, follow these steps:

1. Open your terminal and navigate to your theme’s directory:

   cd path/to/your/shopify/theme
   

2. Initialize a Git repository:

   git init
   

3. Add all theme files to the repository:

   git add .
   

4. Commit the changes with a message:

   git commit -m "Initial commit of Shopify theme"
   

Setting Up .gitignore

A .gitignore file ensures unnecessary or sensitive files are excluded from your repository. For Shopify themes, create a .gitignore file in the root directory with the following content:

# OS files
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db

# Shopify config
config/settings_data.json
config/settings_schema.json

# Development
node_modules/
npm-debug.log
config.yml

# Editor files
.idea/
.vscode/
*.suo
*.ntvs*
*.njsproj
*.sln

With Git set up, you’re ready to move on to integrating Theme Kit for seamless theme deployment. We’ll cover that in the next section.

Theme Kit Setup and Usage

Theme Kit is a tool that connects local development with Shopify stores, complementing Git’s version tracking. Here’s how to install it based on your operating system:

To confirm the installation, run:

theme version

Store Authentication Setup

To link Theme Kit to your Shopify store, follow these steps:

• Navigate to Settings > Apps > Develop apps in your Shopify Admin.
• Create a custom app and enable theme read/write permissions.
• Use the generated API credentials to configure Theme Kit.

Config.yml Setup Guide

In your project root, create a config.yml file to define your environment settings:

development:
  password: [your_api_password]
  theme_id: "[your_theme_id]"
  store: your-store.myshopify.com
  ignore_files:
    - settings_data.json

This file simplifies command execution by storing your API credentials directly, avoiding the need to rely on environment variables. While Git handles version control, Theme Kit takes care of deploying changes to the store.

Performance Settings for Theme Kit

Boost Theme Kit’s efficiency with these commands:

These commands work seamlessly with Git’s branch management, making team workflows smoother and more organized.

Key Theme Kit Commands

Here are some essential commands for your daily tasks:

1. Download theme files

   theme get
   

2. Auto-sync changes in real-time

   theme watch
   

3. Deploy specific files

   theme deploy assets/theme.css
   

These commands help streamline your development process while maintaining a clean version history in Git.

Git Workflow and Branch Management

With Git and Theme Kit set up, you can create a workflow that supports team collaboration and safe deployments.

Branch Strategy Options

Your choice of branching strategy depends on your team’s size and Shopify’s theme requirements:

GitHub Flow works particularly well with Shopify’s theme setup, where changes are often made directly to Liquid files. It balances simplicity with control, especially for teams using continuous deployment and regular code reviews.

Local to Production Workflow

Here’s how to move your work from local development to production:

1. Local Development

Start by creating a feature branch and enabling Theme Kit’s watch mode:

git checkout -b feature/header-redesign
theme watch --env=development

2. Code Review Process

Once your changes are ready, commit and push them:

git add .
git commit -m "Add responsive header navigation"
git push origin feature/header-redesign

Then, open a pull request for team review.

3. Production Deployment

After approval, merge into the main branch and deploy:

git checkout main
git merge feature/header-redesign
theme deploy --env=production

Fixing Merge Conflicts

Merge conflicts can happen when multiple developers edit the same theme files. Here’s how to handle them:

1. Sync with Live Theme

Use Theme Kit to sync with the live theme:

theme download --allow-live
git status

2. Resolve Conflicts

Use your code editor to handle conflicts. Shopify’s section schema can guide you in merging changes.

3. Test and Deploy

After resolving conflicts, deploy to the development environment:

theme deploy --env=development

Test thoroughly before deploying to production. If you’re updating the section schema, consider using feature flags to minimize disruptions to the live store.

GitHub Deployment Setup

GitHub deployment simplifies theme updates while keeping your version control intact, building on the Git workflow strategies.

GitHub and Shopify Integration

Follow these steps to set up automated deployments:

• Install Shopify’s GitHub integration through your GitHub account.
• In Shopify Admin, navigate to: Online Store > Themes > Add theme > Connect from GitHub.

Repository Configuration

Assign specific branches to different themes, such as staging or production, to define your deployment targets.

Workflow Configuration

Set up your deployment workflow by creating a .github/workflows/deploy.yml file:

name: Theme Deployment
on: [push]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Deploy
        env:
          SHOPIFY_PASSWORD: ${{ secrets.SHOPIFY_PASSWORD }}
        run: theme deploy --env=production

This setup integrates with the local-to-production workflow discussed earlier, ensuring smooth collaboration among your team.

CLI vs GitHub Workflows

Here’s a quick comparison between CLI and GitHub Workflows for deployments:

GitHub Workflows make deployments easier by:

• Automatically updating themes when connected branches are pushed.
• Simplifying deployment across different environments.

To keep your setup secure, store sensitive credentials in GitHub Secrets. Use the credentials from your existing config.yml file when configuring GitHub Secrets, and keep staging and production themes separate for better organization.

Team Development Guidelines

Once you’ve set up deployment workflows, it’s crucial to establish team practices that ensure code quality during collaborative theme development.

Writing Clear Commit Messages

Commit messages should clearly document changes, making it easier for everyone to understand what was updated. Here’s a simple structure to follow:

Summarize changes (50 characters max)

- Provide a detailed explanation of the changes
- Mention how these changes affect theme functionality
- Specify any related components impacted

Related to: [ticket number]

To ensure consistency across your team, you can:

• Create a .gitmessage template in your repository.
• Configure Git to use this template globally for all commit messages.

Use these standard prefixes to categorize your commits:

Version Tagging System

Adopt a Semantic Versioning (SemVer) system to align with Shopify theme updates. Use the MAJOR.MINOR.PATCH format:

• Major (X.0.0): For structural changes that require duplicating the theme in Shopify Admin.
• Minor (1.X.0): For adding new features while keeping compatibility.
• Patch (1.0.X): For bug fixes and small updates.

To implement this, follow these steps:

# Create an annotated tag
git tag -a v1.2.3 -m "Version 1.2.3 - New product filtering system"

# Push tags to the remote repository
git push origin --tags

For Shopify themes, this system minimizes the risk of deploying broken Liquid code or conflicting schema updates. You can further automate code quality checks with tools like Husky:

// Automate quality checks before commits
"husky": { "hooks": { "pre-commit": "lint-staged" } }

Conclusion

Using Git version control for Shopify themes can significantly cut deployment errors – by 47%, according to Shopify’s 2024 ecosystem report ^[1][2]. When paired with Theme Kit, it enables accurate change tracking and smoother team collaboration.

For stores handling over 100 daily orders, version control becomes essential during multi-developer theme updates. By applying the branching strategies and commit conventions discussed earlier, teams can ensure consistent code quality while keeping a detailed configuration history intact, thanks to tools like .gitignore and config.yml ^[1][2].

For enterprise-level teams, agencies like E-commerce Dev Group offer customized Git workflows crafted for high-volume Shopify stores.

Related Blog Posts

• How to Migrate Shopify Theme to New Store
• Shopify Theme Updates: What to Check
• Best Practices for Scalable Shopify Themes
• Shopify Theme Check: Setup Guide