Shop the look makes one styled photo shoppable. You place a numbered hotspot on each product in the photo. Customers open a hotspot to see that product's card, with its price and quick add, and a numbered list beside the photo names every product with its price. It is part of the Masthead preset's home page.
Where to find it
In the theme editor, click Add section and choose Shop the look. You can add it to the home page or any other page that takes sections, as many times as you like.
Placing a hotspot
- Select the section, click Add block and choose Hotspot.
- Choose the Product it points at.
- Move Horizontal position and Vertical position until the number sits on the product. Horizontal is measured from the left edge of the photo, vertical from the top; 50 and 50 is the center.
Hotspots are numbered in block order, and the list beside the photo uses the same numbers. Drag the blocks to renumber them.
Layout options
On desktop, the photo takes the larger share of the width, with the heading, text and product list beside it. Image position puts the photo on the left or the right. On mobile, the photo comes first and the list follows.
The photo is shown whole, in its own shape. It is never cropped, so a hotspot always stays on the product you placed it on.
Section settings
Select the section in the theme editor to see these settings, in this order.
| Setting | Options | What it does |
|---|---|---|
| Image | Image. | One styled photo that shows several products together. |
| Image position | Left or Right. Default: Left. | Which side the photo sits on, on desktop. |
| Content | ||
| Eyebrow | Text. | A short label above the heading, such as "New in". With Number sections on in theme settings, the section's number is shown before it. |
| Heading | Text. | The section's heading. Select a word and make it italic for emphasis. Leave it empty to show no heading. |
| Heading size | Small, Medium, Large or Extra large. Default: Medium. | How large the heading is set. |
| Text | Formatted text. | A short introduction under the heading. Optional. |
| Color scheme | Color scheme. | Which of your color schemes the section uses. Schemes are edited in theme settings under Colors. |
| Background image | ||
| Image | Image. | An optional image behind the whole section, cropped around its focal point. Text keeps the color scheme's text color, so darken or lighten the image with the overlay until everything reads clearly. |
| Overlay color | Color. Default: #000000. | The color laid over the background image. |
| Overlay opacity | 0% to 90%. Default: 40%. | How strong the overlay is. 0% shows the image untouched. |
| Section spacing | ||
| Top spacing | None, Small, Medium or Large. Default: Medium. | The space above the section, as a share of Space between sections in theme settings. None lets the section touch the one above it. |
| Bottom spacing | None, Small, Medium or Large. Default: Medium. | The space below the section. None lets it touch the one below. |
Blocks
This section is built from one kind of block. Click Add block under the section to add one, and drag blocks to reorder them. The section holds up to 8 blocks.
Hotspot
One numbered point on the photo, linked to a product.
| Setting | Options | What it does |
|---|---|---|
| Product | Product. | The product this hotspot opens. It also appears in the numbered list, with its price. |
| Horizontal position | 0% to 100%. Default: 50%. | How far across the photo the hotspot sits, from the left edge. |
| Vertical position | 0% to 100%. Default: 50%. | How far down the photo the hotspot sits, from the top edge. |
Image sizes
| Image | Recommended | Notes |
|---|---|---|
| Image | 2000 x 2500 px (4:5 portrait), or 2000 x 2000 px | Shown uncropped. A portrait or square photo keeps the section a comfortable height on desktop; a very tall photo makes it taller than the screen. |
Upload JPG or PNG files. Shopify resizes and compresses each image for the customer's screen, so there is no need to make smaller copies yourself.
Tips
- Use a photo where each product is clearly visible and not overlapping the next, so hotspots don't crowd each other.
- Three to five hotspots are plenty. Eight is the limit.
- Place each hotspot on the product itself, not beside it, and keep it away from faces.
- The product card in a hotspot follows your theme settings under Product cards, including the quick add button.