← /research/ · research ·

Shopify Theme Best Practices in 2026: A Full-Stack Guide

The Summer '25 theme-blocks architecture and the Horizon theme reset how Shopify storefronts get built. A field guide to the merchant and developer decisions that matter in 2026. Joel Shetler·shopifythemes

A full-stack field guide to building Shopify storefronts in 2026. It covers both the merchant decisions (which theme, which apps, when to migrate) and the developer implementation (architecture, performance budgets, accessibility) that produce fast, accessible, high-converting stores in the theme-blocks era.

The sourcing is Shopify's own developer documentation, the Shopify Help Center, the Summer '25 Edition announcement, and the Horizon theme source, with field research filling the gaps. Verify version-specific details (theme versions, app pricing, Theme Store thresholds) against shopify.dev at build time, because the platform moves with every Edition.

What is inside

A long guide deserves a map. The fifteen sections, in order:

  1. The 2026 picture in one minute
  2. Three theme architectures
  3. Choosing a theme (merchant)
  4. Theme architecture and structure (developer)
  5. Performance: the make-or-break
  6. Conversion and storefront UX
  7. SEO inside the theme
  8. Accessibility
  9. Integrating apps without wrecking the theme
  10. Developer workflow and tooling
  11. Headless and Hydrogen: when to leave the theme
  12. Migration playbook
  13. The 2026 best-practice checklist
  14. Dawn vs. Horizon: making the call
  15. Sources

1. The 2026 picture in one minute

The biggest change to Shopify themes since Online Store 2.0 landed in 2021 shipped in the Summer '25 Edition (May 21, 2025): a new theme architecture built around theme blocks, and a new default theme family called Horizon. If you are building, buying, or maintaining a Shopify storefront in 2026, this is the context that governs every decision below.

The five things that matter most this year:

  1. Theme blocks are the new architecture. Blocks are now defined at the theme level (in a /blocks folder), reusable across sections, and nestable up to 8 levels deep. This replaces the shallow, section-scoped block model of OS 2.0.
  2. Horizon is the reference theme. A family of 10 free themes built on the new architecture, with AI-assisted block generation via Shopify Magic. Dawn is still excellent and still the canonical OS 2.0 reference, but new builds should start on the theme-blocks architecture.
  3. Performance is a gate, not a goal. The Theme Store rejects themes scoring below an average Lighthouse performance of 60, and Core Web Vitals move conversion and rankings directly. Build HTML and CSS first, treat JS as progressive enhancement, keep JS bundles at 16 KB or less.
  4. Accessibility is a build requirement. WCAG-aligned keyboard, contrast, and touch-target rules are baked into Shopify's theme guidelines and increasingly into legal exposure.
  5. App discipline protects everything else. The average store runs 6 apps; each unnecessary script adds 50 to 200 ms and chips at conversion. Use app blocks and embeds, not hand-injected scripts.

2. Three theme architectures

Every Shopify theme falls into one of three architecture versions. Knowing which one you (or your client) are on determines what is possible without code, which tutorials apply, and whether an app feature will work.

Architecture What it means Status in 2026
Vintage Original architecture. Sectioned or non-sectioned. No JSON templates, no app blocks, no dynamic sources. Legacy. Not sold in the Theme Store. Shopify's free vintage themes get security fixes only. Migrate off.
Online Store 2.0 Sections on every page, JSON templates, section groups, dynamic sources, app blocks and embeds. Dawn is the canonical example. Mature and fully supported. A safe, fast baseline. Block nesting is shallow (section-scoped).
Theme blocks (newest) Everything OS 2.0 has, plus theme-level reusable blocks, deep nesting, group blocks, and static blocks. The Horizon family lives here. The current default and the target for new builds. Most advanced customization surface.

How to check a store's version. Open Online Store → Themes → Edit theme, select the Default product template, and look below the section list. An Add section button means you have sections-on-every-page (OS 2.0 or newer). For theme blocks, look for a /blocks directory in the code editor and theme-level block support in the editor's block picker.

What theme blocks unlock

In OS 2.0, a block could only be used inside the single section that defined it. Theme blocks are defined once at the theme level and reused anywhere, and, critically, they can contain other blocks. In Horizon, a "Product card" block can hold an "Image" block, a "Group" block, and a "Rating" block, all configurable in the editor and nestable up to eight levels. Group blocks bundle related elements (a heading plus product grid plus banner) into one reusable unit, and global or static blocks let a change propagate across the whole store. This is what makes the editor feel like a real page builder without a third-party app.

3. Choosing a theme (merchant)

For merchants. The right starting point in 2026 is almost always a free, well-maintained theme on the newest architecture. You can go a long way before a paid theme earns its price.

Theme Cost Use it when
Horizon (family of 10) Free New stores and rebuilds. Newest architecture, theme blocks, AI block generation, strong performance defaults. Start here.
Dawn Free You want the simplest, most battle-tested OS 2.0 base, or you are following older Dawn-based tutorials. Still the canonical performance reference.
Studio / Origin / Refresh / Sense Free Design-forward free alternatives when Horizon and Dawn do not fit the brand out of the box.
Impulse (Archetype), Prestige (Maestrooo) Paid (one-time) Later, when you need a premium feel or specific merchandising features and have revenue to justify it. Not a day-one purchase.

Selection criteria that predict success

Don't install themes from outside the Shopify Theme Store. Off-store themes are not vetted for quality or compatibility, may lack JSON templates for some page types, and can break core features. The one exception is a purpose-built custom theme from a developer you trust.

4. Theme architecture and structure (developer)

For developers. Good theme architecture is about giving merchants the right amount of flexibility: enough to express a brand, not so much that the editor becomes a junk drawer. The structural unit decisions (template vs. section vs. block) are the highest-impact choices you make.

Templates, sections, blocks

These guidelines assume OS 2.0 or newer (JSON templates and section groups). You cannot add or remove static sections from Liquid layouts; the customizable surface lives in JSON.

Theme blocks (the 2026 model)

Theme blocks are Liquid files in the theme's /blocks folder. They are reusable across sections and nestable, unlike section-defined blocks.

/blocks/text.liquid                       (a theme-level, reusable block)
{% schema %} ... {% endschema %}          (settings, presets, nested blocks)
{% stylesheet %} ... {% endstylesheet %}  (auto-subset per render tree)

# A section opts in to ALL theme blocks:
"blocks": [{ "type": "@theme" }, { "type": "@app" }]

# And renders them in stored order:
{% content_for 'blocks' %}

Key rules to internalize:

Metafields and metaobjects as first-class content

Connect settings to dynamic sources, meaning resource attributes and metafields, so a block reflects the product or page it renders in. Build purpose-specific blocks for standard metafields (size chart, care guide, ingredient or origin lists). Audit competitor PDPs in your target vertical and design components around the structured content they present. This keeps merchandising data out of free-text descriptions and reusable across the catalog.

5. Performance: the make-or-break

Performance is the area where theme quality is most measurable and most consequential. It moves conversion, repeat purchase, and search rankings, and it is an explicit gate for the Theme Store.

Core Web Vitals: 2026 "good" thresholds

Metric Target
LCP (load) ≤ 2.5 s
INP (interactivity) ≤ 200 ms
CLS (visual stability) ≤ 0.1

INP replaced FID as a Core Web Vital in 2024. Interaction latency now counts, so heavy JavaScript is penalized twice.

The Theme Store speed score

A theme must average a Lighthouse performance score of 60 or higher across home, product, and collection pages to be accepted. Shopify weights them:

[(p × 31) + (c × 33) + (h × 13)] / 77

Here p = product, c = collection, h = home (mobile scores). Use the median of several runs.

JavaScript discipline

Asset and rendering discipline

How to test like Shopify does

The app-bloat tax is a theme performance problem. The average merchant installs 6 apps, and review widgets, page builders, and chat apps are the most-cited speed killers. Each unnecessary script tag adds roughly 50 to 200 ms. Budget apps as strictly as you budget your own JavaScript (see section 9).

6. Conversion and storefront UX

A fast theme that does not convert is still a failure. These are the storefront patterns that consistently earn their place, useful to both the developer shipping defaults and the merchant configuring them.

Layout fundamentals

The product page (PDP) checklist

Order matters. A high-converting PDP presents, roughly top to bottom: 5 or more images (front, back, on-model, print or detail close-up, lifestyle); a body-measurement size chart with a fit note; a spec callout; care instructions; fulfillment or print-method disclosure where relevant; shipping ETA visible above add-to-cart; reviews below the fold; a two to three item cross-sell; and an FAQ accordion answering the top objections (shipping, returns, sizing). Dynamic variant changes (price, availability) must update for screen readers, not just visually (see section 8).

Trust-eroding patterns to avoid: fake-scarcity stock countdowns, multiple FOMO timers, wheel-of-fortune pop-ups, and redundant currency converters (Shopify Markets handles currency natively). These depress conversion at the premium end and add script weight.

Seven storefronts worth studying

Principles are easier to trust when you can see them shipped. Here are seven Shopify stores, captured June 2026, that get the fundamentals above right. All seven run on Shopify. Most are bespoke themes, but Quiet Town is a customized Dawn, proof that the free reference theme can carry a distinctive, beautifully art-directed brand. Click any screenshot to open the live store.

Tecovas homepage: a single editorial hero over a full-bleed lifestyle photo

Tecovas — One decisive hero ("Father Like Son") over a full-bleed lifestyle photo, no carousel, with a tight top-level nav and a visible shipping-threshold bar. A textbook take on the layout fundamentals above, on a custom theme.

Vacation homepage: one bold retro hero with rating and review count under a single CTA

Vacation — Personality as conversion. The homepage commits to one '80s-leisure idea, with the rating and review count (4.8 / 5 across nearly 11,000 reviews) sitting right under a single, unmissable hero and CTA. A fast, simple layout leaves all the room you need for brand.

Allbirds homepage: a product-first split hero foregrounding the shoe

Allbirds — A split hero that is product-first and message-light, foregrounding the shoe and a single sustainability line. A clean study in merchandising the product above the fold without a slider.

Sabai homepage: a row of trust badges directly beneath the hero

Sabai — Watch the band of trust signals directly under the hero (FSC-certified, PFAS-free, made in the USA, B Corp). For considered, higher-ticket purchases, surfacing proof early is the conversion move, done here without a single fake-scarcity timer.

Quiet Town homepage: editorial photography and restrained type on a customized Dawn theme

Quiet Town — The Dawn store on the list. Editorial photography, restrained type, and an eight-item nav turn the free reference theme into something that reads as bespoke. If you are wondering how far Dawn can go, this is the answer.

Floyd homepage: a calm single hero with a lean navigation

Floyd — "Everything you need, nothing you don't," and the storefront practices it: a calm single hero, a lean nav with clear Trade and Membership entry points, and warm lifestyle imagery doing the selling. Custom theme, restrained execution.

Albany Park homepage: the offer and value props stacked beside the hero with two CTAs

Albany Park — Leads with the offer ("Make It Yours," free swatches, white-glove delivery) above the fold, two clear CTAs, and value props stacked beside the hero. A clean example of putting the purchase-deciding details (fabric, delivery, samples) front and center for a furniture buyer.

7. SEO inside the theme

Shopify gets a lot right by default: auto sitemaps, canonical tags, WebP conversion, SSL, fast hosting, and automatic redirects on handle changes. But several SEO outcomes are decided in theme code, which makes them a theme best-practice topic.

The duplicate-URL problem (and the one-line fix)

When a product belongs to multiple collections, Shopify exposes it at several paths (/products/x plus /collections/*/products/x). Canonicals point to the clean URL correctly, but by default collection pages link internally to the collection-scoped path, so most internal link equity flows to the non-canonical URL. The fix lives in the collection template: remove the within: collection parameter from the product link so internal links target /products/[handle] directly. This is a theme edit and is never done automatically.

Structured data and metadata

Known platform limits to design around

robots.txt is now editable via robots.txt.liquid, but URL structures are fixed (the /products/ and /collections/ prefixes are mandatory; products cannot live at the root), and you cannot add custom server-side rendering or edge logic beyond what Shopify exposes. Plan information architecture within those constraints instead of fighting them.

8. Accessibility

Shopify's theme accessibility guidance is written against WCAG (Perceivable, Operable, Understandable, Robust). Following it is both an inclusion obligation and, increasingly, a legal one. The essentials:

Keyboard and structure

Content and media

Color and contrast (don't eyeball it)

Element Minimum contrast ratio
Text under 24 px regular / under 18.5 px bold 4.5:1
Large text (24 px regular or larger / 18.5 px bold or larger) 3.0:1
Icons and input borders 3.0:1

And never use color as the only way information is conveyed. Test with Lighthouse, WAVE, or Accessibility Insights, and add the Shopify Lighthouse CI action to catch accessibility regressions automatically.

9. Integrating apps without wrecking the theme

For developers and merchants. Apps are how most stores add reviews, upsells, email capture, and subscriptions. The 2026 best practice is to integrate them through Shopify's extension surface, not by pasting scripts into the theme.

Rule of thumb: if an app adds more than one script tag and is not critical to buying or trust, it probably costs more in speed and conversion than it returns. One well-chosen app per job beats a drawer full of single-purpose ones.

10. Developer workflow and tooling

For developers. Treat a theme like real software: version control, local development, automated checks, CI.

11. Headless and Hydrogen: when to leave the theme

Liquid themes are the right answer for the overwhelming majority of stores. They are fast by default, fully integrated with the editor, and far cheaper to maintain. Going headless means giving up the theme editor and owning rendering, caching, and a whole front-end codebase.

Hydrogen is Shopify's React-based framework for custom storefronts, designed to deploy on Oxygen, Shopify's global hosting. Reach for it only when you have genuinely custom front-end requirements (bespoke UX, a content platform driving commerce, an existing React org) and the engineering capacity to own performance yourself, because you lose Shopify's performance defaults and have to re-earn your Core Web Vitals. For most merchants and agencies in 2026, a theme-blocks theme on Horizon is the better default; headless is a deliberate, well-resourced exception, not an upgrade path.

12. Migration playbook

For merchants and developers. Moving from Dawn/OS 2.0 (or a vintage theme) to the theme-blocks architecture is the most common 2026 project. Do it as a controlled migration, not a swap.

  1. Build on a draft theme. You can hold multiple architecture versions in drafts at once, so develop Horizon alongside the live theme.
  2. Recreate, do not copy. Theme blocks are a different model; rebuild sections using theme and group blocks rather than porting old block code. Re-map metafields to dynamic sources.
  3. Re-verify SEO defaults. Especially the within: collection internal-link fix and structured data, which do not carry over.
  4. Re-add apps via app blocks and confirm nothing left orphaned code in the old theme.
  5. Benchmark before and after with Lighthouse and, post-launch, the Web Performance Dashboard.
  6. Launch Tuesday or Wednesday morning. Give yourself two full business days to catch silent regressions before weekend traffic.

Caveat: publishing Horizon upgrades your store to "new customer accounts." When you publish a Horizon theme, Shopify shows a notice that publishing will upgrade to the new version of customer accounts. This is a store-level change, not a theme styling change. It flips the whole store from classic or legacy customer accounts to Shopify's hosted new customer accounts: passwordless login (email plus a one-time 6-digit code, no passwords), a /account hub that your theme no longer renders, and native order tracking, self-serve returns, store credit, and B2B support.

Existing customers keep their data; they simply sign in the new way. But this is close to a one-way door: reports indicate roughly a 30-day window to revert, after which (or once legacy is disabled) you cannot go back. Legacy customer accounts are deprecated as of early 2026 with a sunset to be announced, so this upgrade is coming regardless. Horizon just triggers it now. Verify the exact revert window and any app warnings in Settings → Customer accounts before you publish.

Pre-publish checklist (Horizon and new customer accounts)

Run this on the unpublished theme before you hit publish.

Theme and storefront

New customer accounts

13. The 2026 best-practice checklist

Merchant / store owner

Developer

14. Dawn vs. Horizon: making the call

This is the decision most stores face this year. The short version: for a new build, pick Horizon. For a mature, mobile-sensitive Dawn store with no reason to redesign, stay put and revisit in about six months. But the most important detail for anyone already committed to a migration changes the math, so read the framing below before the table.

What reframes everything: there is no automatic migration, in either direction. Shopify never built one, and the two architectures do not translate. Dawn's flat section/block model and Horizon's nested web-component block tree are structurally incompatible. So whether you move to a fresh Dawn build or to Horizon, you are doing a manual rebuild either way (typically 30 to 60 hours for a moderately customized store). That means the usual "stick with Dawn to avoid the rebuild" argument does not apply to you. Your real question is narrower: given that I am rebuilding regardless, which architecture do I want to land on?

Head-to-head, on what decides it

Dimension Dawn Horizon Edge
Architecture OS 2.0. Server-rendered Liquid sections, flat blocks (2 levels). Web-component framework. Sections plus theme blocks nested up to 8 levels; interactive parts (variant picker, gallery, cart, search) are web components in Shadow DOM. Horizon (capability)
Desktop performance PageSpeed ~96 (clean demo) PageSpeed ~97 (clean demo) Tie
Mobile performance ~82 clean; 85+ tuned ~52 clean; ~70 to 75 after tuning (disable animations, audit apps) Dawn (today)
Editor experience 2021 editor with minor refinements. Functional, stable. Copy/paste blocks across templates, hover-preview, inline canvas editing, right-click actions, conditional settings, AI block generation. Horizon (decisive if you live in the editor)
Layout flexibility (no code) Complex layouts usually need Liquid edits or a page-builder app. Multi-column, asymmetric, and nested layouts built entirely in the editor. Global (reusable) blocks. ~28 sections vs Dawn's ~17. Horizon
App compatibility Apps hook the standard Liquid form pattern, well-documented and battle-tested. Almost everything works. Shadow-DOM web components break older apps that listen for native form events; many need a Horizon-specific module. Dawn (today)
Update cadence Quarterly. Small, well-tested, rarely breaks things. Weekly (stable build 3.5.1 as of Mar 30, 2026). Fast features, but custom code touching internals is at risk. Depends on appetite
Internationalization English only by default; relies on Translate & Adapt or an app. Ships EU packs (EN/FR/IT/DE/ES) for theme strings out of the box. Horizon (if EU)
Learning curve Learnable in a few hours; a setting lives in one of two places. The first week is genuinely frustrating; by week three you stop reaching for code. Better long-term for agencies and teams. Dawn (short term)
Where Shopify is investing Supported, but mature and flat. No deprecation announced. The strategic platform: weekly investment, AI features, the 5-year roadmap. Horizon

Performance figures are real-world PageSpeed numbers from clean demo stores on identical product sets (reported by theme and app developers, mid-2026). Treat them as directional. Your tuned numbers depend on imagery, apps, and content, but the mobile gap is corroborated across multiple independent tests at roughly 30 points clean.

The mobile-performance gap, in context

This is the one genuine knock on Horizon today, and it is worth understanding precisely rather than as a slogan. A clean Horizon store scores around 52 on mobile PageSpeed vs Dawn's ~82 on the same content, a gap of about 30 points. The causes are concrete: more JavaScript runs by default (the web-component runtime, an animation engine, a heavier predictive-search index), animations are on out of the box (including hover effects that fire on mobile taps), and some components hydrate above the fold before the user scrolls. Most of it is recoverable: turning off animations (Theme Settings → Animations → Reduce motion) buys back about 10 points, and auditing third-party apps another 5 to 15, landing a tuned Horizon around 70 to 75. That is still below a tuned Dawn (85+), but no longer painful. The trajectory matters for a multi-year decision: Horizon has gained roughly 5 mobile points per quarter since launch while Dawn is flat, so the gap is projected at 10 to 15 points by Q4 2026 and parity by 2027.

The app-compatibility risk: check this before you decide

Because Horizon's variant picker, gallery, and cart drawer are web components inside Shadow DOM, older apps that hook the classic Liquid form pattern can break in subtle ways (variant changes that do not propagate, galleries that do not update, cart drawers that misbehave). Before committing to Horizon, make a list of your business-critical apps (reviews, upsell, subscriptions, swatches/variant images, bundles) and confirm each one's listing explicitly states Horizon support. If a revenue-critical app has no Horizon module, that alone can settle the decision for Dawn until it ships one.

Decision framework for your migration

Since you are rebuilding regardless, weigh these in order. The first one that lands hard for you usually decides it.

  1. Do your critical apps support Horizon? If a must-have app does not, choose Dawn now and re-evaluate when it ships support. (Hard gate.)
  2. Is mobile PageSpeed of 80 or higher a hard requirement? If you run paid acquisition where landing-page experience and Quality Score depend on it, or you sell into mobile-first markets where load time visibly costs conversion, Dawn wins today. (Hard gate.)
  3. How much will you live in the editor, and how much layout flexibility do you need? If you (or your clients) make frequent layout changes, or you sell editorial or visual products where layout is the brand, Horizon's editor and nested blocks pay for the migration on their own.
  4. What is your appetite for maintenance? Weekly Horizon updates mean you must keep all customization in new blocks/ and sections/ files and never edit core theme files. If you want set-and-forget stability, Dawn's quarterly cadence is calmer.
  5. Time horizon. If this rebuild is meant to last 3 to 5 years, Horizon is where Shopify is investing and where the mobile gap is closing. If it is a tactical refresh you will redo soon anyway, Dawn's maturity and speed are a safe, cheap landing spot.

Choose Horizon if…

Choose Dawn if…

My read for a deliberate migration in mid-2026: default to Horizon if and only if your critical apps clear the compatibility check and you can live with a tuned-70s mobile score for a few quarters, because you are paying the rebuild cost once and Horizon is the architecture with the editor, the flexibility, and Shopify's investment behind it. Fall back to Dawn when a hard gate trips: an app with no Horizon support, or a strict mobile-performance requirement you cannot tune your way out of. Whichever you pick, build it on an unpublished theme, get it within about 10 mobile points of your current store before launch, and watch conversion for two weeks with the old theme one click away.

15. Sources

Primary documentation and Shopify announcements consulted June 2026, supplemented by internal field research (Shopify SEO, app-stack, and store best-practice notes).

  1. Best practices for building Shopify themes · shopify.dev
  2. Performance best practices for Shopify themes · shopify.dev
  3. Building with sections and blocks · shopify.dev
  4. Accessibility best practices for Shopify themes · shopify.dev
  5. Theme blocks quick start · shopify.dev
  6. Theme architecture versions and sources · Shopify Help Center
  7. Summer '25 Edition announcement · Shopify
  8. Shopify/horizon theme source · GitHub
  9. Horizon vs Dawn: which theme to pick in 2026 (real PageSpeed numbers, app-compat notes) · Craftshift
  10. Upgrading to customer accounts from legacy · Shopify Help Center

Researched and compiled by the team at Scratch, June 2026. Verify version-specific details (theme versions, app pricing, Theme Store thresholds) against shopify.dev at build time, because the platform moves with every Edition. Building or migrating a Shopify theme and editing content across a large catalog is the loop Scratch is built for: pull content into files, let an AI agent edit, review every diff, publish only what you approve.

See it run on your own content.

Curtis runs these calls himself. Thirty minutes, no pitch, no slides. He connects your platforms live and shows you your content as an editable, reviewable diff. Bring anything sticky: a refresh, a migration, or a rebrand.

See it run on your content → or download it free