SHOPIFY THEME DEVELOPMENT

US Shopify theme development splits into two tracks: performance optimisation for most brands, Hydrogen headless for the ones where performance still falls short

We develop and customise Shopify themes for US DTC brands — improving Core Web Vitals, building product page templates for each product type, adding checkout UI extensions for Shopify Plus, and scoping Hydrogen builds when a standard theme cannot deliver the performance or experience a brand requires.

Request a Theme Development Brief → View the evidence →
Core Web Vitals improvement to above 70 mobile PageSpeed for paid search quality score compliance · Custom Shopify 2.0 product page templates for subscription, bundle, and standard product types · Shopify Plus checkout UI extensions for order bump and post-purchase upsell · Hydrogen/Oxygen scoping and development for performance-critical US DTC brands
This is for you if

Who This Is For

You are running Google Ads and Meta ads to a Shopify store where the mobile PageSpeed score is consistently below 60. Your Google Ads quality score is taking a penalty on landing page experience. Your creative is strong, your targeting is good, and you are still paying more per click than you should be because your landing page load speed is poor. The problem is in the theme — JavaScript that loads synchronously, images that are not responsive, and CSS that was never cleaned up as the store grew.

You are on Shopify Plus, which means you have access to Shopify's checkout UI extension framework for building order bump widgets, post-purchase offer pages, and custom checkout fields. You are not using any of them. Every order goes through a standard Shopify checkout with no upsell moment, no post-purchase offer, and no custom logic. The feature is available on your plan — you just need a developer to build it.

Your Shopify store has subscription products, one-time purchase products, bundle products, and possibly digital products — all rendering on the same product page template. The subscription upsell appears as an afterthought. The bundle components are listed in the description. The digital product has a download section that also appears on physical products. You know the templates need to be separated. You have not had the Shopify 2.0 JSON template work done to achieve it.

What's broken

What's Broken

Single product page template for all product types — subscription products, bundle products, and standard one-time purchase products all rendering on the same template, with subscription add-on appearing as an afterthought rather than integrated into the product page design

A subscription product and a standard one-time purchase product have fundamentally different conversion logic. A subscription product page needs to make the recurring billing cadence visible and understandable before the add-to-cart decision, show the per-delivery savings clearly, and position the one-time purchase as the inferior option. A bundle product page needs to display bundle components, show per-item savings, and handle a different cart add logic. When both render on a single product template — a layout designed for a single, one-time-purchase item — the subscription and bundle features are retrofitted into the description field or added as app overlays that do not match the theme's visual language. Shopify 2.0 JSON templates allow separate page structures for each product type. Most brands have not built them.

No checkout UI extension for post-purchase upsell — Shopify Plus brands not using checkout extensions are leaving per-order revenue on the table without additional ad spend

Shopify Plus includes access to the checkout UI extension API, which allows custom widgets to appear within the Shopify checkout: order bump offers on the cart page, upsell recommendations in the checkout flow, custom post-purchase offer pages before the order confirmation screen, and custom fields for collecting order-specific information. These are native Shopify Plus features with no per-transaction app fee. Brands not using them are completing orders without a post-add-to-cart upsell moment. Building a checkout UI extension requires Shopify CLI, React, and familiarity with the Shopify checkout extension framework — this is developer work, not a settings change.

Theme JavaScript not code-split or deferred — all theme JavaScript loading on first paint, pushing Lighthouse mobile score below 60 and affecting Google Ads quality score and organic ranking

A Shopify theme built without code splitting loads its entire JavaScript bundle on the first page view, including JavaScript for features like image zoom, product variant selection, cart drawer animation, and section transitions — most of which are not needed for the above-the-fold first paint. This render-blocking behaviour delays LCP, lowers the Lighthouse performance score, and triggers Google's mobile page experience penalties. For brands running Google Ads, a low landing page experience score reduces quality score and increases cost per click. For organic search, Core Web Vitals are a ranking signal. The fix requires code-level changes to how the theme loads JavaScript — deferring non-critical scripts, splitting the bundle by feature, and loading feature-specific JavaScript only when the feature is needed.

Mobile experience not differentiated from desktop — responsive theme that reformats desktop layout for mobile rather than building a mobile-first experience, with tap targets too small, above-the-fold content not optimised for thumb-reach, and product image carousel not swipe-native

A responsive Shopify theme that was designed desktop-first and made responsive through CSS breakpoints is not the same as a mobile-first Shopify theme. On a responsive (but desktop-first) theme, the mobile experience is the desktop layout compressed and reflowed. Tap targets are often under 44px — below Google's recommended minimum. The above-the-fold content on mobile shows a large product image that pushes the add-to-cart button below the fold. Product carousels respond to click rather than swipe because the interaction was built for a mouse. Fixing a desktop-first responsive theme for mobile requires CSS work at the breakpoint level, JavaScript modifications for touch event handling, and layout decisions about what to prioritise above the fold on a 390px wide screen.

What we engineer

What We Do

Core Web Vitals and PageSpeed Optimisation

We audit your theme's current LCP, CLS, FID, and INP scores on mobile and desktop using Lighthouse, PageSpeed Insights, and CrUX field data. We identify the specific contributors — render-blocking JavaScript, unoptimised images, layout shift from late-loading elements, long input delay from synchronous event handlers — and implement fixes at the theme level. We target a mobile PageSpeed score above 70 to clear Google Ads landing page experience thresholds.

JavaScript Code Splitting and Deferred Loading

We refactor your theme's JavaScript loading strategy: identifying which scripts are required for the above-the-fold first paint and which can be deferred or loaded on-demand. For themes built on Shopify's standard JavaScript architecture, we implement `defer` and `async` attributes on non-critical scripts, split feature-specific JavaScript into separate files loaded only when the relevant feature is used, and remove JavaScript for features that are no longer active in the store.

Shopify Plus Checkout UI Extension Development

We build checkout UI extensions for Shopify Plus brands: order bump widgets at the cart stage, in-checkout product recommendations, post-purchase offer pages before order confirmation, and custom checkout fields for subscription delivery preferences or personalisation inputs. We build using Shopify's checkout UI extension framework (React, Shopify CLI) and test in sandbox before deployment.

Custom Shopify 2.0 Product Page Templates

We build separate JSON product templates for each product type in your catalogue: a subscription product template with recurring billing cadence display, savings callout, and plan selector; a bundle template with component list display, bundle discount logic, and custom add-to-cart behaviour; a standard one-time purchase template without the subscription or bundle features. Each template is assigned to the relevant products in the Shopify admin.

Mobile-First UX Fixes

We conduct a mobile-specific audit and implement fixes: tap target sizing across all interactive elements (buttons, links, swatches), above-the-fold layout optimisation to place the add-to-cart action in thumb-reach territory, swipe event handling for product image carousels, and bottom-fixed add-to-cart bars for long product pages. These are CSS and JavaScript changes — not additional apps.

Animation and Micro-Interaction Development

For US DTC brands competing on brand experience, we add targeted animations and micro-interactions to the theme: scroll-triggered entrance animations for product sections, hover states for product cards, cart drawer transition animations, and add-to-cart confirmation micro-interactions. These are built to be performant — implemented in CSS transitions where possible, JavaScript-triggered only where necessary, and tested to confirm they do not negatively affect Core Web Vitals scores.

Hydrogen/Oxygen Scoping and Development

For brands where standard Shopify theme performance cannot meet requirements — typically stores with highly dynamic product pages, complex personalisation, or traffic volumes where every millisecond of LCP matters for paid acquisition — we scope and build Hydrogen/Oxygen headless front-ends. This is the correct solution for a minority of US DTC brands. We assess whether it is warranted based on actual performance data, traffic volumes, and conversion sensitivity to load time before recommending it.

Request a Theme Development Brief →
What changes

What Changes

Before
After
Before A subscription product and a standard one-time purchase product have fundamentally different conversion logic. A subscription product page needs to make the recurring billing cadence visible and understandable before the add-to-cart decision, show the per-delivery savings clearly, and position the one-time purchase as the inferior option. A bundle product page needs to display bundle components, show per-item savings, and handle a different cart add logic. When both render on a single product template — a layout designed for a single, one-time-purchase item — the subscription and bundle features are retrofitted into the description field or added as app overlays that do not match the theme's visual language. Shopify 2.0 JSON templates allow separate page structures for each product type. Most brands have not built them.
After When your theme's LCP drops below 2.5 seconds and your mobile PageSpeed score moves above 70, Google's landing page experience assessment improves. Quality score on affected campaigns increases, cost per click drops, and you are no longer paying a performance penalty for a fixable theme problem.
Before Shopify Plus includes access to the checkout UI extension API, which allows custom widgets to appear within the Shopify checkout: order bump offers on the cart page, upsell recommendations in the checkout flow, custom post-purchase offer pages before the order confirmation screen, and custom fields for collecting order-specific information. These are native Shopify Plus features with no per-transaction app fee. Brands not using them are completing orders without a post-add-to-cart upsell moment. Building a checkout UI extension requires Shopify CLI, React, and familiarity with the Shopify checkout extension framework — this is developer work, not a settings change.
After When subscription products get a template that foregrounds the billing cadence, the per-delivery savings, and the plan choice — and bundle products get a template that shows components and bundle pricing — the conversion logic for each product type is visible and clear before the add-to-cart decision. These are not design improvements. They are structural changes that match page layout to purchase intent.
Before A Shopify theme built without code splitting loads its entire JavaScript bundle on the first page view, including JavaScript for features like image zoom, product variant selection, cart drawer animation, and section transitions — most of which are not needed for the above-the-fold first paint. This render-blocking behaviour delays LCP, lowers the Lighthouse performance score, and triggers Google's mobile page experience penalties. For brands running Google Ads, a low landing page experience score reduces quality score and increases cost per click. For organic search, Core Web Vitals are a ranking signal. The fix requires code-level changes to how the theme loads JavaScript — deferring non-critical scripts, splitting the bundle by feature, and loading feature-specific JavaScript only when the feature is needed.
After A Shopify Plus checkout UI extension that presents a relevant order bump or post-purchase offer generates revenue from customers who are already in the purchase flow. There is no additional acquisition cost for this revenue. The extension is a one-time development investment that runs on every order processed through checkout.
Before A responsive Shopify theme that was designed desktop-first and made responsive through CSS breakpoints is not the same as a mobile-first Shopify theme. On a responsive (but desktop-first) theme, the mobile experience is the desktop layout compressed and reflowed. Tap targets are often under 44px — below Google's recommended minimum. The above-the-fold content on mobile shows a large product image that pushes the add-to-cart button below the fold. Product carousels respond to click rather than swipe because the interaction was built for a mouse. Fixing a desktop-first responsive theme for mobile requires CSS work at the breakpoint level, JavaScript modifications for touch event handling, and layout decisions about what to prioritise above the fold on a 390px wide screen.
After When tap targets are sized correctly, the add-to-cart button is in thumb range above the fold, and product carousels respond to swipe, mobile visitors interact with your store as a native mobile experience. Bounce rate from mobile sessions that previously encountered friction in the product interaction reduces.
How it works

Process

  1. 01

    Theme and Performance Audit

    Week 1

    We run a full theme audit: Core Web Vitals field data from CrUX, Lighthouse scores on mobile and desktop, JavaScript loading inventory, product template structure, installed app script impact, and checkout extension usage (for Shopify Plus). We document findings against your specific conversion goals — Google Ads quality score, subscription conversion rate, post-purchase revenue — and produce a prioritised scope.

  2. 02

    Development Specification

    Week 1-2

    We define the technical approach for each item: which JavaScript defers, how product templates are structured, what the checkout extension logic does, and how mobile layout changes will affect the desktop view. For Hydrogen scoping, this step includes an architecture decision report that outlines the case for and against a headless build. You approve the specification.

  3. 03

    Development on Theme Duplicate or Staging

    Week 2-5

    Development is done on a theme duplicate (standard Shopify) or a staging environment (Hydrogen). We complete performance fixes, build product templates, develop checkout extensions (in Shopify's sandbox environment), and implement mobile fixes. We test each item against the original audit baseline.

  4. 04

    Staged Review and QA

    Week 5-6

    We publish for review: PageSpeed scores before and after, product template display across all product types, checkout extension flow in the Shopify Plus sandbox, and mobile experience across iOS Safari and Android Chrome. We incorporate feedback and complete a final performance check before going live.

  5. 05

    Launch and Handover

    We publish to production and monitor Core Web Vitals field data for the first two weeks post-launch to confirm improvements are reflected in real user data, not just lab scores. We provide documentation for new templates and sections and stay available for two weeks post-launch.

Request a Theme Development Brief →
Common questions

FAQ

When should a US Shopify brand build on Hydrogen instead of a standard Shopify theme?

Hydrogen is the right choice when a standard Shopify theme cannot achieve the performance or experience requirements the brand needs, and those requirements are validated by data showing conversion sensitivity to page load time or user experience complexity. Practically, this means: stores with mobile LCP consistently above 4 seconds that cannot be fixed with standard theme optimisation; stores with highly dynamic product pages that need React component-level interactivity; or brands where the competitive advantage is the front-end experience itself and the standard Shopify template model is architecturally limiting. Hydrogen is not warranted as a performance play alone for most US DTC brands — standard theme optimisation moves most stores from a failing mobile score to a passing one without the cost and complexity of a headless rebuild.

What is a Shopify checkout UI extension and what does it require?

A Shopify checkout UI extension is a custom React component that renders within the Shopify checkout — either in the cart, during the checkout steps, or on the post-purchase page — and is built using Shopify's checkout UI extension framework. It requires Shopify Plus (standard Shopify plans do not have access to checkout extensibility), the Shopify CLI development environment, React development skills, and familiarity with Shopify's extension API. Extensions are sandboxed — they cannot access or modify Shopify's core checkout logic — but they can display product recommendations, collect custom information, trigger post-purchase offers, and render branded content within the checkout experience. They are deployed through Shopify's extension deployment process and appear in the checkout for all orders without per-transaction fees beyond normal Shopify Plus costs.

How do I create separate product page templates for subscriptions and standard products on Shopify?

Shopify 2.0 supports multiple product page templates using JSON template files. To create a subscription product template, you duplicate the default `product.json` template file in your theme's `templates` folder, name it `product.subscription.json`, and edit the section and block structure to include subscription-specific components: a plan selector block, a billing cadence display block, a recurring savings callout, and the subscription app's integration block. Once the template exists, you assign it to subscription products in the Shopify admin under each product's template selector. The subscription product template and the standard product template coexist in the same theme — products render on whichever template they are assigned to. This requires Shopify 2.0 theme architecture; older themes use a single `product.liquid` file and require a different approach.

How do I improve a Shopify theme's Core Web Vitals score for Google Ads quality score?

Improving Core Web Vitals for Google Ads quality score requires focusing specifically on LCP (Largest Contentful Paint) on mobile, as this is the metric most affected by theme performance and the one most correlated with landing page experience assessments. The primary LCP contributors in Shopify themes are: the largest above-the-fold image loading without preload hint, render-blocking JavaScript delaying first paint, and late-loading app scripts pushing the LCP element's render time out. Fixes include: adding a `<link rel="preload">` for the hero image, deferring non-critical JavaScript with `async` or `defer` attributes, moving app scripts out of the `<head>` tag, and implementing responsive image srcsets to reduce file size on mobile. A mobile PageSpeed score above 70 is the practical threshold for clearing Google's landing page experience penalty.

What is the difference between a custom Shopify theme and a headless Shopify store?

A custom Shopify theme is a front-end built using Shopify's Liquid templating language, served by Shopify's own storefront infrastructure. It renders on Shopify's servers, benefits from Shopify's CDN, and uses Shopify's standard checkout flow. A headless Shopify store uses Shopify as a backend commerce layer — handling products, orders, inventory, and checkout — while the front-end is built in a separate framework (React/Hydrogen, Next.js, Nuxt, or another) that calls Shopify's Storefront API. The front-end is served from a separate hosting infrastructure (Shopify's Oxygen for Hydrogen, or a third-party host for other frameworks). Headless stores offer more front-end flexibility and can achieve better performance for complex experiences, but they require significantly more development investment, eliminate many of Shopify's built-in theme features, and need dedicated front-end engineering for ongoing maintenance. Most US DTC brands benefit more from an optimised standard theme than from a headless rebuild.

Start here

A Shopify theme that fails Core Web Vitals on mobile is a tax on every Google Ads campaign you run. The fix is in the theme code, not the campaign settings.

Ignited Nepal works on US Shopify themes at the code level — deferring JavaScript, building product templates for each product type, developing Shopify Plus checkout extensions, and scoping Hydrogen builds when the data supports it. We start with what your store actually needs, not the most technically impressive option.

Request a Theme Development Brief →