Shopify Theme Development: Building a Custom Theme From Scratch

When a Custom Theme Makes Sense

Most Shopify stores are better served by a premium theme (Prestige, Impulse, Debut successor) customised to brand requirements than a fully custom build. Custom theme development costs £10,000–£50,000 and takes 6–12 weeks. It makes sense when: your brand requires functionality not achievable with theme customisation, you have unique UX patterns that no existing theme supports, you are migrating from a platform with a fundamentally different layout structure, or you need deep performance optimisation below what stock themes allow.

Shopify Theme Architecture

Shopify themes use Liquid, a templating language created by Shopify. A theme consists of: Templates (JSON files that define page structure), Sections (reusable content blocks with schema for Theme Editor settings), Snippets (small reusable Liquid code fragments), Layout files (site-wide headers and footers), Assets (CSS, JavaScript, fonts, images), Locales (translation strings), and Config (theme settings schema and defaults).

Since OS 2.0 (released 2021), all sections are available on all pages — not just the homepage. JSON templates define which sections appear on each page type, and the Theme Editor lets merchants rearrange sections visually. Building to OS 2.0 standards is mandatory for any new theme.

Setting Up the Development Environment

Install the Shopify CLI: npm install -g @shopify/cli @shopify/theme. Authenticate with your store: shopify auth login. Pull an existing theme or scaffold a new one from the Dawn reference theme: shopify theme init my-theme. Run the development server: shopify theme dev --store=yourstore.myshopify.com. This creates a hot-reload development environment that streams file changes to a development theme on your store.

Section Architecture

Every section has two parts: the Liquid render code and the schema. The schema defines the settings merchants can edit in the Theme Editor — text inputs, image pickers, colour selectors, dropdowns, and block configurations. A well-designed section is self-contained, configurable, and flexible enough to handle empty states and edge cases.

Example schema structure for a hero section: {% schema %} settings array (heading text, subheading, button label, background image, overlay opacity), blocks array (optional additional content), presets (default configuration shown in Theme Editor add section modal). Every new section needs a preset to appear in the “Add section” list in the Theme Editor.

Performance Best Practices

Custom themes should: load all CSS in the head (no render-blocking stylesheets), defer all JavaScript except critical page-render scripts, use loading="lazy" on below-the-fold images, use Shopify’s image_url filter with width parameters rather than serving full-size images, and avoid jQuery (write vanilla JavaScript, which is smaller and faster).

Target PageSpeed mobile score above 70. Build performance testing into your development workflow — run Lighthouse on every major template before deployment. Performance regressions are far easier to fix during development than after launch.

GitHub Integration and Version Control

Connect your theme to GitHub via Shopify Admin → Online Store → Themes → GitHub integration. Every push to the connected branch updates the theme automatically. Maintain a main branch for production, a dev branch for active development, and feature branches for individual changes. This git-based workflow enables code review, rollback, and collaborative development without manual theme upload/download.