Shopify Theme Development Pro - Complete theme development, deployment, and design system management for OpenClaw agents. Use when building Shopify themes, writing Liquid templates, pushing theme changes, deploying to stores, or managing design systems. Triggers on Shopify theme, Liquid templating, theme development, theme deployment, push theme, Shopify design system, Online Store 2.0, theme sections.
End-to-end Shopify theme development, deployment, and design system management. Covers Liquid templating, Online Store 2.0 architecture, performance optimization, deployment workflows, and CSS design systems.
Apply this skill when:
Start a local dev server with hot reload:
shopify theme dev --store=your-store.myshopify.com
Visit http://localhost:9292 to preview changes in real-time.
Push local changes to a theme:
shopify theme push --theme <THEME_ID>
See references/deployment.md for the full pre-flight checklist and deployment workflow.
Generate a section scaffold:
mkdir -p sections
touch sections/my-section.liquid
See references/liquid-patterns.md for common section patterns and schemas.
Directory Structure:
theme/
├── assets/ # CSS, JavaScript, images
├── config/ # Theme settings (settings_schema.json, settings_data.json)
├── layout/ # Template wrappers (theme.liquid required)
├── sections/ # Reusable, customizable content modules
├── snippets/ # Reusable code fragments
├── templates/ # Page-type templates (JSON or Liquid)
└── locales/ # Translation files (en.default.json, etc.)
Key Principles:
✅ DO:
❌ DON'T:
JSON Template Example:
{
"sections": {
"header": {
"type": "header"
},
"main": {
"type": "main-product"
}
},
"order": ["header", "main"]
}
Basic Syntax:
{%- # Output variables -%}
{{ product.title }}
{{ product.price | money }}
{%- # Control flow -%}
{% if product.available %}
<button type="submit">Add to Cart</button>
{% else %}
<span class="sold-out">Sold Out</span>
{% endif %}
{%- # Loops -%}
{% for variant in product.variants limit: 10 %}
{{ variant.title }}: {{ variant.price | money }}
{% endfor %}
{%- # Filter chaining (processes left to right) -%}
{{ product.description | strip_html | truncate: 150 | upcase }}
Performance Tips:
{%- -%} to strip whitespace and reduce HTML size{% for item in array limit: 10 %})liquid tag for nested logic blocksSee references/liquid-patterns.md for advanced patterns.
Initialize a new theme from a template:
shopify theme init
Or clone an existing theme:
shopify theme pull --theme <THEME_ID>
Run the dev server:
shopify theme dev --store=your-store.myshopify.com
Changes auto-sync to the dev theme and reload the browser.
Run Theme Check linter:
shopify theme check
Fix any errors or warnings before deploying.
See the full deployment workflow in references/deployment.md. Key steps:
shopify theme push --theme <THEME_ID>
IMPORTANT: Never push to live theme without --allow-live flag and explicit confirmation.
Promote a theme to live:
shopify theme publish --theme <THEME_ID>
See references/performance.md for detailed optimization strategies.
Quick Wins:
loading="lazy")srcset)preload, dns-prefetch)Avoid:
<head>Build accessibility from the ground up:
Example:
<button
type="button"
aria-label="{{ 'cart.add_to_cart' | t }}"
aria-describedby="variant-{{ variant.id }}"
>
{{ 'cart.add' | t }}
</button>
See references/design-system.md for building and maintaining a CSS design system.
Key Components:
Approach:
assets/variables.css or config/settings_schema.jsonreferences/design-system.mdEnable merchants to customize themes without code:
Theme Settings (config/settings_schema.json):
{
"name": "Colors",
"settings": [
{
"type": "color",
"id": "color_primary",
"label": "Primary Color",
"default": "#000000"
},
{
"type": "font_picker",
"id": "font_heading",
"label": "Heading Font",
"default": "helvetica_n4"
}
]
}
Section Settings:
{% schema %}
{
"name": "Featured Collection",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "range",
"id": "products_to_show",
"min": 2,
"max": 12,
"step": 1,
"default": 4,
"label": "Products to show"
}
],
"blocks": [
{
"type": "heading",
"name": "Heading",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading"
}
]
}
],
"presets": [
{
"name": "Featured Collection"
}
]
}
{% endschema %}
Development:
shopify theme init — Create new theme from templateshopify theme dev — Local dev server with hot reloadshopify theme list — List all themes on the storeshopify theme open — Open theme in Shopify adminDeployment:
shopify theme push — Push local changes to storeshopify theme pull — Pull remote changes to localshopify theme publish — Set theme as liveshopify theme share — Generate shareable preview linkshopify theme package — Create distributable ZIPQuality:
shopify theme check — Run lintershopify theme check --auto-correct — Auto-fix issuesFlags:
--store <store.myshopify.com> — Target store--theme <THEME_ID> — Target specific theme--allow-live — Allow pushing to live theme (requires confirmation)--only <glob> — Push specific files only--ignore <glob> — Skip specific files--nodelete — Don't delete remote files missing locallyCommon use cases:
Example (Add to Cart):
fetch(`${window.Shopify.routes.root}cart/add.js`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
id: variantId,
quantity: 1
})
})
.then(response => response.json())
.then(item => {
console.log('Added to cart:', item);
// Update cart UI
})
.catch(error => console.error('Error:', error));
Get Cart Contents:
fetch(`${window.Shopify.routes.root}cart.js`)
.then(response => response.json())
.then(cart => console.log('Cart:', cart));
See Shopify Ajax API docs for all endpoints and response schemas.
✅ DO:
❌ DON'T:
Before deploying to production:
shopify theme check with no critical errorsSee references/liquid-patterns.md for detailed examples:
references/liquid-patterns.md — Common Liquid patterns and section schemasreferences/design-system.md — CSS design system guidelinesreferences/deployment.md — Full deployment workflow and pre-flight checklistreferences/performance.md — Performance optimization strategiesVersion: 1.0 (Combined from shopify-theme-dev + shopify-theme-push) Last Updated: 2026-03-13