Shopify Understanding Theme Files

Shopify is an extremely popular e-commerce platform, but its unique templating system can be a challenge for developers. This revised guide offers a comprehensive, modern look at the core files and directory structure of a Shopify theme, with a special focus on the crucial changes introduced by Online Store 2.0. We will delve into Liquid, JSON templates, and the vital role of sections and blocks in building flexible, customizable storefronts.

The Anatomy of a Modern Shopify Theme 🧱

At its heart, a Shopify theme is built on three core file types that work together to create a dynamic online store:

1. Markup & Feature Files (Liquid)

These are core template files that control page structure and functionality using Shopify’s templating language, Liquid. They define how product pages, carts, collections, and layouts work—similar to Jinja or Blade.

2. Supporting Assets

Files that bring your theme to life visually and functionally:

• CSS, images, fonts – control styling and appearance
• JavaScript files – add interactivity (e.g., sliders, filters)
• Locale JSON files – manage translatable text for multilingual support

3. Config Files (JSON)

Located in the config/ folder, these define what settings merchants can customize via the theme editor. Key file: **settings_schema.json**, which lets merchants:

• Change colors, fonts, logos
• Select layouts
• Enable/disable features

---

Here's a typical Shopify theme directory structure

my-shopify-theme/
├── assets/                          # 🖌️ Visual and interactive assets
│   ├── theme.css                    # Global styles (can be SCSS too)
│   ├── theme.js                     # Storefront JS (for interactivity)
│   ├── custom-font.woff2            # Fonts used in theme
│   └── logo.png                     # Logo or images referenced in layout/sections

├── config/                          # ⚙️ Theme customization settings
│   ├── settings_schema.json         # Defines editable options in the Theme Editor (UI schema)
│   └── settings_data.json           # Stores actual user-selected settings (generated by Shopify)

├── layout/                          # 🧱 Base structure (used by every page)
│   └── theme.liquid                 # Required layout file, includes head/body structure and dynamic content rendering via `{{ content_for_layout }}`

├── locales/                         # 🌐 Translations
│   ├── en.default.json              # Default language file
│   └── fr.default.json              # Optional additional language

├── sections/                        # 🧩 Modular page blocks (draggable in editor)
│   ├── header.liquid                # Usually included in `theme.liquid`
│   ├── footer.liquid                # Same as above
│   ├── featured-products.liquid     # Homepage/product section example
│   └── product-template.liquid      # Section used in `product.json`, contains main product content

├── snippets/                        # 🔁 Small, reusable templates (like partials)
│   ├── product-price.liquid         # Displays formatted product price
│   └── icon-cart.liquid             # A cart icon SVG or block

├── templates/                       # 📄 Page-level templates (use `.json` for OS 2.0)
│   ├── index.json                   # ✅ Homepage (required for sections on home page)
│   ├── product.json                 # ✅ Product page (includes `product-template` section)
│   ├── collection.json              # ✅ Single collection page
│   ├── search.json                  # ✅ Search results page
│   ├── blog.json                    # ✅ Blog listing page
│   ├── article.json                 # ✅ Single blog article page
│   └── page.contact.json            # ✅ Contact page with form and editable sections

├── templates/customers/             # 👤 Customer-related pages (must use `.liquid`)
│   ├── login.liquid                 # Login form
│   ├── register.liquid              # Registration form
│   └── account.liquid               # Logged-in customer dashboard

└── config.yml                       # Optional CLI tool configuration (Shopify CLI)

---

Here is how Shopify theme are rendered on browser with different section

Component	Description	File Type	Location
Layout	The base template. Defines global structure like header, footer, and outer <html> shell.	.liquid	/layout/
Template	Defines the structure for specific pages (home, product, collection, etc.).	.liquid / .json	/templates/
Section Group (in layout)	Modular containers that group multiple sections and app blocks with their settings.	.json	/sections/
Section (in templates)	Reusable content modules rendered by templates or section groups.	.liquid	/sections/
Blocks (inside sections)	Repeatable or reorderable sub-components defined in a section’s schema.	Schema attribute	Inside section schema tag

---

🛍️ Let's take a look at the important pages on Shopify theme

1. Home Page – index.liquid

• This is the main landing page at the root URL (/).
• It’s the first impression of the brand—used to highlight products, collections, and the brand story.
• Should be visually engaging and flexible using dynamic sections.

2. Collection Page – collection.liquid

• Displays all products in a specific collection (e.g. "T-Shirts" or "New Arrivals").
• Ideal for organizing products by category.

3. All Collections Page – list-collections.liquid

• Shows a grid of all available collections in the store.
• Useful for helping users browse by category or theme.

4. Product Page – product.liquid

• Shows details of a single product including:

  • Images
  • Price
  • Variants (size, color, etc.)
  • Add to Cart button

5. Cart Page – cart.liquid

• Displays a summary of what the customer has added to their cart.
• Customers can review, update, or remove items before checking out.

6. Checkout Pages

• Shopify hosts and manages checkout securely.

• Customers go through 1–3 steps:

  • Information → Shipping → Payment

• After placing the order, they see:

  • Thank You page
  • Order Status page

• You can apply limited style customizations via the Shopify admin (for Plus users, deeper customization is possible).

7. Customer Account Page – customers/account.liquid

• Available for stores with customer accounts enabled.

• Customers can log in to:

  • View past orders
  • Track order status
  • Update profile details

8. Search Page – search.liquid

• A standalone page for users to search the store’s products or content.

9. Blog Page – blog.liquid

• Shopify includes a built-in blog system.
• This page lists all blog posts within a blog (e.g. "News" or "Tips").
• Good for SEO, storytelling, and marketing.