Product Stage
Product Stage is a launch-style hero. Each slide puts one product center stage with a giant word behind it, up to three spec readouts with meters, the price and colorway buttons that swap the image and stage tint. Slides switch with arrows, thumbnails, swipes and optional autoplay.
How to set it up
Step 1: Add the Product Stage section
- In the theme editor, open the page you want and click Add section under Template.
- Search for Product Stage and select it (1).
- Two presets are available: Product Stage (product shots on a plain stage) and Product Stage: Cinema (lifestyle images that fill the slide).
Step 2: Set up the stage
- Pick a Layout (1): console (product center stage), split (product on the right), or cinema (image fills the slide).
- Add a Corner label (2), a small text with an indicator light, and optionally the sound wave graphic (3) with its label.
- Set the height, text alignment, title typography and autoplay.
Step 3: Add slides
- Each Slide block shows one product. Pick the Product (1): the image defaults to the product image; upload a cut-out or studio packshot in Image (2) for the best result.
- Set the Background word (3): the giant word behind the product (defaults to the first word of the title).
- Add a tag, heading and text, the price, colorways, button, and up to three spec readouts with a value, unit, label and meter level.
Settings reference
Product Stage
| Layout | |
|---|---|
| Layout | Cinema suits lifestyle photos; the other layouts suit product shots on a plain background. Options: Console — product center stage, Split — product on the right, Cinema · image fills the slide. |
| Frame | Options: Rounded panel, Full bleed. |
| Height | Slider. |
| Mobile height | Slider. |
| Corner label | Small text with an indicator light in the top corner. Leave blank to hide. |
| Show sound wave graphic | Turns this on or off. |
| Sound wave label | |
| Autoplay | |
| Autoplay | Turns this on or off. |
| Change slides every | Slider. |
Slide block
| Product | A product. |
|---|---|
| Image | Use a cut-out or studio packshot. Defaults to the product image. |
| Mobile image | An image from your files. |
| Stage tint | |
| Background word | Giant word behind the product. Defaults to the first word of the product title. |
| Background word style | Options: Faded, Outline, Hidden. |
| Tag | |
| Heading | |
| Text | |
| Show price | Turns this on or off. |
| Show colorways | Swaps the product image and stage tint. |
| Button label | |
| Button link | Defaults to the product. |
| Spec readouts | |
| Spec 1 value | |
| Spec 1 unit | |
| Spec 1 label | |
| Spec 1 meter | Slider. |
| Spec 2 value | |
| Spec 2 unit | |
| Spec 2 label | |
| Spec 2 meter | Slider. |
| Spec 3 value | |
| Spec 3 unit | |
| Spec 3 label | |
| Spec 3 meter | Slider. |
Section width, corners, padding, color scheme, divider and visibility work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.
How it works
- Show colorways swaps the product image and stage tint when a shopper picks a color.
- The thumbnails at the bottom switch slides; on phones, swipe.
- Cinema suits lifestyle photos; the other layouts suit product shots on a plain background.
Troubleshooting
The product looks small or cut off.
Use a cut-out or a square studio packshot in the slide's Image, and adjust the section height.