SpectreSkills
← All skills
★

shopify-theme-architect

v1.0.0

Scaffold a complete Online Store 2.0 theme from scratch — directory layout, theme.liquid, settings_schema, and JSON templates wired to sections. Trigger when starting a new theme or restructuring one to be sections-everywhere.

Shopifyshopifythemearchitecturescaffold
Install
npx @spectre-apps/skills add shopify-theme-architect

Writes .claude/skills/shopify-theme-architect/SKILL.md. Add --user to install globally.

What it does

Shopify theme architect

Build every theme as a sections-everywhere Online Store 2.0 theme so merchants can rearrange the whole site in the theme editor. Start from the directory contract, then fill it in.

First connect to a store and start a live preview with shopify-cli-workflow — scaffold this structure inside that folder so every edit hot-reloads.

Directory layout

layout/theme.liquid          # the shell: <head>, header, {{ content_for_layout }}, footer
config/settings_schema.json  # global theme settings (colors, type, logo, spacing)
config/settings_data.json    # merchant's chosen values
templates/*.json             # JSON templates that list which sections render
sections/*.liquid            # every reusable block of UI, each with a {% schema %}
snippets/*.liquid            # small partials rendered with {% render %}
blocks/*.liquid              # theme blocks (OS 2.0) for nestable content
assets/                      # base.css, global.js, fonts, static images
locales/en.default.json      # all merchant-facing + storefront copy

The shell — layout/theme.liquid

  • Put {{ content_for_header }} in <head> and {{ content_for_layout }} in <body>. Render the header and footer as sections via {% sections 'header-group' %} / {% sections 'footer-group' %} so they live in the editor too.
  • Load one small base.css and defer global.js; per-section CSS belongs in a {% stylesheet %} inside that section.
  • Set <html lang="{{ request.locale.iso_code }}"> and render {{ settings.* }} design tokens as CSS custom properties on :root.

JSON templates

Each page template is data, not markup — it names sections and their order:

{
  "sections": {
    "hero": { "type": "hero" },
    "featured": { "type": "featured-collection" }
  },
  "order": ["hero", "featured"]
}

Create templates/index.json, collection.json, product.json, page.json, cart.json, 404.json. Ship a header-group.json and footer-group.json for the persistent chrome.

Global settings

Expose the design system through settings_schema.json: a color group, a typography group (heading + body font_picker, base size, scale), logo + favicon, page width, and section spacing. Read them everywhere as {{ settings.* }} — never hardcode a value a merchant should own.

Pair with luxury-storefront-aesthetic for the design language and shopify-theme-section for the anatomy of each section file.