| name | shopify-editions-3d-site |
| description | Use when asked to build a Shopify Editions-style product launch site, immersive 3D commerce microsite, scroll-driven WebGL announcement page, or premium release page with 3D hero scenes, section navigation, product update cards, responsive fallbacks, and high-performance asset loading. |
Shopify Editions 3D Site
Overview
Use this skill to create a polished product-launch microsite in the same class as Shopify Editions Winter '26: full-viewport editorial storytelling, sticky WebGL scenes, dense update content, precise navigation, and robust fallbacks.
Do not clone Shopify branding or copy protected content. Recreate the system: scene architecture, editorial hierarchy, asset pipeline, motion discipline, and performance constraints.
Start Here
- Define the release concept, sections, and product/update taxonomy.
- Read
references/architecture.md for page structure and data flow.
- Read
references/visual-system.md for typography, navigation, layout, and motion language.
- Read
references/three-scene-system.md before implementing any 3D, WebGL, shader, GLB/GLTF, KTX2, DRACO, camera, lighting, particle, or post-processing work.
- Read
references/asset-pipeline.md when preparing models, textures, video, images, fonts, or fallbacks.
- Use
assets/site-blueprint.template.md to draft the concrete site plan before coding.
- Use
references/implementation-checklist.md for build and verification.
Required Deliverables
- A working website, not a static mockup or landing-page description.
- A first viewport with the product/release identity, immersive 3D or rich media, and a visible path into the next section.
- Sticky global navigation, mobile navigation, section navigation, and CTA treatment.
- Product/update sections that can be scanned, searched, filtered, or grouped.
- Low-performance and reduced-motion fallbacks.
- Verified desktop and mobile rendering, including canvas nonblank checks when WebGL is used.
Preferred Stack
Use the existing project stack when one exists. For a new build, prefer:
- React + Vite or Remix-style routing.
- Tailwind or a tokenized CSS layer.
- Three.js with React Three Fiber for interactive scenes.
- GLTFLoader + DRACOLoader + KTX2Loader for production 3D assets.
- A lightweight scene configuration object per section.
Avoid hand-rolling core 3D asset loading or compression behavior when Three.js loaders already solve it.
Build Pattern
Treat the site as two coordinated systems:
- Content system: release metadata, section taxonomy, navigation, search, update cards, CTAs, SEO.
- Scene system: sticky canvas, per-section scene components, compressed assets, camera/light presets, render quality, transitions, fallbacks.
The content must remain usable if the scene system fails.
Quality Bar
- No blank WebGL canvases.
- No text overlap on mobile or desktop.
- No motion-only navigation.
- No one-note palette; combine dark stage surfaces, warm editorial neutrals, sharp accent colors, and product-specific colors.
- No decorative cards inside cards.
- No marketing-only hero. The first screen must be the actual product-launch experience.
References
references/architecture.md: page architecture and interaction model.references/visual-system.md: art direction and responsive UI rules.references/three-scene-system.md: 3D modeling, asset loading, scene, shader, and performance rules.references/asset-pipeline.md: asset preparation and budgets.references/implementation-checklist.md: build and verification checklist.
