Skip to main content

Theme Architecture

Understanding Shoplazza theme structure and organization.

Standard Directory Structure​

theme/
├── assets/
│   ├── application.css
│   ├── application.js
│   ├── theme.css
│   └── images/
├── config/
│   ├── settings_data.json
│   └── settings_schema.json
├── layout/
│   └── theme.liquid
├── locales/
│   ├── en.default.json
│   └── zh-CN.json
├── sections/
│   ├── header.liquid
│   ├── footer.liquid
│   ├── product-template.liquid
│   └── collection-list.liquid
├── snippets/
│   ├── product-card.liquid
│   ├── cart-drawer.liquid
│   └── icon.liquid
└── templates/
    ├── index.liquid
    ├── product.liquid
    ├── collection.liquid
    ├── page.liquid
    ├── blog.liquid
    ├── article.liquid
    ├── cart.liquid
    ├── search.liquid
    └── customers/
        ├── account.liquid
        ├── login.liquid
        └── register.liquid

Key Directories​

Assets​

Contains all static files:

  • CSS: Stylesheets for your theme
  • JavaScript: Scripts for interactivity
  • Images: Theme images and icons
  • Fonts: Custom web fonts

Config​

Theme settings and configuration:

  • settings_schema.json: Defines customizable settings
  • settings_data.json: Stores setting values

Layout​

Base templates that other templates extend:

  • theme.liquid: Main layout template
  • Contains {{ content_for_layout }} placeholder

Locales​

Translation files for multiple languages:

  • en.default.json: English translations
  • zh-CN.json: Simplified Chinese
  • [language].json: Other languages

Sections​

Modular content blocks:

  • Can be added/removed by merchants
  • Reusable across different pages
  • Include customization options

Snippets​

Reusable code components:

  • Included in templates or sections
  • Cannot be added directly to pages
  • No customization schema

Templates​

Page-specific layouts:

  • Define structure for different page types
  • Can have multiple variants
  • Use sections and snippets

File Organization Best Practices​

1. Naming Conventions​

// Good
product-card.liquid
header-navigation.liquid
cart-drawer.liquid

// Bad
pc.liquid
nav.liquid
drawer.liquid

2. Component Structure​

<!-- snippet: product-card.liquid -->
<div class="product-card">
  <div class="product-card__image">
    <!-- Image content -->
  </div>
  <div class="product-card__info">
    <!-- Product info -->
  </div>
</div>

3. CSS Organization​

/* Base styles */
@import 'variables.css';
@import 'reset.css';
@import 'typography.css';

/* Layout */
@import 'layout/header.css';
@import 'layout/footer.css';
@import 'layout/grid.css';

/* Components */
@import 'components/buttons.css';
@import 'components/forms.css';
@import 'components/cards.css';

/* Pages */
@import 'pages/product.css';
@import 'pages/collection.css';

Next Steps​