Customizing Shopify Themes: A Step-by-Step Guide

When you tailor a Shopify theme to your brand, you transform a generic storefront into a unique shopping experience. By working with Dawn or any Online Store 2.0 theme, you can craft custom sections in Liquid and JSON, streamline your workflow with the Shopify CLI and GitHub, and boost performance by replacing bulky apps with native code. Here’s how to get started.

Understanding Shopify Online Store 2.0 Architecture

Shopify’s Online Store 2.0 introduces JSON templates, flexible sections, and app blocks. Rather than editing a monolithic theme file, you now create modular sections that merchants can drag, drop, and configure in the editor.

Sections and Blocks

Sections: Reusable components (e.g., hero banners, product grids) defined in sections/*.liquid.
Blocks: Sub-elements inside a section (e.g., individual slides in a slideshow).

In my own projects, I start with Dawn’s default sections and tweak the schema so merchants can swap images, text, or layout without touching code—achieving that “chef’s kiss” flexibility.

JSON Templates and Liquid

Each page template (e.g., product.) references sections and their order. Liquid controls dynamic data:

liquid {% for product in collection.products %} {{ product.title }} {% endfor %}

Pair this with JSON schema to expose settings like color pickers, text fields, and rich-text editors in the theme customizer.

Setting Up Your Development Workflow

A consistent workflow keeps your code clean and your store safe during updates.

Shopify CLI and Theme Kit

Install Shopify CLI (npm install -g @shopify/cli) to scaffold themes, preview changes locally, and push updates.

bash shopify theme serve shopify theme push

Version Control with GitHub

Connect your local theme directory to a Git repository. Use branches for new features or experiments—this prevents accidental code loss when you’re refactoring sections or updating schema. I tag releases (e.g., v1.0.0) before major changes so rollbacks are painless.

Building Custom Sections for Flexibility

Creating new sections lets you deliver bespoke functionality without relying on apps.

Creating a New Section

1. In sections/, create custom-cta.liquid and custom-cta. (schema).
2. Define HTML/Liquid markup in the .liquid file.
3. Add settings (e.g., text, link, background_image) in JSON schema.

Schema Configuration and Editor Controls

Use schema settings:

{ "name": "Custom CTA", "settings": [ {"id": "heading", "type": "text", "label": "Heading"}, {"id": "button_url", "type": "url", "label": "Button Link"} ], "blocks": [] }

This gives merchants in-editor controls, delivering that “magic” feeling when they adjust layouts.

Dynamic Content and Styling

Leverage Liquid loops and conditional tags to render content only when set. Apply inline style="background-image:url({{ settings.background_image }})" for dynamic visuals, keeping CSS minimal to preserve speed.

Optimizing Performance and Clean Code

A fast store ranks better and converts more. My “less is more” approach focuses on removing unnecessary apps and optimizing assets.

Minimizing Third-Party Apps

Each external script adds page weight. Whenever possible, replace app widgets with native sections. For example, I rebuilt a countdown timer using a small Liquid/JS snippet instead of a 50 KB app script.

Improving Lighthouse Scores

Lazy-load images: Use loading="lazy".
Minify CSS/JS: Run build tools (e.g., Sass, Terser) in your CI pipeline.
Preload key assets: Add .

Best Practices for Asset Loading

Bundle and minify assets during shopify theme push. Serve images via Shopify’s CDN and use {{ product.featured_image | img_url: "master" }} to request appropriately sized images.

Testing and Deployment

A robust testing and deployment strategy reduces downtime and ensures consistent branding.

Local Testing

Use shopify theme serve to preview changes. Test responsive layouts, interactive sections, and schema controls in the Shopify editor.

Theme Versioning and Rollbacks

Tag each stable version in Git and push to a separate “live” branch. If an update breaks the store, you can checkout the last known good tag and re-deploy immediately.

Publishing to Live Store

Once QA passes, run:

bash shopify theme push --theme-id=1234567890

This updates the live theme. For zero-downtime, push to an unpublished theme, preview, then swap the live theme in the Shopify admin.