> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/shopables/shopable-image.md).

# Shopable image

**Shopable image** turns a photograph into something shoppers can buy from. You place a hotspot on the picture where a product appears, attach the product to it, and the shopper opens it without leaving the page. It works for the kind of photography that sells a product by showing it in use: a styled interior, a table setting, a full outfit shot. Shoppers meet it in the middle of the homepage or a landing page, where it does what a product row cannot, which is show the product in a real situation.

Each picture is a block, so several shopable photos can sit side by side or scroll as a carousel.

<figure><img src="/files/voogCayir8d7PBtuffT3" alt=""><figcaption></figcaption></figure>

### Where to find it <a href="#where-to-find-it" id="where-to-find-it"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. Open the template where the shopable photo should appear, usually the homepage.
3. Click **Add section** and choose **Shopable image** from the **Shopables** group.
4. Add a block and upload the picture for it.
5. Set the vertical and horizontal position so the hotspot lands on the product, then select that product.
   {% endhint %}

*Result:* the picture renders with its hotspot in place. Check the position at several screen widths, because a crop that moves the product moves it away from the hotspot.

### Section settings <a href="#section-settings" id="section-settings"></a>

#### General settings <a href="#general-settings" id="general-settings"></a>

| Setting           | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Section width** | <p>How far the pictures spread across the screen.</p><ul><li><strong>Stretch width</strong>: the images run close to both screen edges whatever the screen size.</li><li><strong>Fixed width</strong>: the images line up with the page width set in <strong>Theme settings > Layout</strong>, keeping them level with the sections above.</li><li><strong>Full width</strong>: the section fills the whole browser window and resizes with it.</li></ul>                                                                                     |
| **Color scheme**  | The background and text colours of the section. Schemes are defined in **Theme settings > Colors**, and a scheme that contrasts with your photography makes the hotspots easier to see.                                                                                                                                                                                                                                                                                                                                                       |
| **Image ratio**   | <p>The shape every picture is cropped to, so photos from different shoots still line up in a tidy row.</p><ul><li><strong>Adapt to image</strong>: keeps each picture as uploaded, nothing is cut off but the blocks end up different heights.</li><li><strong>Portrait (3:4)</strong>: a tall crop that suits full length and interior shots.</li><li><strong>Square (1:1)</strong>: the most forgiving when photos come from different sources.</li><li><strong>Landscape (4:3)</strong>: a wide crop that keeps the row compact.</li></ul> |
| **Column gap**    | <p>The space between pictures.</p><ul><li><strong>No gap</strong>: the images touch, for a lookbook style grid.</li><li><strong>Small</strong> and <strong>Medium</strong>: keep the pictures separate without wasting width.</li><li><strong>Large</strong>: gives each picture room, best with only two per row.</li></ul>                                                                                                                                                                                                                  |

#### Section header <a href="#section-header" id="section-header"></a>

<table data-search="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Subheading</strong></td><td>A short line above the title, often a label such as <code>Shop the look</code> that tells shoppers the pictures are clickable.</td></tr><tr><td><strong>Heading</strong></td><td>The title shoppers read first, the line that says what these pictures have in common.</td></tr><tr><td><strong>Description</strong></td><td>A sentence under the title. Use it to say that the products can be opened from the picture, since not every shopper expects that.</td></tr><tr><td><strong>Heading size</strong></td><td><p>How large the title is rendered.</p><ul><li><strong>Heading 1</strong>: the biggest, when the pictures are the centrepiece of the page.</li><li><strong>Heading 2</strong>: a middle size that suits most homepages.</li><li><strong>Heading 3</strong>: the smallest, when the section supports the products around it.</li></ul></td></tr><tr><td><strong>Alignment</strong></td><td><p>Where the title and its supporting lines sit above the pictures.</p><ul><li><strong>Left</strong>: lines up with the first picture and reads naturally.</li><li><strong>Center</strong>: balanced over a full row, the common choice.</li><li><strong>Right</strong>: rarely needed, use it to mirror a neighbouring section.</li></ul></td></tr><tr><td><strong>Show view all button</strong></td><td>Adds a button through to the full collection the tagged products come from, for shoppers who want more than what is in the pictures.</td></tr><tr><td><strong>Button label</strong></td><td>The words on that button. Something specific such as <code>Shop the collection</code> sets a clearer expectation than a generic label.</td></tr><tr><td><strong>Button link</strong></td><td>Where that button leads, usually the collection or page the styled products belong to.</td></tr><tr><td><strong>Button type</strong></td><td><p>How much the button stands out from the section.</p><ul><li><strong>Primary</strong>: solid and filled, for the one action you most want taken.</li><li><strong>Outline</strong>: bordered and lighter, so it does not compete with the pictures.</li><li><strong>Link</strong>: plain underlined text, the quietest option.</li></ul></td></tr></tbody></table>

#### Carousel settings <a href="#carousel-settings" id="carousel-settings"></a>

| Setting                       | Description                                                                                                                                              |
| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Items per row on desktop**  | How many pictures sit side by side on a wide screen. Two gives each photo real presence, more turns them into thumbnails where hotspots are hard to hit. |
| **Column gap**                | The space between pictures in the carousel. Tighter gaps read as one lookbook, wider gaps give each photo its own moment.                                |
| **Show navigation**           | Shows the previous and next arrows. Keep them on for desktop, where shoppers have no swipe gesture to reach the pictures off screen.                     |
| **Show navigation in header** | Moves those arrows up beside the title instead of leaving them with the pictures, which keeps them in one predictable place.                             |
| **Show pagination**           | Shows the dots under the row, which tell shoppers how many pictures there are and where they are in the set.                                             |

#### Mobile settings <a href="#mobile-settings" id="mobile-settings"></a>

| Setting                     | Description                                                                                                                              |
| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| **Items per row on mobile** | How many pictures fit across a phone screen. One is usually right, since a hotspot on a half width photo is difficult to tap accurately. |

#### Section padding <a href="#section-padding" id="section-padding"></a>

| Setting    | Description                                                                                          |
| ---------- | ---------------------------------------------------------------------------------------------------- |
| **Top**    | Space added above the section. Increase it when the heading sits too close to the section before it. |
| **Bottom** | Space added below the section. Increase it when the next section crowds the pictures.                |

### Block settings <a href="#block-settings" id="block-settings"></a>

Add one block per shopable picture. The order of the blocks is the order shoppers see.

<figure><img src="/files/JbL3vFlxeMlw5NjPMD7R" alt=""><figcaption></figcaption></figure>

| Setting                 | Description                                                                                                                                                     |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Image**               | The photograph shoppers browse and tap. Choose one where the product is clearly visible, because a hotspot cannot point at something the picture does not show. |
| **Video**               | A clip used in place of the picture, for when movement shows the product better than a still frame.                                                             |
| **Heading**             | A caption on this block, used to name the room, the look, or the occasion the picture shows.                                                                    |
| **Vertical position**   | How far down the picture the hotspot sits. Set it so the marker lands on the product rather than beside it.                                                     |
| **Horizontal position** | How far across the picture the hotspot sits. Check it again after changing **Image ratio**, since a new crop moves the product under the marker.                |
| **Product**             | Which product the hotspot opens. Only tag products that are genuinely in the picture, or shoppers stop trusting the markers.                                    |

### What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* Shoppers see a marker on the picture, and opening it brings up the product attached to it.
* Hotspot positions are set as a proportion of the picture, so changing **Image ratio** or the number of items per row can leave a marker sitting off target.
* A block with no **Product** selected shows a marker that leads nowhere, which reads as a broken picture.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Shopables](/velare/customize-your-pages/shopables.md): the group this section belongs to
* [Shopable video](/velare/customize-your-pages/shopables/shopable-video.md): the same idea built around vertical video
* [Shop by outfit](/velare/customize-your-pages/products/shop-by-outfit.md): a look with its products listed rather than positioned by hand
* [Product cards](/velare/customize-your-pages/product-cards.md) and [Colors](/velare/set-up-your-store/colors.md): where the card look and schemes come from


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/shopables/shopable-image.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.