# Shop the room

Chapter 10 of the Atelier user guide.

A room photograph with a ring on each piece. Selecting a ring draws a leader line to a small card with the piece's photo, title, designer, size and price, and an add button. Under the photograph, a list shows every piece in the room, and a foot line adds up the room ("Five pieces in this room, $11,494 together.") with a link to request a quote for the whole room.

## Set it up

1. Add the **Shop the room** section (home page, a page, a collection or a product page).
2. Choose the room **Image**. It is shown uncropped, at its own shape, so the rings stay on the pieces at every screen size. Use a straight-on, landscape photograph at least 2400px wide.
3. Add a **Hotspot** block for each piece (up to 12) and choose its **Product**.
4. Move each ring onto its piece with **Horizontal position** and **Vertical position** (percentages from the image's left and top edges). In the editor, selecting a hotspot block opens its callout so you can check it.

## Section settings

| Setting | Default | What it does |
| --- | --- | --- |
| Kicker, Heading, Text | "Shop the room", "The Fitzroy living room" | The two-column head |
| Image | Empty | The room. Without one, the editor shows a placeholder drawing. |
| Pan the room on phones | On | On phones the photograph is shown twice as wide, to scroll across, so the rings stay on the pieces and large enough to tap. Off fits the image to the screen with smaller rings. |
| Show the labels switch | On | A **Show all labels** switch in the head: every ring gets a small label with its title and price, for shoppers who want to read the whole room at once |
| Show the list of pieces | On | A row per piece under the photograph, with a thumbnail, title, price and a "+" button that adds it |
| Show the room's total | On | "5 pieces in this room, $11,494 together.", from each piece's lowest price. Hidden when any hotspot has no product. |
| Show add all to cart | Off | **Add all 5 to cart** adds every piece in one go, in its first available variant. Sold-out pieces are skipped and named. Shown when at least two pieces can be added. |
| Quote link label | "Request a quote for the whole room" | Empty hides the link |
| Quote link | Empty | Leave it blank to use your trade page, with this room's pieces filled in (chapter 12) |
| Background | Page | Or Stone |

## Hotspot settings

| Setting | What it does |
| --- | --- |
| Product | The piece: its size, designer and price, with add to cart |
| Title | Optional. Defaults to the product's title. |
| Horizontal position, Vertical position | 50% and 50% by default |
| Detail | A short note in the callout, such as "Shown in smoked oak" |
| Callout side | **Automatic** opens the card to the right of a ring in the left 60% of the image and to the left otherwise. **Left** or **Right** forces a side. |

## How it behaves

* One callout is open at a time; **Esc** or a click outside closes it. Rings are buttons named after their piece, so keyboard and screen-reader users can move through them.
* The callout's button reads **Add to cart** for a product with one variant (the cart drawer opens with it) and **Choose options** for one with several (quick view when it's turned on in Theme settings, else the product page). **View** opens the product page.
* Hovering or focusing a row in the list lights its ring, and the other way round.
* On phones no callout opens: tapping a ring scrolls the list to its piece and marks it.
* A hotspot without a product shows its title and detail only, and is left out of the list, the total and Add all.

The Atelier preset's home page shows "The Fitzroy living room" with five rings; Lumen's shows a dining room at dusk and Commons a bedroom.