blog details

• Shopify
• October 30, 2025

Building a Custom Shopify Theme from Scratch: Liquid Best Practices

Building a custom Shopify theme gives you complete design and performance control. This guide walks through Liquid templating, sections, blocks, and Shopify 2.0 architecture.

Why Build a Custom Shopify Theme Instead of Using a Premium One?

Premium Shopify themes from the Theme Store are designed to work for every store in every industry — which means they're optimized for none of them. They ship with 300KB+ of unused CSS, dozens of features you'll never use, and JavaScript that loads on every page regardless of need. A custom Shopify theme built specifically for your store can be 3–5x lighter, 2–3x faster, and 100% aligned with your brand. Here's how to build one the right way.

Understanding Shopify 2.0 Theme Architecture

Shopify 2.0 (the current architecture since 2021) introduced Online Store Editor with sections everywhere — meaning merchants can drag and drop sections on any page, not just the homepage. This changes how you structure custom themes. Key directories: /layout (layout.liquid — your master template), /templates (collection.liquid, product.liquid, etc.), /sections (reusable page sections), /snippets (small reusable Liquid partials), /assets (CSS, JS, images), /config (settings_schema.json for theme customizer settings), /locales (translation strings).

Liquid Templating: Core Concepts

Liquid is Shopify's templating language — a mix of tags (logic), objects (data), and filters (transformations). Key best practices: use output tags {{ }} for displaying data and tag delimiters {% %} for logic. Always use the strip_html filter when outputting product descriptions that might contain HTML. Use | img_url filter with explicit dimensions for image optimization. Minimize logic in templates — keep business logic in sections/snippets, not layouts.

{% comment %} Optimized product image {% endcomment %}

{{ product.featured_image 

   | img_url: '800x800', crop: 'center' 

   | img_tag: product.title, 'loading="lazy"' }}

Building Sections with Schema for Theme Customizer

Every section should have a {% schema %} block that defines its customizer settings. This lets merchants edit content without touching code. Best practice: define sensible defaults for every setting, group related settings with sections, use select types for limited options (not text), and limit blocks to a reasonable maximum (usually 6–10). A well-architected schema makes your theme genuinely merchant-friendly.

Performance: Load Only What Each Page Needs

The biggest performance gain in custom theme development comes from conditional loading. Only load the product page's JavaScript on product pages, the cart drawer script when the cart is active, and slideshow CSS only on pages that have a slideshow section. Use Shopify's content_for_header to manage scripts, defer non-critical JavaScript with async/defer attributes, and inline critical CSS for above-the-fold content. This alone cuts your theme's JavaScript payload by 50–70%.

• Preload your hero image with <link rel="preload"> for better LCP scores
• Use native lazy loading on all below-fold images
• Split CSS — only load section-specific styles when that section is present
• Never use !important in your Liquid theme CSS — it signals poor architecture

Custom Shopify theme development is a core part of my Shopify development service. Every store I build gets a custom theme optimized for the client's specific products, brand, and target market. Contact me to discuss a custom theme for your store.