Shopify Theme Development From Scratch: A Step-by-Step Guide for 2026

If you search for how to build a Shopify theme, most tutorials stop at “install Dawn and edit some Liquid.” That is fine for a quick tweak. It does not teach you how to build a theme that clients actually pay for.

This guide covers the full process — from an empty folder to a production-ready Shopify 2.0 theme. I have built custom Shopify themes for stores doing $10K to $500K per month. Here is how I approach each build.

What You Need Before You Start

• Shopify Partner account — free to create at partners.shopify.com
• Shopify CLI — install with npm install -g @shopify/cli
• A development store — create one from your Partner dashboard (no charges)
• Code editor — VS Code with the Shopify Liquid extension
• Basic knowledge of HTML, CSS, and JavaScript

You do not need to know Liquid before starting. You will learn it as you build.

Step 1: Scaffold Your Theme

Run this in your terminal:

shopify theme init my-theme

This creates a folder with the standard Shopify theme structure. Every theme follows the same layout:

my-theme/
├── assets/          → CSS, JS, images
├── config/          → settings_schema.json, settings_data.json
├── layout/          → theme.liquid (main wrapper)
├── locales/         → translation files
├── sections/        → reusable content blocks
├── snippets/        → small reusable Liquid partials
└── templates/       → page templates (JSON in 2.0)

Step 2: Understand Online Store 2.0 Templates

Shopify 2.0 changed how templates work. Instead of Liquid template files, you use JSON template files that reference sections.

A templates/product.json file looks like this:

{
  "sections": {
    "main": {
      "type": "main-product",
      "settings": {}
    },
    "recommendations": {
      "type": "product-recommendations",
      "settings": {}
    }
  },
  "order": ["main", "recommendations"]
}

Each section listed here is a .liquid file in your sections/ folder. The merchant can reorder, add, or remove sections from the theme editor — without touching code.

Why this matters: Clients want to edit their store without calling you. 2.0 templates make that possible. Every custom theme I build uses JSON templates for this reason.

Step 3: Build Your Layout File

layout/theme.liquid wraps every page. Here is a minimal version:

<!DOCTYPE html>
<html lang="{{ request.locale.iso_code }}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ page_title }}{% unless page_title contains shop.name %} — {{ shop.name }}{% endunless %}</title>
  {{ content_for_header }}
  {{ 'base.css' | asset_url | stylesheet_tag }}
</head>
<body>
  {% sections 'header-group' %}
  
  <main id="main-content" role="main">
    {{ content_for_layout }}
  </main>
  
  {% sections 'footer-group' %}
</body>
</html>

content_for_header is required — Shopify injects analytics, app scripts, and checkout code here. Removing it breaks your store.

Step 4: Create Core Sections

Every Shopify store needs these sections at minimum:

Header Section

{% schema %}
{
  "name": "Header",
  "settings": [
    {
      "type": "image_picker",
      "id": "logo",
      "label": "Logo"
    },
    {
      "type": "link_list",
      "id": "menu",
      "label": "Navigation menu",
      "default": "main-menu"
    }
  ]
}
{% endschema %}

Product Card Snippet

Create snippets/product-card.liquid and reuse it across collection pages, search results, and recommendations. One card design, used everywhere.

Collection Template

The collection page is where most stores make or lose sales. Build it with:

• Grid/list toggle
• Sort and filter (use Shopify’s native Storefront Filtering API)
• Lazy-loaded product images
• Quick-add button

Step 5: Add Theme Settings

config/settings_schema.json defines what appears in the theme editor under “Theme settings.” Structure it into logical groups:

• Colors — primary, secondary, background, text
• Typography — heading font, body font, sizes
• Social media — profile URLs
• Cart — drawer vs page, free shipping threshold
• Announcement bar — text, link, colors

Keep settings minimal. Every setting you add is a setting you maintain. I have seen themes with 200+ settings that are impossible to customize because nothing is labeled clearly.

Step 6: Performance From Day One

Do not wait until the theme is “done” to think about speed. Build fast from the start:

• Lazy load images below the fold: loading="lazy"
• Preload critical assets:
• Inline critical CSS for above-the-fold content
• Defer JavaScript: load scripts with defer or at the bottom of the body
• Use native image sizes: Shopify’s image_url filter with width parameters instead of loading full-size images

{{ product.featured_image | image_url: width: 600 | image_tag: loading: 'lazy', widths: '300,450,600' }}

A custom theme should score 90+ on Lighthouse. Every theme I deliver hits this target — it is part of the build, not an afterthought.

Step 7: Test and Deploy

Use Shopify CLI to preview your theme locally:

shopify theme dev --store your-store.myshopify.com

Before deploying to production:

• Test on mobile (at least iPhone Safari and Android Chrome)
• Check the checkout flow end-to-end
• Verify all theme editor settings work
• Run Lighthouse and fix anything below 90
• Test with screen readers for accessibility

Deploy with:

shopify theme push --store your-store.myshopify.com

When to Build Custom vs Use a Pre-Built Theme

Build custom when:

• The store needs a unique look that no existing theme offers
• You need custom functionality (configurators, size guides, custom filters)
• Page speed is a priority and pre-built themes are bloated
• The client has a Figma design they want built exactly

Use a pre-built theme when:

• Budget is under $2,000
• The store launches in under 2 weeks
• Standard e-commerce layout is fine
• The merchant wants to switch themes later without developer help

I have written a detailed pricing breakdown if you want to understand what custom development costs.

Common Mistakes I See

1. Loading too many apps — every app adds JavaScript. Five apps can double your load time.
2. Not using sections everywhere — if a content block is hardcoded, the merchant cannot edit it.
3. Ignoring mobile — 70%+ of Shopify traffic is mobile. Design mobile-first.
4. Skipping metafields — use metafields for product specs, size charts, and custom data instead of cramming everything into the description.
5. No version control — use Git from day one. Shopify CLI supports shopify theme pull to sync changes made in the editor.

What I Charge for Custom Shopify Themes

My Shopify theme development projects start at $3,000 for a Figma-to-Shopify build. Design + development starts at $5,000.

Every build includes:

• Online Store 2.0 architecture
• Core Web Vitals optimization
• Mobile-responsive design
• Theme editor setup for the merchant
• 30 days of post-launch support

Get a free quote →

—