# Shopify Themes > Develop Shopify themes — file structure, Online Store 2.0, sections and blocks, settings schema, Dawn reference theme, Theme Check linting, asset pipeline, and theme deployment. Use when building or customizing Shopify themes. - Skill: `orcaqubits/shopify-themes` (Agent Skill) - Install (CLI): `npx skillmds@latest add orcaqubits/shopify-themes` - Raw SKILL.md: https://api.skillmd.com/api/skills/orcaqubits/shopify-themes/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: DevOps & Infra - Author: OrcaQubits (https://skillmd.com/u/orcaqubits) - Updated: 2026-09-10 - Page: https://skillmd.com/skills/orcaqubits/shopify-themes --- # Shopify Theme Development ## Before writing code **Fetch live docs**: 1. Fetch `https://shopify.dev/docs/storefronts/themes` for theme documentation 2. Web-search `site:shopify.dev theme architecture online store 2.0` for OS 2.0 patterns 3. Web-search `site:shopify.dev theme section schema blocks` for section and block schema 4. Web-search `site:github.com shopify dawn` for Dawn reference theme source 5. Web-search `site:shopify.dev settings schema json` for theme settings input types ## Theme File Structure ``` theme/ ├── assets/ # CSS, JS, images, fonts ├── config/ │ ├── settings_schema.json # Theme-level settings definition │ └── settings_data.json # Current settings values ├── layout/ │ ├── theme.liquid # Main layout (required) │ └── password.liquid # Password page layout ├── locales/ │ ├── en.default.json # Default translations │ └── fr.json # Additional languages ├── sections/ # Reusable, configurable sections ├── snippets/ # Reusable Liquid fragments ├── templates/ │ ├── index.json # Homepage │ ├── product.json # Product page │ ├── collection.json # Collection page │ ├── page.json # Static page │ ├── blog.json # Blog listing │ ├── article.json # Blog article │ ├── cart.json # Cart page │ ├── 404.json # Not found │ └── customers/ │ ├── login.json # Login page │ └── account.json # Account dashboard └── templates/*.json # All OS 2.0 templates are JSON ``` ## Online Store 2.0 The current theme architecture: - **JSON templates** define which sections appear on each page type - **Sections everywhere** — merchants can add/remove/reorder sections on any page - **Blocks** — nested configurable units within sections - **App blocks** — apps can inject content into themes via theme app extensions - **Dynamic sources** — metafields and metaobjects connect to section settings ### JSON Template Structure ```json { "sections": { "main": { "type": "main-product", "settings": {} }, "recommendations": { "type": "product-recommendations", "settings": { "heading": "You may also like" } } }, "order": ["main", "recommendations"] } ``` Templates reference section types by name. The `order` array controls rendering order. Merchants edit sections and their settings in the theme editor. ## Section Architecture Sections are the building blocks of OS 2.0 themes: 1. Single `.liquid` file containing template + schema 2. Schema defines settings, blocks, presets, and enabled_on/disabled_on 3. Merchants configure via the theme editor (no code needed) ### Section Schema Pattern ```liquid {% comment %} sections/featured-collection.liquid {% endcomment %}

{{ section.settings.heading }}

{% for block in section.blocks %} {% case block.type %} {% when 'product_card' %}
{{ block.settings.product.title }}
{% when 'text' %}

{{ block.settings.text }}

{% endcase %} {% endfor %}
{% schema %} { "name": "Featured Collection", "settings": [ { "type": "text", "id": "heading", "label": "Heading", "default": "Featured Products" }, { "type": "collection", "id": "collection", "label": "Collection" } ], "blocks": [ { "type": "product_card", "name": "Product Card", "settings": [ { "type": "product", "id": "product", "label": "Product" } ] }, { "type": "text", "name": "Text Block", "settings": [ { "type": "richtext", "id": "text", "label": "Text" } ] } ], "presets": [ { "name": "Featured Collection" } ], "enabled_on": { "templates": ["index", "collection"] } } {% endschema %} ``` ### Setting Input Types | Type | Renders As | Example Use | |------|-----------|-------------| | `text` | Text input | Headings, labels | | `textarea` | Multi-line text | Descriptions | | `richtext` | Rich text editor | Formatted content | | `number` | Number input | Counts, spacing | | `checkbox` | Toggle | Show/hide elements | | `select` | Dropdown | Layout options | | `color` | Color picker | Theme colors | | `font_picker` | Font selector | Typography | | `image_picker` | Image upload | Hero images, logos | | `url` | URL input | Links | | `product` | Product picker | Featured products | | `collection` | Collection picker | Featured collections | | `page` | Page picker | Links to pages | | `blog` | Blog picker | Blog references | > **Fetch live docs** for the full list of setting input types — new types are added (e.g., `color_scheme`, `inline_richtext`). Web-search `site:shopify.dev theme input settings types`. ### Settings Schema (config/settings_schema.json) Defines theme-wide settings organized into groups (tabs in theme editor): - Each group has a `name` and array of `settings` - Accessed via `{{ settings.setting_id }}` in Liquid - Controls: colors, typography, social media, layout, custom CSS > **Fetch live docs** for current settings_schema.json structure — the format and available group types evolve. ## Dawn Reference Theme Shopify's official reference theme: - Minimal, accessible, performant - Demonstrates all OS 2.0 patterns - GitHub: `https://github.com/Shopify/dawn` - Used as starting point for custom themes - Read Dawn source to understand section/block patterns before building custom themes ## Theme Development Workflow 1. `shopify theme init` — scaffold from Dawn or create blank theme 2. `shopify theme dev` — local development server with hot reload 3. `shopify theme check` — lint for errors and best practices 4. `shopify theme push` — upload to development store 5. Test in theme editor — verify merchant customization 6. `shopify theme publish` — make theme live ## Theme Check Linting tool for Shopify themes: - Catches Liquid syntax errors - Warns about deprecated features - Enforces accessibility standards - Performance suggestions - Run: `shopify theme check` or configure in CI > **Fetch live docs**: Web-search `site:shopify.dev theme check` for current rules and configuration options. ## Deprecated Tools Warning - **Slate** — deprecated build tool. Use Shopify CLI (`shopify theme dev`) - **Theme Kit** — legacy deployment. Use `shopify theme push`/`shopify theme pull` - **Timber** — deprecated starter theme. Use Dawn ## Best Practices - Start from Dawn for custom themes — do not build from scratch - Use JSON templates for all page types (Online Store 2.0) - Make sections reusable with well-defined schemas - Use blocks for repeatable content within sections - Keep JavaScript minimal — prefer CSS for animations and interactions - Use `image_url` with width parameters for responsive images - Run Theme Check before every deployment - Test accessibility with keyboard navigation and screen readers - Use locales for all user-facing text (even for single-language stores) - Keep asset file sizes small — Shopify CDN serves them, but initial load matters - Use `{{ block.shopify_attributes }}` on block wrappers for theme editor integration Fetch the Shopify theme documentation, Dawn source, and section schema reference for exact schema options, setting types, and best practices before implementing.