> 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.md).

# Shopables

**Shopables** is the group of sections where the media does the selling directly. Instead of a picture beside a product row, the products live inside the image or the video, marked with hotspots a shopper can open on the spot. It suits stores whose products are understood in context: an interior shot with each piece tagged, a styling video with the pieces listed beside it, a campaign photo you can buy from.

Shoppers meet these sections in the middle of the homepage or a landing page, after the hero and usually near the product rows they are meant to feed.

### 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 media should appear, usually the homepage.
3. Click **Add section**.
4. Open the **Shopables** group and choose the section you need.
5. Upload the media, then add a block for each product you want shoppers to be able to open from it.
   {% endhint %}

*Result:* the media renders with its products attached, so shoppers can move from the picture or clip straight to a product.

### Sections in this group <a href="#sections-in-this-group" id="sections-in-this-group"></a>

| Section                                                                    | What it does                                                                                                       | Use it when                                                                   |
| -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------- |
| [Shopable image](/velare/customize-your-pages/shopables/shopable-image.md) | Shows a photo with product hotspots you place by hand, so each item sits exactly where it appears in the picture   | You have one strong photo containing several products worth tagging           |
| [Shopable video](/velare/customize-your-pages/shopables/shopable-video.md) | Shows vertical videos with a product attached to each clip, arranged as a carousel, with an optional sticky player | Your products are best shown in motion, or you are reusing short social video |

### Suggested reading order <a href="#suggested-reading-order" id="suggested-reading-order"></a>

1. Prepare the media first. Both sections depend on photography or footage where the products are genuinely visible, and neither can rescue a picture that does not show them.
2. Read [Shopable image](/velare/customize-your-pages/shopables/shopable-image.md) first. Positioning hotspots by hand is the part most people underestimate, and it has to be checked at every screen size.
3. Read [Shopable video](/velare/customize-your-pages/shopables/shopable-video.md) when you have vertical clips to reuse. Watch the file sizes, since several autoplaying videos in one section is a heavy page.

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

* [Shop by outfit](/velare/customize-your-pages/products/shop-by-outfit.md): a similar idea in the products group, built around a complete look
* [Products](/velare/customize-your-pages/products.md): the plain product rows these sections usually sit beside
* [Video](/velare/customize-your-pages/banners/video.md): for footage that is watched rather than shopped
* [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.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.