How to Create a Shopify Theme from Scratch

March 18, 2026

Building a Shopify theme from scratch sounds intimidating until you understand the structure. It's just HTML, CSS, JavaScript, and Liquid (Shopify's templating language). If you can build a website, you can build a Shopify theme. Here's the practical guide, skipping the theory and going straight to what you need to know.

Theme Architecture

A Shopify theme is a collection of files in a specific directory structure:

theme/
  layout/         # Base HTML wrapper (theme.liquid is your index.html)
  templates/      # Page templates (product.liquid, collection.liquid, etc.)
  sections/       # Reusable content blocks (hero, product grid, testimonials)
  snippets/       # Small reusable Liquid includes
  assets/         # CSS, JS, images, fonts
  config/         # Theme settings schema
  locales/        # Translation files

The mental model: layout/theme.liquid wraps everything. Inside it, templates/ files define what each page type shows. Templates include sections/, which are the building blocks merchants customize in the theme editor.

Liquid: The Templating Language

Liquid is simple. It has three constructs:

{{ variable }}           Output a value
{% if condition %}       Logic (if/for/unless/case)
{{ 'string' | filter }} Filters (transformations)

Real example from a product page:

<h1>{{ product.title }}</h1>
<p>{{ product.price | money_with_currency }}</p>
{% if product.available %}
  <button>Add to Cart</button>
{% else %}
  <p>Sold Out</p>
{% endif %}

That's genuinely 80% of what you need. Loops, conditionals, and variable output. The Liquid reference documentation covers everything else.

Sections: Where the Customization Lives

Sections are the key concept in modern Shopify themes. Each section is a self-contained block with its own HTML, CSS, and a schema that defines what the merchant can customize in the theme editor.

<section class="rx-hero">
  <h1>{{ section.settings.heading }}</h1>
  <p>{{ section.settings.subheading }}</p>
  <a href="{{ section.settings.cta_url }}">
    {{ section.settings.cta_text }}
  </a>
</section>

{% schema %}
{
  "name": "Hero",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Welcome" },
    { "type": "text", "id": "subheading", "label": "Subheading" },
    { "type": "url", "id": "cta_url", "label": "Button URL" },
    { "type": "text", "id": "cta_text", "label": "Button Text", "default": "Shop Now" }
  ]
}
{% endschema %}

The schema block at the bottom defines what appears in the Shopify theme editor sidebar. Merchants can change text, colors, images, and more without touching code.

CSS Strategy: Prefix Everything

The biggest maintenance headache with Shopify themes is CSS conflicts. The base theme, apps, and your custom sections all share the same page. Without namespacing, your .hero class might conflict with an app's .hero class.

At RAXXO Studios, every CSS class starts with rx-. This simple prefix eliminates 99% of conflicts:

.rx-hero { padding: 64px 0; }
.rx-hero-heading { font-size: 48px; font-weight: 700; }
.rx-hero-cta { display: inline-block; padding: 16px 32px; }

Development Workflow

Shopify CLI makes local development possible:

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

This creates a live preview that hot-reloads when you save files. Edit locally in your code editor, see changes immediately in the browser. Much faster than editing in the Shopify code editor.

For custom sections that don't need the full theme context (like the ones we build for RAXXO shop), you can also develop the HTML/CSS locally and paste the finished Liquid into the theme editor.

Responsive Design

Shopify themes must work on mobile. Over 70% of e-commerce traffic is mobile. Your theme needs to handle everything from 320px phone screens to 2560px ultrawide monitors.

Use CSS Grid and Flexbox for layouts. Set a max-width on your content container (1200px works well). Use relative units (rem, em, vw) for spacing that scales.

Performance Optimization

Shopify themes run on Shopify's CDN, which is fast. But heavy themes with too many images, unoptimized JavaScript, and redundant CSS will still be slow.

Use Shopify's image filters to serve responsive images: {{ image | image_url: width: 800 }}
Lazy-load images below the fold
Minimize custom JavaScript. Shopify handles cart functionality, product forms, and navigation natively
Inline critical CSS in your section files instead of loading a massive global stylesheet

Testing

Before publishing a theme, test on actual devices. Shopify's preview works well, but nothing replaces testing the checkout flow on a real phone. Add a test product, go through the full purchase flow (use Shopify's Bogus Gateway for test payments), and verify everything works.

The RAXXO shop uses 42+ custom Liquid sections on the Fabric theme. See the result at raxxo.shop.

Dieser Artikel enthält Affiliate-Links. Wenn du dich darüber anmeldest, erhalte ich eine kleine Provision - für dich entstehen keine Mehrkosten. Ich empfehle nur Tools, die ich selbst nutze. (Werbung)