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

# Shopable image

**Shoppable Image** is a visual-merchandising section that displays a hero image with interactive hotspots (“pins”) linked to products. It’s ideal for lookbooks, “shop the look”, tutorials, or campaign hero banners.

### Section settings

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FQsoxX6tzgAAoIAOwHM4K%2Fimage.png?alt=media&amp;token=0313547a-abc4-4b79-9f8e-cd93d8087630" alt=""><figcaption></figcaption></figure>

#### General settings

<table><thead><tr><th width="215">Setting</th><th>Descriptio</th></tr></thead><tbody><tr><td><strong>Section width</strong></td><td><p>3 options for container</p><ul><li><strong>Stretch width</strong>: span the section width regardless of screen size.</li><li><strong>Fixed width</strong>: depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li><strong>Full width</strong>: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>Select colors from <strong>Theme settings -> Colors</strong></td></tr><tr><td><strong>Image ratio</strong></td><td><p>The image ratio for the featured images of the blog posts:</p><ul><li><strong>Adapt to image</strong> - Uses the aspect ratio of the images. This prevents the images from being cropped.</li><li><strong>Portrait (3:4)</strong> - Crops the images to use a 3:4 ratio.</li><li><strong>Square</strong> <strong>(1:1)</strong> - Crops the images to use a 1:1 ratio</li><li><strong>Landscape (4:3)</strong> - Crops the images to use a 4:3 ratio</li></ul></td></tr><tr><td><strong>Column gap</strong></td><td><p>4 options for column gap</p><ul><li><strong>No gap</strong></li><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li></ul></td></tr></tbody></table>

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

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Top</strong></td><td>Customize the top margin of the section</td></tr><tr><td><strong>Bottom</strong></td><td>Customize the bottom margin of the section</td></tr></tbody></table>