[{"data":1,"prerenderedAt":136},["ShallowReactive",2],{"work-shopify-deploy-pipeline":3},{"id":4,"title":5,"body":6,"category":99,"challenge":100,"codeSnippet":101,"description":105,"extension":106,"featured":107,"finalScreenshot":108,"gridOrder":109,"isDemo":107,"isDemoURL":92,"liveUrl":110,"meta":111,"mockupImage":112,"navigation":113,"nextProject":114,"order":117,"path":118,"results":110,"schneiderFeatured":107,"schneiderOrder":110,"seo":119,"solution":120,"stem":121,"subtitle":122,"tags":123,"techStack":129,"thumbnail":133,"thumbnailVideo":110,"year":134,"__hash__":135},"works/works/shopify-deploy-pipeline.md","Theme Launch",{"type":7,"value":8,"toc":91},"minimark",[9,14,23,26,30,37,43,49,55,59,65,71,84,88],[10,11,13],"h2",{"id":12},"the-problem","The Problem",[15,16,17,18,22],"p",{},"Shopify theme development is stuck in a pre-DevOps era. The typical workflow: developer edits files locally, runs ",[19,20,21],"code",{},"shopify theme push"," to a development theme, manually checks the preview, then pushes to the live theme hoping nothing breaks. There's no automated testing, no preview environments for PR review, no performance gates, and no rollback plan.",[15,24,25],{},"For agencies managing multiple client stores, this multiplies into a significant risk surface. One bad push to a live theme during a sale event can cost thousands in lost revenue.",[10,27,29],{"id":28},"architecture","Architecture",[15,31,32,36],{},[33,34,35],"strong",{},"Reusable Workflow"," — The pipeline is distributed as a reusable GitHub Actions workflow. Teams reference it from their theme repository with minimal configuration (store URL, CLI credentials).",[15,38,39,42],{},[33,40,41],{},"PR Preview Flow"," — Every pull request automatically pushes to an unpublished preview theme named after the PR number. A bot comments with the preview URL. Reviewers can see changes on a real Shopify store before approving.",[15,44,45,48],{},[33,46,47],{},"Quality Gates"," — The pipeline runs Theme Check (Shopify's official linter) and Lighthouse CI against the preview theme. Both must pass before merge is allowed. Theme Check catches Liquid anti-patterns; Lighthouse catches performance regressions.",[15,50,51,54],{},[33,52,53],{},"Production Deploy"," — On merge to main, the pipeline pushes to the live theme. It captures a snapshot of the current live theme first, enabling instant rollback if issues are discovered post-deploy.",[10,56,58],{"id":57},"key-technical-decisions","Key Technical Decisions",[15,60,61,64],{},[33,62,63],{},"Why unpublished themes for preview?"," Shopify doesn't have a native \"preview environment\" concept. Unpublished themes are the closest equivalent — they're fully functional stores accessible via a preview URL but not visible to customers. Each PR gets its own isolated preview.",[15,66,67,70],{},[33,68,69],{},"Why Theme Check over custom linting?"," Theme Check is maintained by Shopify and updated with each platform change. Custom linting rules would require constant maintenance to keep up with Liquid API changes. Theme Check handles this upstream.",[15,72,73,76,77,80,81,83],{},[33,74,75],{},"Why snapshot-based rollback over git-based?"," ",[19,78,79],{},"git revert"," + ",[19,82,21],{}," takes minutes. Capturing a theme snapshot before deploy and swapping back via the Theme API takes seconds. For a live store, those minutes matter.",[10,85,87],{"id":86},"outcome","Outcome",[15,89,90],{},"The pipeline has been adopted by 3 Shopify agencies managing a combined 20+ stores. Average time from PR merge to live deployment: 4 minutes. Zero production incidents from theme deployments since adoption, compared to an average of 2 per month before.",{"title":92,"searchDepth":93,"depth":93,"links":94},"",2,[95,96,97,98],{"id":12,"depth":93,"text":13},{"id":28,"depth":93,"text":29},{"id":57,"depth":93,"text":58},{"id":86,"depth":93,"text":87},"DevOps Template","Shopify theme development lacks standardized CI/CD practices. Most teams push directly to live themes via Shopify CLI, skip linting, have no preview environment workflow, and risk breaking production with every deployment. There's no 'Vercel for Shopify themes.'",{"language":102,"filename":103,"code":104},"yaml",".github/workflows/theme-deploy.yml","deploy-preview:\n  if: github.event_name == 'pull_request'\n  runs-on: ubuntu-latest\n  steps:\n    - uses: actions/checkout@v4\n\n    - name: Setup Shopify CLI\n      uses: shopify/cli-action@v1\n      with:\n        store: ${{ secrets.SHOPIFY_STORE }}\n        password: ${{ secrets.SHOPIFY_CLI_TOKEN }}\n\n    - name: Push to preview theme\n      id: preview\n      run: |\n        THEME_NAME=\"PR-${{ github.event.number }}\"\n        THEME_ID=$(shopify theme list --json | \\\n          jq -r \".[] | select(.name==\\\"$THEME_NAME\\\") | .id\")\n\n        if [ -z \"$THEME_ID\" ]; then\n          shopify theme push --unpublished --theme \"$THEME_NAME\" --json\n        else\n          shopify theme push --theme \"$THEME_ID\" --json\n        fi\n\n        PREVIEW_URL=$(shopify theme info --theme \"$THEME_NAME\" --json | \\\n          jq -r '.preview_url')\n        echo \"url=$PREVIEW_URL\" >> \"$GITHUB_OUTPUT\"\n\n    - name: Comment PR with preview link\n      uses: actions/github-script@v7\n      with:\n        script: |\n          github.rest.issues.createComment({\n            issue_number: context.issue.number,\n            owner: context.repo.owner,\n            repo: context.repo.repo,\n            body: `🔍 Preview: ${{ steps.preview.outputs.url }}`\n          })\n","A production-ready GitHub Actions pipeline template for Shopify theme development — automated linting, theme check, preview deployments, and zero-downtime production pushes.","md",false,"/images/projects/shopify-deploy-pipeline-final.jpg",7,null,{},"/images/projects/shopify-deploy-pipeline-mockup.jpg",true,{"title":115,"slug":116},"Shopify OTel Kit","shopify-otel-kit",8,"/works/shopify-deploy-pipeline",{"title":5,"description":105},"Created a reusable GitHub Actions workflow that automates the full Shopify theme lifecycle: PR previews on unpublished themes, automated Theme Check linting, Lighthouse performance gates, and atomic production deployments with instant rollback capability.","works/shopify-deploy-pipeline","CI/CD Pipeline for Shopify Themes",[124,125,126,127,128],"GitHub Actions","Shopify CLI","CI/CD","Theme Check","Automation",[124,125,127,130,131,132],"Lighthouse CI","Bash","YAML","/images/projects/shopify-deploy-pipeline.jpg","2026","Xs3L-_4hIV3Abe0keqZfZvy5Xd5DhScyR0XKhgQaV4A",1773700381229]