SpectreSkills
← All skills

shopify-product-page

v1.0.0

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.

Shopifyshopifyproductpdptheme
Install
npx @spectre-apps/skills add shopify-product-page

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

What it does

Shopify product page (PDP)

templates/product.json renders a main-product section built from theme blocks so merchants can reorder the buy-box elements. Two columns on desktop: gallery left, a sticky buy box right; stacked on mobile.

Gallery

  • Show product.media at full height — a vertical stack on desktop, a scroll-snap carousel on mobile. Tall ratios, image_url at 1600–2000px, first image loading: 'eager', rest lazy. Support model/video media types.

Buy box

  • Blocks for: vendor eyebrow, product.title, price ({{ product.selected_or_first_available_variant.price | money }}), variant picker, quantity, add-to-cart, and short description.
  • Variants: render product.options_with_values as swatches/pills. Use a variant-selects custom element that maps the chosen options to a variant and updates the hidden id input, price, and availability. Disable or mark sold-out combinations from variant.available.
  • Add to cart posts to /cart/add (or the Cart AJAX API) and opens the cart drawer. Reflect product.selected_or_first_available_variant in the URL (?variant=).
  • Keep it quiet: uppercase tracked button, hairline dividers, lots of air.

Details

  • An accordion for Description, Materials & Care, Shipping & Returns — pull long-form content from metafields where it exists (see shopify-metafields).

Related

  • 'You may also like': product.collections.first.products or Search & Discovery recommendations, rendered with the shared {% render 'product-card' %}.

Finish with shopify-theme-check before shipping, and hold the whole page to luxury-storefront-aesthetic.