Where to find it
In Online Store → Themes, open the unpublished theme editor, choose a compatible template, then Add section → Shoppable image. Availability follows the selected template and section group.
This section is not available in the Header group.
Set it up
- Select the scene Image and optional Mobile image, then choose desktop/mobile ratios and crop positions.
- Add a Product hotspot block for each item and select the actual Product. A custom card image is optional.
- Set its Accessible label and desktop horizontal/vertical position, then choose its panel opening direction.
- Configure the marker style and product panel dimensions. Decide whether panels show vendor and quantity.
- Set mobile coordinates against the final mobile crop and test every hotspot's product and variant controls.
Main settings to review
| Setting | Choices or control |
|---|---|
| Image | Choose an image |
| Mobile image | Choose an image |
| Marker style | Plus · Number · Dot |
| Product panel width | 300–520 px; step 20 |
| Show quantity | On / Off |
| Mobile image ratio | Portrait (4:5) · Square (1:1) · Landscape (4:3) · Wide (16:9) |
Blocks and content
This section allows up to 8 direct blocks. Nested blocks have their own parent-specific choices and limits.
- Product hotspot: configure this inside the section. Its available controls are listed below.
Content and media
- Use a scene that clearly shows the linked products, around 1600–2400 px wide as a starting point for a large feature.
- The image does not detect items automatically. Every product and marker must be selected and positioned.
Check the mobile layout
- Mobile coordinates are independent. Choose opening directions that keep the product panels inside the screen and test tapping one panel at a time.
Common questions and fixes
- A marker has no useful product details: select a valid available Product in that block.
- A marker points at the wrong object: review its coordinates after changing image ratio or crop.
- You need information-only panels: use Interactive image.
Full control reference
Names, choices, ranges and defaults below are read from this version of the theme. Defaults are starting examples, not promises about your business. Some controls appear only for the matching layout. Block contents and preset starting values can differ from the base defaults.
All section controls (36)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Width / Section width | Page width · Full width · Custom width | Default: Page width. |
| Width / Custom width | 50–100 %; step 5 | Default: 80. Percentage of screen width. This control appears only when the relevant layout or related option is selected. |
| Layout / Content width | 50–100 %; step 5 | Default: 100. 100% uses the selected width. |
| Layout / Color scheme | Choose a color scheme | Default: background. |
| Layout / Top padding | 0–160 px; step 4 | Default: 64. |
| Layout / Bottom padding | 0–160 px; step 4 | Default: 64. |
| Layout / Mobile padding top | 0–100 px; step 4 | Default: 40. |
| Layout / Mobile padding bottom | 0–100 px; step 4 | Default: 40. |
| Scene image / Image | Choose an image | Default: Not set. |
| Scene image / Mobile image | Choose an image | Default: Not set. Uses the desktop image when left blank. |
| Scene image / Image alt text | Text | Default: Not set. Describe informative images. Leave blank for decorative images. |
| Scene image / Desktop image ratio | Panoramic (21:9) · Wide (16:9) · Landscape (3:2) · Landscape (4:3) · Square (1:1) | Default: Wide (16:9). |
| Scene image / Mobile image ratio | Portrait (4:5) · Square (1:1) · Landscape (4:3) · Wide (16:9) | Default: Portrait (4:5). |
| Scene image / Desktop image position | Top left · Top center · Top right · Center left · Center · Center right · Bottom left · Bottom center · Bottom right | Default: Center. |
| Scene image / Mobile image position | Top left · Top center · Top right · Center left · Center · Center right · Bottom left · Bottom center · Bottom right | Default: Center. |
| Scene image / Image corner radius | 0–40 px; step 2 | Default: 12. |
| Product hotspots / Marker style | Plus · Number · Dot | Default: Plus. |
| Product hotspots / Marker size | 32–60 px; step 2 | Default: 42. |
| Product hotspots / Marker background | Choose a color | Default: #ffffff. |
| Product hotspots / Marker icon | Choose a color | Default: #222222. |
| Product hotspots / Product panel width | 300–520 px; step 20 | Default: 380. |
| Product hotspots / Gap from marker | 4–32 px; step 2 | Default: 10. |
| Product hotspots / Panel corner radius | 0–32 px; step 2 | Default: 12. |
| Product hotspots / Show vendor | On / Off | Default: Off. |
| Product hotspots / Show quantity | On / Off | Default: Off. |
| Content / Eyebrow | Text | Default: Shop the scene. |
| Content / Heading | Formatted inline text | Default: Designed to be worn together. |
| Content / Description | Formatted text | Default: Discover every product in the image and add it directly to your cart.. |
| Content / Heading alignment | Left / Center / Right | Default: left. |
| Media / Section background image | Choose an image | Default: Not set. |
| Media / Section background position | Image focal point · Top · Center · Bottom | Default: Image focal point. This control appears only when the relevant layout or related option is selected. |
| Media / Section background behavior | Scroll with section · Fixed to viewport | Default: Scroll with section. This control appears only when the relevant layout or related option is selected. |
| Media / Section background overlay | 0–80 %; step 5 | Default: 0. This control appears only when the relevant layout or related option is selected. |
| Advanced / Hide on desktop | On / Off | Default: Off. This control appears only when the relevant layout or related option is selected. |
| Advanced / Hide on mobile | On / Off | Default: Off. This control appears only when the relevant layout or related option is selected. |
| Advanced / Section anchor | Text | Default: Not set. Optional. Use a unique name for links that jump to this section. |
Product hotspot block controls (9)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Product | Choose a product | Default: Not set. |
| Custom product image | Choose an image | Default: Not set. Uses the selected product image when left blank. |
| Accessible label | Text | Default: Not set. Leave blank to use the product title. |
| Desktop position / Horizontal position | 0–100 %; step 1 | Default: 35. |
| Desktop position / Vertical position | 0–100 %; step 1 | Default: 45. |
| Desktop position / Panel opening direction | Right · Centered · Left | Default: Right. |
| Desktop position / Panel vertical position | Below marker · Above marker | Default: Below marker. |
| Mobile position / Horizontal position | 0–100 %; step 1 | Default: 35. |
| Mobile position / Vertical position | 0–100 %; step 1 | Default: 45. |