The "Theme Ops" Playbook for Shopify Agencies

What Is "Theme Ops"?

"Theme Ops" is a framework for treating the entire theme development lifecycle — from the first git push to the client clicking "Approve" — as a single operational concern. Not five disconnected tools. Not a series of handoffs between people. One pipeline with clear stages, exit criteria, and ownership.

Think of it like DevOps for theme agencies. DevOps unified development and operations into a single pipeline. Theme Ops unifies development, preview, QA, client feedback, and deployment into a single pipeline.

Why Does This Need a Name?

Because without a name, it doesn't get treated as a discipline. Agencies have processes for design (in Figma). They have processes for project management (in Monday, Notion, or Asana). But the space between "developer writes code" and "client approves the site" is usually informal, inconsistent, and different for every project.

Naming it creates accountability. If it has a name, it can be documented, measured, and improved.

Why Most Agencies Don't Have Theme Ops

When we talk to Shopify agencies about their post-development workflow, we hear the same patterns:

The "Cobbled Together" Reality

• Code lives in GitHub/GitLab — pushed via Shopify CLI or GitHub integration
• Preview lives on Shopify — a dev theme on the production store
• QA happens in BrowserStack — or manually on personal devices
• Feedback arrives via email — or Loom videos, or Slack messages, or annotated PDFs
• Sign-off tracked in... nowhere — maybe an email saying "looks good!" buried in a thread

Each tool works fine individually. The problem is the gaps between them. Every handoff loses context, adds latency, and creates communication overhead.

Why This Persists

• "It works well enough" — until a project goes sideways and the lack of process becomes visible
• No single tool existed — agencies assumed they had to build this from parts
• The cost is invisible — wasted hours on coordination don't show up as a line item
• Every project is "unique" — so process gets reinvented instead of standardized

The Theme Ops Framework

Theme Ops has five phases. Each phase has a clear input, a clear output, and clear exit criteria that gate progression to the next phase.

Phase 1: Develop

The development phase covers everything from initial scaffolding to feature-complete code. This is where most agencies already have decent processes — Shopify CLI, version control, and code review are standard.

Git Workflow

Use a branch strategy that supports multiple concurrent projects on the same store. Recommended:

• main — represents the currently published theme
• develop — integration branch for in-progress work
• feature/* — individual template or feature branches

Shopify CLI Integration

Use shopify theme dev for local development with hot-reloading against the production store's data. This gives you real products, collections, and content during development without maintaining sample data.

Exit Criteria for Phase 1

• All templates specified in the design are built
• Theme compiles without errors (shopify theme check passes)
• Code reviewed and merged to develop branch
• No placeholder content or TODO comments in shipped code

Phase 2: Preview

The preview phase makes the theme browsable by non-developers. This is where template mapping, content parity, and navigability become critical.

Template Mapping

Custom templates need to be assigned to the correct pages, products, and collections so that anyone navigating the preview sees the intended design. On Shopify dev themes, this requires auto-mapping since admin assignment isn't available. See the complete guide to Shopify dev theme template mapping for a full breakdown of approaches.

Content Parity

Every section should have representative content — not "Lorem ipsum" but real (or realistic) text, images, and data. Clients can't evaluate a design if half the sections show placeholder content.

Navigability Check

Navigate the entire preview as if you were a client. Click every navigation link. Visit every mapped template. Ensure the experience is coherent end-to-end.

Exit Criteria for Phase 2

• All custom templates mapped to correct resources
• Navigation links resolve correctly within the preview
• Representative content in all sections
• Preview URL is shareable (no local-only dependencies)

Phase 3: QA

Internal quality assurance before the client ever sees the preview. This phase catches issues that would undermine client confidence or require rework.

Cross-Browser Screenshots

Capture every mapped template across Chromium, Firefox, and WebKit at desktop, tablet, and mobile viewports. Review for layout breaks, missing visual effects, typography issues, and responsive behavior differences. ThemeSync's Visual QA feature automates this with a single click.

Code Scanning

Run shopify theme check for Liquid best practices. Check for accessibility issues (missing alt text, color contrast, keyboard navigation). Validate structured data for SEO.

Compatibility Checks

If the store uses apps that inject content (reviews, loyalty, wishlists, chatbots), verify they render correctly with the new theme. App embeds are a common source of visual issues that only appear with real store data.

Performance Baseline

Run Lighthouse or WebPageTest against the preview URL. Establish performance metrics before the client sees the theme — if there are performance issues, fix them now rather than after client feedback introduces scope uncertainty.

Exit Criteria for Phase 3

• Zero critical cross-browser layout issues
• All three engines pass visual review
• No accessibility blockers (WCAG AA minimum)
• Performance within acceptable range (LCP < 3s, CLS < 0.1)
• App compatibility verified

Phase 4: Feedback

Client review and feedback collection. The goal of this phase is a clear approval or a specific, actionable list of changes requested.

Client Review Sessions

Present the preview to the client with context: what to look at, what to ignore, how to provide feedback, and what "approved" means. Don't just send a link and hope for the best.

Pin-Based Feedback

Let clients click directly on elements to leave comments. This captures the page, section, element, viewport, and browser automatically — eliminating the "what are you referring to?" back-and-forth. ThemeSync's Client Feedback feature provides this natively within the theme preview — no separate tool required.

Context Capture

Every piece of feedback should automatically include enough context for a developer to understand and action it without follow-up questions. At minimum: page URL, element selector, viewport size, browser, and timestamp.

Resolution Workflow

Each feedback item has a lifecycle: Open → In Progress → Resolved → Verified. Clients can see the status of their feedback without asking. Developers can see what's still outstanding without checking email.

Exit Criteria for Phase 4

• All templates have been reviewed by the client
• All feedback items are resolved or explicitly deferred
• Client has approved each template (explicit sign-off, not assumed)
• Sign-off is documented with timestamp and attribution

Phase 5: Deploy

Deployment is the final phase — publishing the approved theme to production. This should be a controlled, verified process, not a rushed "click Publish and hope."

Pre-Deployment Checklist

• All sign-offs collected (designer, developer, PM, client)
• Template mapping snippet removed (if applicable)
• QA-only code removed (debug scripts, test content)
• Performance re-verified post-cleanup
• Backup of current live theme created
• Deployment window communicated to stakeholders

Theme Publishing

Publish the theme via Shopify CLI or admin. Assign any custom templates that require admin-level assignment (now that the theme is live). Verify post-publish by spot-checking key pages.

Post-Launch Monitoring

For the first 24-48 hours after launch, monitor:

• Conversion rate (any significant drop indicates an issue)
• Console errors (new JavaScript errors from the theme)
• Customer support tickets (reports of visual issues or broken functionality)
• Core Web Vitals (ensure performance hasn't regressed)

Exit Criteria for Phase 5

• Theme published and live
• Custom templates assigned in admin
• Post-publish verification complete
• Client notified of successful launch
• No critical issues in first 24 hours

The Sign-Off Chain

A sign-off chain defines who approves what, in what order. This prevents the "everyone assumed someone else checked it" problem.

Recommended Chain

1. Developer → code is complete and functional (Phase 1 exit)
2. Designer → visual implementation matches design specs (Phase 2-3)
3. PM/QA Lead → quality standards met, no cross-browser issues (Phase 3 exit)
4. Client → design approved, ready for launch (Phase 4 exit)

Each link in the chain gates the next. A designer shouldn't review until the developer confirms code completeness. A client shouldn't review until internal QA is clean. This prevents clients from seeing (and reacting to) issues you already know about.

Scaling Theme Ops

The framework above works for a single project. Here's how it scales when your agency is running 3-5 concurrent projects:

Multiple Concurrent Projects

Each project gets its own session/workspace with independent template mappings, QA status, and feedback threads. The PM dashboard shows all projects with their current phase, blocking issues, and next actions.

Team Onboarding

Because the framework is documented and consistent, new team members can onboard by learning the five phases and their exit criteria. No more "ask Sarah how she does QA" tribal knowledge.

Session Templates

For repeat project types (e.g., "standard 8-template Shopify build"), create session templates with pre-configured template sets, QA checklists, and sign-off chains. New projects start from a template rather than from scratch.

Metrics and Improvement

With structured phases, you can measure:

• Time spent in each phase (where are bottlenecks?)
• Number of feedback cycles before approval (is scope clear?)
• QA issues found per project (is code quality improving?)
• Time from code-complete to client sign-off (overall velocity)

Tools and Implementation

You can implement Theme Ops with various combinations of tools. Here's the landscape:

ThemeSync Approach

ThemeSync was designed specifically around the Theme Ops framework. It provides Cloud Preview (auto-mapping), Visual QA (cross-browser screenshots), Client Feedback (pin-based client comments), and Deploy (sign-off gating) in a single platform — purpose-built for Shopify agencies. Development and final deployment remain in Shopify CLI/GitHub.

Complementary Tools

Regardless of your Theme Ops implementation:

• Figma — design phase (pre-development)
• Linear/Jira/Notion — project management and sprint tracking
• Slack/Teams — team communication (but NOT for feedback)
• Shopify CLI — development and deployment
• GitHub/GitLab — version control and code review

Checklist: Theme Ops Readiness Assessment

Score your agency on each item. If you're missing more than 3, you have Theme Ops gaps that are costing you time and money. Download the full Theme Ops checklist to use with your team.