From shopify-commerce
Guides Shopify theme development: OS 2.0 JSON templates, sections/blocks, settings schema, Dawn reference, file structure, linting, assets, deployment.
npx claudepluginhub orcaqubits/agentic-commerce-skills-plugins --plugin shopify-commerceThis skill is limited to using the following tools:
**Fetch live docs**:
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Guides MCP server integration in Claude Code plugins via .mcp.json or plugin.json configs for stdio, SSE, HTTP types, enabling external services as tools.
Fetch live docs:
https://shopify.dev/docs/storefronts/themes for theme documentationsite:shopify.dev theme architecture online store 2.0 for OS 2.0 patternssite:shopify.dev theme section schema blocks for section and block schemasite:github.com shopify dawn for Dawn reference theme sourcesite:shopify.dev settings schema json for theme settings input typestheme/
├── 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
The current theme architecture:
{
"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.
Sections are the building blocks of OS 2.0 themes:
.liquid file containing template + schema{% comment %} sections/featured-collection.liquid {% endcomment %}
<div class="featured-collection">
<h2>{{ section.settings.heading }}</h2>
{% for block in section.blocks %}
{% case block.type %}
{% when 'product_card' %}
<div {{ block.shopify_attributes }}>
{{ block.settings.product.title }}
</div>
{% when 'text' %}
<p {{ block.shopify_attributes }}>{{ block.settings.text }}</p>
{% endcase %}
{% endfor %}
</div>
{% 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 %}
| 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-searchsite:shopify.dev theme input settings types.
Defines theme-wide settings organized into groups (tabs in theme editor):
name and array of settings{{ settings.setting_id }} in LiquidFetch live docs for current settings_schema.json structure — the format and available group types evolve.
Shopify's official reference theme:
https://github.com/Shopify/dawnshopify theme init — scaffold from Dawn or create blank themeshopify theme dev — local development server with hot reloadshopify theme check — lint for errors and best practicesshopify theme push — upload to development storeshopify theme publish — make theme liveLinting tool for Shopify themes:
shopify theme check or configure in CIFetch live docs: Web-search
site:shopify.dev theme checkfor current rules and configuration options.
shopify theme dev)shopify theme push/shopify theme pullimage_url with width parameters for responsive images{{ block.shopify_attributes }} on block wrappers for theme editor integrationFetch the Shopify theme documentation, Dawn source, and section schema reference for exact schema options, setting types, and best practices before implementing.