Can you explain the structure of a typical Shopify theme?

/in /by

bsolutely! A typical Shopify theme is made up of a specific file structure that organizes all the code and assets needed to define how a Shopify store looks and behaves. Here’s a breakdown of the main parts of a Shopify theme:

Root Theme Structure

plaintext
.
├── assets/
├── config/
├── layout/
├── locales/
├── sections/
├── snippets/
├── templates/
├── customers/
├── checkout/ (Shopify Plus only)
├── theme.liquid
└── config/settings_schema.json

Key Folders & Files

1. assets/

  • Contains images, JavaScript, CSS (or SCSS), and other static files.

  • These are accessible via URLs and often referenced in templates and sections.

  • Example files: theme.css, theme.js, logo.png

2. config/

  • Holds theme settings and customizations.

  • Main files:

    • settings_schema.json: Defines the settings available in the theme editor (e.g., colors, fonts).

    • settings_data.json: Stores actual settings values saved by the merchant (auto-generated).

3. layout/

  • Contains layout templates that wrap around your content.

  • Most important file:

    • theme.liquid: The main layout file loaded on every page.

4. locales/

  • Contains translations for multilingual stores.

  • Files are in JSON format.

  • Example: en.default.json, fr.json

5. sections/

  • Reusable and customizable page components (especially in Online Store 2.0).

  • Merchants can add/move sections via the theme editor.

  • Example: hero.liquid, featured-products.liquid

6. snippets/

  • Small, reusable chunks of Liquid code.

  • Often used inside sections and templates.

  • Example: product-card.liquid, price.liquid

7. templates/

  • Define the layout for different types of pages (product, collection, etc.).

  • Example files:

    • index.liquid → homepage

    • product.liquid → product pages

    • collection.liquid, cart.liquid

8. customers/

  • Templates specific to customer account pages.

  • Example: login.liquid, register.liquid, account.liquid

9. checkout/ (Shopify Plus only)

  • Customizable files for the checkout experience (limited access).

Important File: theme.liquid

This is the base layout. Think of it like the HTML skeleton that includes the <head>, site-wide headers/footers, and the {% content_for_layout %} tag that loads the specific page’s content.

Shopify’s Templating Language: Liquid

All .liquid files use Liquid, Shopify’s templating language. It allows you to embed dynamic content using tags like:

liquid
{{ product.title }}
{% if product.available %}In Stock{% endif %}

If you’re working on a Shopify theme, tools like Shopify CLI and the Dawn theme (Shopify’s reference theme) are very helpful.