If you want to A/B test anything on a Shopify store, it pays to understand how the thing you’re testing is actually built. Shopify themes have a clear structure, layouts, templates, sections, blocks, and each layer maps to a different level of testing granularity, with different trade-offs.
This article explains the anatomy in plain English, then makes the case for why the template layer is the sweet spot for most product page experiments.
The anatomy of a Shopify theme
A Shopify theme is a folder of files with well-defined roles. From the outside in:
Layout
The layout (usually theme.liquid) is the outermost wrapper: the <html> and <body> tags, global header and footer, scripts and styles loaded everywhere. Every page on your store renders inside it. You rarely test at this layer, a change here touches every page at once.
Templates
A template defines what an entire page type looks like. There’s a product template, a collection template, a cart template, and so on. When a visitor opens a product, Shopify picks a product template and renders it.
Crucially, a page type can have multiple templates. Alongside the default product template you can create product.landing, product.bundle, product.variant-b, these are called template suffixes. Each product in your catalogue is assigned one template, and you can switch which one it uses. This is a native Shopify mechanism, not a hack, and it’s the foundation of template-level testing. (Shopify’s own theme docs at shopify.dev cover the architecture in detail.)
Sections
Sections are the modular chunks a template is assembled from: an image gallery, a product information panel, a reviews strip, a “you may also like” carousel. In the theme editor, sections are the things you add, remove and drag to reorder. Each section has settings (headings, colours, toggles) defined by its schema.
Blocks and snippets
Blocks are smaller components nested inside sections, inside a product information section, the price, the variant picker and the buy button are each typically a block, and they can be reordered too. Snippets are reusable code fragments for theme developers; they don’t appear in the editor.
JSON templates: the part that matters for testing
Since Online Store 2.0 (2021), templates in modern themes are JSON files, not Liquid pages. A JSON template is essentially a manifest: it lists which sections appear on the page, in what order, with what settings.
// templates/product.variant-b.json (simplified)
{
"sections": {
"gallery": { "type": "media-gallery", "settings": { "layout": "stacked" } },
"main": { "type": "main-product", "settings": { "show_trust_badges": true } },
"reviews": { "type": "reviews-strip" }
},
"order": ["gallery", "main", "reviews"]
}Two consequences follow:
- Creating an alternate template is cheap. In the admin (Online Store → Themes → Edit → template picker → “Create template”), you can duplicate your product template under a new suffix and then rearrange, add or remove sections in the visual editor. No code, no theme duplication.
- Two templates can share the same sections but compose them differently. That means an alternate template isn’t a maintenance fork of your theme, it’s a different arrangement of the same building blocks. Fix a bug in a section and both templates get the fix.
What each layer means for testing granularity
Each layer of the theme corresponds to a level at which you could run an A/B test:
| Layer | Test granularity | Example test | Typical mechanism |
|---|---|---|---|
| Element / block | One component | Button colour, headline copy | JavaScript DOM edits |
| Section | One module | Reviews above vs below the fold | Section settings or JS |
| Template | Whole page layout | Layout A vs layout B | Native template suffix swap |
| Theme | Entire storefront | Redesign vs current theme | Theme split (duplicate theme) |
Element-level: precise but fragile
Element-level tools work by injecting JavaScript that rewrites parts of the page after it loads. Precise, but with familiar costs: the rewrite happens client-side, so visitors can see the original flash before the change applies (flicker), and anti-flicker workarounds often mean hiding content while scripts run, a page speed tax. We’ve written about the flicker and page speed problem separately. Element tests also break silently when a theme update changes the selectors the script targets.
Section-level: no native variant mechanism
Shopify has no built-in way to show section arrangement X to half your visitors and arrangement Y to the other half within one template. Tools that offer this are still doing client-side manipulation or duplicating things behind the scenes. Section reordering is better expressed one level up, as two templates.
Template-level: native, whole-layout swaps
Because multiple templates per page type is a native Shopify feature, a template test needs no DOM rewriting on the tested elements: variant visitors are simply served the alternate template through Shopify’s standard template view mechanism, rendered server-side like any other page. What you’re testing is a complete, coherent page, section order, imagery treatment, trust signal placement, all of it.
Theme-level: the sledgehammer
Theme split testing duplicates your entire theme and routes visitors to one or the other. It’s the right tool for a full redesign, but heavy for everyday optimisation: every content change during the test must be made twice (or the themes drift apart), app embeds and pixels need verifying on both, and the result tells you the whole bundle of differences won or lost, not which change did the work.
Why template-level is the sweet spot for layout tests
For product page experiments, the highest-leverage pages on most stores, template-level testing hits a genuinely useful middle ground:
- Big enough changes to detect. Whole-layout differences tend to produce larger effects than button tweaks, and larger effects need less traffic to detect. If your store isn’t drowning in sessions, this matters more than anything else.
- Native rendering, minimal flicker surface. The variant is a real Shopify page, not a rewritten one. Any anti-flicker handling can be scoped narrowly instead of blanketing the storefront.
- Survives theme updates. Templates are data (JSON) referencing your theme’s sections. Update the theme’s code and both variants keep working.
- One theme to maintain. Unlike theme splits, your content team edits one theme; the variant is just another template in it.
- Honest scope. A template test answers “which page layout converts better?”, which is usually the question you actually have. It won’t isolate which element inside the layout did the work; if you need that, follow up with a narrower test once you have a winning layout.
The main limitation is the flip side of the strength: template tests are per-page-type and per-product-assignment. They’re not the tool for sitewide changes (that’s theme splitting) or for single-element questions on very-high-traffic pages (element tools earn their keep there).
This is the layer Atchoo! operates at: you create an alternate product template in your existing theme (e.g. product.variant-b), Atchoo assigns each visitor deterministically to a variant via a first-party cookie, serves variant visitors the alternate template through Shopify’s native view mechanism, and measures add-to-cart rate on each. No theme duplication, no code, and anti-flicker that’s scoped only to product pages with an active test.
For the mechanics of setting this up step by step, see Shopify template testing explained and our walkthrough on how to A/B test Shopify product pages. For the full methodology around any test you run, the complete guide to Shopify A/B testing is the place to start, and if you’d like to try a template test on your own store, Atchoo’s 14-day free trial covers everything you need for your first one.
Frequently asked questions
Do alternate templates require a developer?
Usually not, on an Online Store 2.0 theme. The admin’s theme editor can create a new product template and let you rearrange sections visually. You’d want a developer only if your variant needs a section the theme doesn’t ship with.
Does creating extra templates slow my store down?
No. A template is only rendered when a visitor loads a page that uses it. Unused templates are inert JSON files sitting in the theme.
What’s the difference between duplicating a theme and adding a template?
A duplicated theme is a full copy of everything, code, sections, settings, templates, that must be maintained in parallel. An added template is one JSON file inside your existing theme, sharing all the same section code. For testing one page type, the template is dramatically lighter.
Are alternate templates and A/B testing visible to Google?
The variant is served via a template view parameter on the same URL structure, and a proper test serves each visitor one consistent version. Search engines treat well-implemented A/B tests as acceptable practice; we cover the details in does A/B testing affect SEO.
Can I test two different section arrangements without a testing app?
You can switch a product’s template manually and compare before/after periods, but that’s a sequential comparison, not an A/B test, traffic, seasonality and promotions change between periods and pollute the comparison. Splitting simultaneous traffic is what makes the result trustworthy.