Shopify Theme Development from Scratch: A Complete Guide

Building a Shopify theme from scratch gives you complete control over how your store looks and works. Every layout decision, every component, every interaction is yours to define. No compromise around a bought theme’s structure. No workarounds because a template does not support what you need.

It also takes time, requires a specific skill set, and is not the right approach for every store. Most merchants get better results from a well-selected and properly configured existing theme than from a from-scratch build done by the wrong developer.

This guide covers how Shopify theme development from scratch actually works the architecture, the file structure, the core languages, the development workflow, and the decisions that determine whether a custom build is the right call for your specific store.

Building a Shopify theme from scratch requires a combination of front-end development skills and Shopify-specific knowledge. If you are a developer approaching this for the first time, the learning curve is manageable. If you are a store owner hoping to do this yourself without development experience, this is not a realistic starting point, and the rest of this guide will help you understand why.

Skills required:

• Liquid — Shopify’s own templating language. Every page in a Shopify theme renders through Liquid. You need to understand variables, objects, filters, loops, and conditionals before touching the theme files.
• HTML and CSS — the structural and styling backbone of every page.
• JavaScript — for interactive components: mobile navigation, cart drawers, product image galleries, quick-add buttons.
• JSON — for Online Store 2.0 template configuration, section schema definitions, and settings data.

Tools required:

• Shopify CLI – Shopify’s command-line interface. This is what you use to initialise a new theme, pull and push theme files, and run a local development preview. Install it via npm: npm install -g @shopify/cli @shopify/theme.
• A Shopify Partner development store – a free test store tied to your Shopify Partner account. You develop and test here before deploying to a live store.
• VS Code – the standard code editor for Shopify theme work, with the Shopify Liquid extension for syntax highlighting and error detection.
• GitHub – version control. Always work on a branch. Never push directly to the live theme without testing on staging first.
• Shopify Theme Check – a built-in linter that catches Liquid errors and performance issues before they reach production.

Understanding the folder structure before writing any code saves a significant amount of time. Every Shopify theme follows the same directory layout.

/layout/

/templates/

/sections/

/snippets/

/assets/

/config/

/locales/

Here is what each folder does.

/layout/ contains theme.liquid the master template that wraps every page on your store. Your global header, footer, and any scripts that need to load on every page go here. Think of it as the shell that every other template sits inside.

/templates/ holds the page-specific templates product.json, collection.json, index.json, cart.json, page.json. In Online Store 2.0 (the current Shopify architecture), these are JSON files that define which sections appear on each page type and in what order. They replaced the old .liquid template approach.

/sections/ is where most of your actual development work happens. Sections are reusable, individually configurable content blocks: your header, your footer, your hero banner, your product information block, your featured collection. Each section file contains the HTML and Liquid that renders the content, plus a {% schema %} block at the bottom that makes the section’s settings configurable from the Shopify Theme Editor.

/snippets/ are small, reusable Liquid fragments. Things like a price display block, a star rating display, an icon set, or a social share widget. They do not have schemas and are not independently configurable they are included inside sections using {% render ‘snippet-name’ %}.

/assets/ holds your static files CSS, JavaScript, fonts, and images that are part of the theme itself. Shopify serves these files through their CDN automatically.

/config/ contains settings_schema.json and settings_data.json. The schema defines what appears in the Theme Editor’s global settings panel, things like brand colours, typography choices, and layout options that apply across the whole store.

/locales/ contains translation files. If you plan to support multiple languages, each language gets its own JSON file here.

This is one of the most important decisions in Shopify theme development. It determines your timeline, your approach, and how the theme performs from day one.

Building from true zero means creating every folder and file manually. You write theme.liquid yourself, structure every template, build every section from scratch. This gives you a genuinely clean codebase with no unused code, but it is significantly slower. A from-zero build without Dawn as a starting point typically adds two to four weeks to the development timeline.

Starting from Dawn is what most professional Shopify developers do, including experienced teams at established agencies. Dawn is Shopify’s official free, open-source reference theme. It is built to Online Store 2.0 standards, optimised for performance, accessibility-compliant, and maintained by Shopify. Starting from Dawn means your theme inherits a clean, production-tested foundation, and you build your custom design on top of it.

Cloning Dawn as your starting point does not mean your theme looks like Dawn. Dawn’s styling is intentionally minimal so developers can replace it. The structure is what you are borrowing, not the design.

To start from Dawn using Shopify CLI:

shopify theme init my-theme-name

This clones Dawn into a new folder. From here, you rename, restructure, and rebuild as needed.

Once your environment is set up and your theme is initialised, the development workflow follows a consistent cycle.

1. Run local development preview

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

This syncs your local theme files with your development store and opens a live preview in your browser. Changes you make to local files appear in the preview without a page refresh for most file types.

2. Build sections first

Start with the global sections header and footer because they appear on every page. Once those are working, build the homepage sections, then product and collection templates, then cart and checkout.

For each section, the structure is:

<div class=”my-section”>

  <h2>{{ section.settings.heading }}</h2>

  <p>{{ section.settings.subtext }}</p>

</div>

{% schema %}

{

  “name”: “My Section”,

  “settings”: [

    {

      “type”: “text”,

      “id”: “heading”,

      “label”: “Heading”,

      “default”: “Welcome”

    },

    {

      “type”: “textarea”,

      “id”: “subtext”,

      “label”: “Subtext”

    }

  ]

}

{% endschema %}

The {% schema %} block is what makes the section editable in the Shopify Theme Editor without touching code. Every setting defined here appears as a control in the editor.

3. Use Liquid for dynamic data

Product information, collection data, cart contents, customer details — all of this is pulled through Liquid. Common Liquid objects you will use constantly:

• {{ product.title }} — the product name
• {{ product.price | money }} — the price, formatted as currency
• {% for product in collection.products %} — loop through products in a collection
• {{ customer.email }} — logged-in customer email
• {{ cart.item_count }} — number of items in the cart

Liquid filters (the | symbol) transform data. {{ product.price | money }} formats a raw number as currency. {{ product.title | upcase }} returns the title in capitals. {{ ‘my-image.jpg’ | asset_url }} returns the full CDN URL for a theme asset.

4. JSON templates for page flexibility

In Online Store 2.0, page templates are JSON files that reference sections rather than containing HTML directly. A product template might look like this:

{

  “sections”: {

    “main”: {

      “type”: “main-product”,

      “settings”: {}

    },

    “recommendations”: {

      “type”: “product-recommendations”,

      “settings”: {}

    }

  },

  “order”: [“main”, “recommendations”]

}

This structure is what allows merchants to add, remove, and reorder sections on any page from the Theme Editor a core Online Store 2.0 feature that was not available in the old Liquid template approach.

5. Push and test

Shopify theme push

This uploads your local theme to your development store. Test every page type, every interactive component, and every responsive breakpoint on a real device, not just a browser window resized to mobile dimensions.

Custom themes built from scratch often start well on performance and degrade as features are added. Building with performance in mind from the beginning prevents this.

Use image_tag for all images. Shopify’s image_tag Liquid filter automatically handles lazy loading, responsive image sizes via srcset, and WebP conversion. Never hardcode <img> tags in a Shopify theme they miss all of this.

{{ product.featured_image | image_tag: loading: ‘lazy’, widths: ‘400, 800, 1200’ }}

Defer JavaScript that is not needed for first render. Scripts that handle interactive components cart drawers, quick-add, wishlist should load after the page content is visible. Use defer or load them at the bottom of theme.liquid.

Load CSS efficiently. Avoid loading large, monolithic CSS files. Shopify’s CDN handles the delivery, but the file size still affects page performance. Use component-scoped CSS within each section where possible.

Test Core Web Vitals during development, not after. Run Google PageSpeed Insights on your development store URL before deployment. Fixing a poor Largest Contentful Paint (LCP) score during development is significantly faster than fixing it on a live store after launch. Our Shopify Performance Optimisation guide covers the specific issues to watch for on custom-built themes.

Custom themes give you direct control over the SEO signals built into every page. These should be in the theme from day one, not added retroactively.

Title tags and meta descriptions. These are rendered through theme.liquid using Shopify’s standard Liquid output:

<title>

  {{ page_title }}

  {% if current_tags %} &ndash; tagged “{{ current_tags | join: ‘, ‘ }}”{% endif %}

  {% if current_page != 1 %} &ndash; Page {{ current_page }}{% endif %}

  {% unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless %}

</title>

Canonical tags. Shopify generates canonical URLs automatically, but confirm they are included in your theme’s <head> section: {{ canonical_url | tag: ‘canonical’ }}.

Structured data (schema markup). Add product schema, breadcrumb schema, and organisation schema directly into the relevant templates. Product schema belongs in the product template section. Breadcrumb schema belongs in collection and product templates. This is what produces rich results price, availability, and review stars in Google search results.

Heading hierarchy. One <h1> per page. Product name as <h1> on product pages. Collection name as <h1> on collection pages. Section headings as <h2>. Liquid makes it easy to pull these from Shopify’s data objects and structure them correctly.

Image alt text. Every product image, banner, and content image should have a populated alt attribute. For product images, use {{ image.alt | escape }}. Set meaningful alt text in the Shopify admin for each image.

For a store owner or agency trying to understand the investment required, these are the factors that drive the timeline and cost of a from-scratch Shopify theme.

A simple custom Shopify theme homepage, product page, collection page, cart, and standard supporting pages takes a senior Shopify developer between four and eight weeks to build properly, test on multiple devices, and optimise for performance. That is development time only; design (wireframing, Figma mockups, brand direction) is separate and typically adds two to four weeks before development begins.

Complex requirements extend the timeline. A custom cart drawer with AJAX add-to-cart, a quick-buy component, product filtering without page refresh, a custom mega-menu, loyalty programme integrations, or complex B2B pricing rules each add development scope.

A Shopify Plus theme with custom checkout extensions built via Shopify Functions, a custom B2B portal, or headless elements is a different scale of project and should be scoped separately.

Our Hire Shopify Developers page covers the options for both dedicated developer resource and full project delivery. If your brief involves Shopify Plus specifically, our Hire Shopify Plus Developers page covers the additional skills that Plus requires.

Building from scratch is right for specific situations. It is not right for every Shopify store.

Build from scratch when:

• Your brand identity requires visual and structural decisions that no existing theme can accommodate without extensive workarounds
• Performance is a primary commercial requirement, and you need full control over every byte loaded on each page
• Your store has complex custom functionality product configurators, pricing logic, B2B buyer portals that needs to be built into the theme architecture rather than layered on top
• You are building for Shopify Plus and need checkout extensibility woven into the theme from the start

Customise an existing theme when:

• Your store’s requirements are broadly standard products, collections, cart, checkout with your brand applied on top
• You are launching quickly and time to market is a commercial priority
• Your budget is more suited to a theme customisation (typically £2,000–£8,000) than a custom build (typically £12,000–£40,000+)
• Your team is comfortable managing theme updates from the Shopify Theme Store without developer assistance

Shopify’s own Shopify Theme Detector tool lets you identify what theme any live Shopify store is running, useful for benchmarking what competitors are using before deciding on your own approach.

KiwiCommerce’s Shopify Development Services team builds fully bespoke Shopify themes: no template customisations, no bought themes modified and presented as bespoke. Every build starts from a clean Liquid foundation designed around the specific store’s products, customer journey, and conversion requirements.

The process starts with UX design, with our UI/UX Designing Services team wireframing the key page types before a line of Liquid is written. Design is signed off in Figma. Development implements the specification. The handoff between design and development is internal, which eliminates the scope gaps that happen when two separate agencies do each part.

After launch, stores are supported on Shopify Maintenance Services retainers performance monitoring, Shopify update compatibility checks, and ongoing development as the store evolves. For agencies needing custom Shopify theme development delivered under their own brand, our White Label Shopify Development service covers this with an NDA as standard.

• Shopify themes require Liquid, HTML, CSS, JavaScript, and JSON — all five, not just front-end basics
• Online Store 2.0 uses JSON templates and section schemas, which replaced the old Liquid template approach; every new build should use OS 2.0 architecture
• Starting from Dawn is not the same as building a Dawn store — the structure is borrowed, not the design
• Build performance into the theme from the start; retrofitting it after launch is slower and more expensive
• Structured data, canonical tags, and heading hierarchy belong in the theme files, not added by an app later
• A straightforward custom Shopify theme build takes four to eight weeks; design is separate and precedes development
• Custom builds are the right call for complex requirements, unique brand needs, and Shopify Plus projects; theme customisation is the right call for everything else

A custom Shopify theme from scratch is a significant technical project. When it is done properly with design preceding development, performance built in from the start, and structured data implemented in the theme files it delivers a store that is genuinely differentiated, fast, and easy to extend.

If the build is beyond your in-house capability, or if you want a certified Shopify team to handle it properly the first time, the KiwiCommerce team is here.