Shop the scene
Shop the scene turns one lifestyle photo into an interactive shopping moment. You place small markers on the photo, and each marker is linked to a real product from your catalog. Shoppers tap a marker to see the product’s photo, name, price, and options — and can add it to the cart right there.
What it does
Section titled “What it does”Use this section when one photo shows several products at once — a full pet outfit, a styled room, a feeding station. Instead of saying “shop the look” and linking out, you let shoppers point at what they want.
Each marker opens a small product panel where shoppers can:
- see the product photo, name, and price;
- pick options such as size or color (when the product has them);
- add the product to the cart directly, or open the full product page.
It is not the right tool when each photo shows a single product — use Featured product or a product card grid instead.
Add it to a page
Section titled “Add it to a page”- In Shopify admin, go to Online Store → Themes and click Edit theme. (Older admin versions label this button Customize.)
- Open the template where you want the section (for example, the home page).
- Click Add section and pick one of the three starting styles: Shop the scene — Editorial labels, Shop the scene — Numbered story, or Shop the scene — Floating markers. You can switch styles later in the sidebar.
- Every style is added with three example Product anchor blocks already in place (“Everyday collar”, “Leather harness”, “Ceramic food bowl”). Select those blocks and bind your real products instead of adding new anchors first (see Set it up: quick start).
Choose a style
Section titled “Choose a style”The Anchor style setting switches between three looks:
| Style | Markers on the photo | Product panel |
|---|---|---|
| Editorial labels | Small chips showing the product name and price | Opens in a panel beside the photo (below the photo on small screens) |
| Numbered story (default) | Numbered dots (01, 02, 03…) | Products take turns in a dock under the photo, with a counter and a pause button |
| Floating product markers | Small product cards floating on the photo | Tapping a marker opens the theme’s quick view popup |
Set it up: quick start
Section titled “Set it up: quick start”- Add the section and pick a style (see above).
- In the sidebar, click the Image setting and upload your scene photo — a wide photo works best (see Images and content tips).
- The section starts with three Product anchor blocks carrying demo labels (“Everyday collar”, “Leather harness”, “Ceramic food bowl”). Click the first one and choose a real Product; overwrite the Label with your own text (an empty Label falls back to the product title).
- Set where the marker sits: adjust Horizontal position and Vertical position under Desktop anchor position. Both are percentages — think of the photo as a grid from 0% (left/top edge) to 100% (right/bottom edge).
- Repeat with the other two starting anchors. More products in the photo? Click Add block → Product anchor for each extra one (up to 6 anchors total); delete spare anchors with Remove block.
- Set Mobile anchor position if the markers sit differently on the phone version of the photo.
- Save, then open a preview and tap every marker to test.
Settings
Section titled “Settings”Section settings
Section titled “Section settings”Layout
| Setting | Default | Options | What it does |
|---|---|---|---|
| Anchor style | Numbered story | Editorial labels / Numbered story / Floating product markers | Switches the marker look and how the product panel opens |
| Product image overlap | 16 px | 0–48 px, step 2 | Numbered story only. How far the product thumbnails extend up over the photo. 0 keeps them flush with the bottom edge |
Carousel
| Setting | Default | Options | What it does |
|---|---|---|---|
| Auto-rotate products | On | On / Off | Numbered story only. The dock cycles through the anchored products on its own. It pauses when the shopper hovers or focuses the panel, when the panel is off-screen, and via the pause button |
| Rotate every | 5 s | 3–10 s, step 1 | How long each product stays in the dock before switching |
Content
| Setting | Default | Options | What it does |
|---|---|---|---|
| Heading | “Shop the scene” | Text | Title above the section; leave empty for no title |
| Subheading | “Tap the markers to explore each piece from this look.” | Text | Short line under the heading |
| First button label | Empty | Text | Shows a button under the text; leave empty for no button |
| Link | Empty | URL | Where the button leads. A label without a link shows nothing |
Image
| Setting | Default | Options | What it does |
|---|---|---|---|
| Image | Empty | Image picker | The scene photo (desktop and the fallback for mobile) |
| Mobile scene image | Empty | Image picker | Optional portrait photo shown instead of the desktop image on phones |
| Scene height | Medium | Small / Medium / Large | How tall the photo area is on the page |
| Image overlay opacity | 20 % | 0–70 %, step 5 | Darkens the photo so markers stay easy to see on busy images |
Blocks
Section titled “Blocks”Add up to 6 Product anchor blocks — one per product in the photo.
| Block | Limit | What it adds |
|---|---|---|
| Product anchor | 6 | One product, its marker position, and its label options |
Product anchor settings
| Setting | Default | Options | What it does |
|---|---|---|---|
| Product | Empty | Product picker | The product this marker opens. The panel shows its photo, price, and options |
| Horizontal position | 50 % | 0–100 %, step 1 | Desktop anchor position: distance from the left edge of the photo |
| Vertical position | 50 % | 0–100 %, step 1 | Desktop anchor position: distance from the top edge of the photo |
| Horizontal position (under Mobile anchor position) | 50 % | 0–100 %, step 1 | Same, measured on the mobile photo |
| Vertical position (under Mobile anchor position) | 50 % | 0–100 %, step 1 | Same, measured on the mobile photo |
| Label | Empty | Text | Text on or next to the marker. If left empty, the product title is used |
| Label direction | Above the point | Above the point / Below the point | Which side of the marker the label sits on |
| Story text | Empty | Text | One short editorial line shown in the product panel, e.g. “Waterproof waxed cotton” |
| Show price | On | On / Off | Whether the panel shows the product price |
Images and content tips
Section titled “Images and content tips”- Scene photo (desktop): landscape, at least 2000 px wide. Match the photo shape to Scene height: 2000×900 for Small, 2000×1200 for Medium, 2000×1400 for Large.
- Mobile scene image: portrait, around 1080×1440 (3:4). Optional — without it, phones show the desktop photo.
- You can set the photo’s focal point in Shopify’s image editor; it is respected when the photo gets cropped on smaller screens.
- Keep the products you want to tag clearly visible in the photo, with some space around each one — markers and labels need room.
- After replacing or cropping the photo, re-check every marker: positions are percentages of the image, so the products under them may shift.
Good to know
Section titled “Good to know”- Positions are percentages, not pixels. Markers keep their relative spot if the photo scales, but replacing the image changes what sits under each marker.
- Auto-rotate is a Numbered story feature. The other two styles have no carousel. The rotation pauses on hover, on keyboard focus, when the section is off-screen, and via the built-in pause button.
- Options work like the product page. Color options appear as swatches where the product has them, other options as pills. Options with a single value are hidden to keep the panel tidy. Changing options updates the panel photo when the product has matching images.
- Add to cart is direct. Shoppers stay on the page; the cart drawer confirms. View details opens the full product page — useful for products where shoppers need to read more first. Product notes (order remarks) are not collected in this quick-add path; shoppers fill those on the product page or in quick view.
- No JavaScript, no dead ends. If a browser blocks scripts, the photo and the first product panel still render, and each marker remains usable to open the product.
- In the theme editor, clicking a Product anchor block in the sidebar opens that product’s panel in the preview, so you can check positions without saving and previewing.
Example setups
Section titled “Example setups”“Shop the look” rail (Editorial labels). One wide lifestyle photo, 4–6 products, Editorial labels style, auto-rotate off. Shoppers browse the panel at their own pace. Use when the photo is the hero of a lookbook page.
“New arrivals” ticker (Numbered story). A storefront scene photo, 3 products, Numbered story style, Auto-rotate products on, Rotate every 6 s, Scene height Large, overlay 20 %. The dock cycles the products while the photo stays untouched. Use at the top of the home page for a new collection.
Common questions
Section titled “Common questions”A marker sits in the wrong spot after I changed the photo. Positions are percentages of the image. A new photo puts different content under the same percentages — open each Product anchor and re-check Horizontal/Vertical position.
Shoppers can barely see the markers on a busy photo. Raise Image overlay opacity to darken the photo, and check the Label direction so labels don’t sit on top of each other near the photo edges.
The marker shows the product title even though I typed a label. Check that you typed the text into the Label field of the same block that holds this product. An empty Label falls back to the product title.
The markers are fine on desktop but off on phones. Set the mobile photo’s own positions under Mobile anchor position. If you uploaded a separate Mobile scene image, it needs its own positions — the desktop values are not copied.
The dock doesn’t rotate by itself. Auto-rotate products works with the Numbered story style only. Check the Anchor style, that the setting is on, and that the section is actually on screen — rotation pauses off-screen and resumes when scrolled back.