SpectreSkills
← All skills

shopify-home-page

v1.0.0

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.

Shopifyshopifyhomesectionstheme
Install
npx @spectre-apps/skills add shopify-home-page

Writes .claude/skills/shopify-home-page/SKILL.md. Add --user to install globally.

What it does

Shopify home page

Assemble templates/index.json from a few strong, full-width sections. Each is its own sections/*.liquid with a {% schema %} and a presets entry so it can be reordered in the editor.

Hero (sections/hero.liquid)

  • Full-bleed image or video, min-height: 90vh, runs under the transparent header. Minimal overlay copy: eyebrow, one display line, one text link.
  • Settings: image/video, heading, subheading, cta_label, cta_link, text_position, overlay_opacity.

Editorial split (sections/editorial.liquid)

  • 50/50 image + text, alternating side per instance. Large image, sparse copy, tracked-uppercase link. Blocks let merchants stack a few.

Featured product grid (sections/featured-collection.liquid)

  • Pull products from a collection setting: {% for product in collections[section.settings.collection].products limit: section.settings.count %}.
  • Render each card with a shared {% render 'product-card', product: product %} snippet (tall 4:5 image, hover swaps to the second image, name + price in quiet type). 2–3 per row, big gutters.

Lookbook / marquee (sections/lookbook.liquid)

  • Either a horizontal edge-to-edge image row (scroll-snap) or a slow auto-marquee of campaign imagery. Optional shoppable hotspots via blocks.

Rules

  • Every string, image, link, and count is a setting — nothing hardcoded.
  • Reuse the product-card snippet on collection and PDP related-products so cards are identical everywhere.
  • Lean on luxury-storefront-aesthetic for spacing/type and shopify-theme-section for correct schema/blocks/presets.