Build a complete editorial, high-fashion Shopify storefront end to end — from connecting a store to a shippable home, collection, and product page. Combine when the brief is a premium Online Store 2.0 theme from scratch.
Connect a theme to a real Shopify store with the Shopify CLI and run the build loop — authenticate, live-preview with hot reload, lint, and push. Trigger before building or editing any theme, or when previewing/deploying to a store.
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.
Give a Shopify storefront an editorial, high-fashion feel inspired by houses like Louis Vuitton — restrained palette, generous negative space, refined typography, full-bleed imagery, and quiet motion. Trigger when the brief calls for luxury, editorial, premium, or fashion.
Build a persistent luxury header and footer for a Shopify theme — transparent-over-hero sticky header, refined mega-menu from linklists, and a quiet multi-column footer. Trigger when building site chrome, navigation, header, or footer.
Compose a luxury Shopify home page from editorial sections — full-bleed hero, editorial split, featured product grid, and a lookbook/marquee — each a configurable OS 2.0 section. Trigger when building the index template or home page sections.
Build a refined Shopify collection page — editorial banner, a calm responsive product grid, filtering and sorting from the Storefront Filtering API, and quiet pagination. Trigger when building the collection template or product listing pages.
Build a luxury Shopify product detail page (PDP) — full-height gallery, a quiet buy box with variant selection, a details accordion, and related products. Trigger when building the product template or PDP.
How it fits together
Luxury Shopify Storefront
Everything you need to take an editorial, luxury Online Store 2.0 theme from an
empty folder to a previewable storefront. Install the skills and let Claude work
through them in order.
Order
shopify-cli-workflow — connect to a store and start shopify theme dev. This is step 0; the rest assume a live preview loop.
shopify-theme-architect — scaffold the sections-everywhere theme structure and global settings.
luxury-storefront-aesthetic — establish the design language (restrained palette, generous space, refined type). It applies across every page below.
shopify-global-nav — the persistent header + footer.
shopify-home-page — the editorial home: hero, alternating splits, featured grid.
shopify-collection-page — the filtered, paginated listing page.
shopify-product-page — the sticky-buy-box PDP.
Notes
The three supporting skills shopify-theme-section, liquid-conventions, and
shopify-metafields are used implicitly throughout — add them too if you want
Claude to lean on them explicitly. Lint with shopify-theme-check before you
push.
Prefer to drop the files in?
Copies every skill in this recipe as one block — each section is headed with the path it belongs at (.claude/skills/<slug>/SKILL.md), so you can paste them straight into your project and reference them in your prompt.