github-workflow

TL;DR

Yes, both directions are supported:

Option 1: Official Shopify GitHub Integration (Easiest)

Shopify has a built-in GitHub app that handles bi-directional sync automatically.

Setup

1. Go to Online Store > Themes in Shopify admin
2. Click Add theme > Connect from GitHub
3. Select your organization/account
4. Select repository and branch

How It Works

┌─────────────────┐         ┌─────────────────┐
│   Shopify       │ ◄─────► │    GitHub       │
│   Admin         │  sync   │    Repository   │
└─────────────────┘         └─────────────────┘
        │                           │
        ▼                           ▼
  Edit in theme               Push commits
  editor/customizer           from local dev
        │                           │
        └────► Auto-commits ────────┘
                to branch

Features

• Shopify → GitHub: Edits in Shopify admin auto-commit to connected branch
• GitHub → Shopify: Commits to branch auto-deploy to connected theme
• Conflict resolution: Conflicts can be resolved in GitHub or force-pushed
• Branch-based workflows: Connect different branches to different themes (dev/staging/production)

Branch Strategy Example

Option 2: GitHub Actions CI/CD (More Control)

For more complex workflows, use GitHub Actions with Shopify CLI.

Prerequisites

1. Theme Access password from Shopify admin
2. GitHub repository secrets configured

Required Secrets

SHOPIFY_STORE_URL: mystore.myshopify.com
SHOPIFY_CLI_THEME_TOKEN: shptka_xxxxx  # Theme Access token
# OR for private app:
SHOPIFY_PASSWORD: xxxxx
SHOPIFY_API_KEY: xxxxx

Basic Deploy Workflow

name: Deploy Theme

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Install Shopify CLI
        run: npm install -g @shopify/cli @shopify/theme

      - name: Deploy to Shopify
        run: |
          shopify theme push --store ${{ secrets.SHOPIFY_STORE_URL }} \
            --theme ${{ secrets.SHOPIFY_THEME_ID }} \
            --path ./theme
        env:
          SHOPIFY_CLI_THEME_TOKEN: ${{ secrets.SHOPIFY_CLI_THEME_TOKEN }}

PR Preview Workflow

Using shopify-theme-actions:

name: PR Preview

on:
  pull_request:
    types: [opened, synchronize, reopened, closed]

jobs:
  preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: matthew-petrie/shopify-theme-actions@v1
        with:
          ACTION: "DEPLOYMENT_PREVIEW"
          SHOPIFY_STORE_URL: ${{ secrets.SHOPIFY_STORE_URL }}
          SHOPIFY_PASSWORD: ${{ secrets.SHOPIFY_PASSWORD }}
          SHOPIFY_API_KEY: ${{ secrets.SHOPIFY_API_KEY }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

This creates a preview theme per PR and comments with a preview link.

Option 3: Theme Kit (Legacy)

Older but still functional approach using Theme Kit:

- uses: pgrimaud/action-shopify@master
  with:
    args: deploy
  env:
    SHOPIFY_PASSWORD: ${{ secrets.SHOPIFY_PASSWORD }}
    SHOPIFY_STORE_URL: ${{ secrets.SHOPIFY_STORE_URL }}
    SHOPIFY_THEME_ID: ${{ secrets.SHOPIFY_THEME_ID }}
    THEME_PATH: ./

Note: Shopify CLI is recommended over Theme Kit for new projects.

Local Development Workflow

Setup

# Install Shopify CLI
npm install -g @shopify/cli @shopify/theme

# Pull existing theme
shopify theme pull --store mystore.myshopify.com

# Start dev server with hot reload
shopify theme dev --store mystore.myshopify.com

Full Workflow

1. Clone repo from GitHub
2. shopify theme pull (sync latest from Shopify)
3. Make changes locally
4. shopify theme dev (preview changes)
5. Commit & push to GitHub
6. GitHub Action deploys OR auto-sync deploys

Comparison

Recommendations

Third-Party Apps

• ThemeFlow ($19/mo): Enhanced GitHub integration with merge functions and automation flows

Sources

1. Shopify GitHub Integration for Themes
2. Use Shopify CLI in CI/CD Pipeline
3. Shopify Theme Actions - GitHub
4. Deploy Shopify Theme Action
5. Two CI/CD Approaches for Shopify Theme Deployment