> 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/storytelling/gallery-image.md).

# Gallery image

**Gallery image** shows a row of pictures that shoppers can swipe through or watch scroll past on their own. It is the section for the photography that sells the brand rather than a single product: customer photos, styling shots, behind the scenes, or your social feed. Each picture can carry its own link, so a shopper who likes what they see can go straight to the collection or product behind it.

Shoppers usually meet it low on the home page, after the product rows, where it works as visual proof that real people use what you sell.

<figure><img src="/files/pe18qRq7uLJt7aJq4uXk" 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 you want the gallery on.
3. Click **Add section** and choose **Gallery image** from the **Storytelling** group.
4. Add one **Image** block per picture, then set **Type** to **Carousel** or **Marquee**.
   {% endhint %}

*Result:* the pictures render in a row, either as a carousel shoppers control or as a marquee that moves by itself.

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

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

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Section width</strong></td><td><p>How much of the screen the row of pictures is allowed to take.</p><ul><li><strong>Stretch width</strong>: the row spreads to the browser width, so more pictures fit before the edge.</li><li><strong>Fixed width</strong>: the row lines up with the rest of your pages, using the width set in <strong>Theme settings > Layout</strong>.</li><li><strong>Full width</strong>: the pictures run edge to edge, which suits a marquee that should feel endless.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>The background and text colors around the gallery. Schemes are defined in <strong>Theme settings > Colors</strong>, so editing one there restyles every section built on it.</td></tr><tr><td><strong>Image ratio</strong></td><td><p>The shape every picture is cropped to, so a mix of uploads still lines up neatly.</p><ul><li><strong>Adapt to image</strong>: no cropping, each picture keeps its own shape and the row has an uneven edge.</li><li><strong>Portrait</strong>: a 3:4 crop, taller, closest to how photos come off a phone.</li><li><strong>Square</strong>: a 1:1 crop, the safe choice for social photography.</li><li><strong>Landscape</strong>: a 4:3 crop, wider, better for scenes than for people.</li></ul></td></tr><tr><td><strong>Image width</strong></td><td>How wide each picture is on desktop, which is what decides how many fit on screen at once.</td></tr><tr><td><strong>Mobile image width</strong></td><td>The same on phones. Narrower values let shoppers glimpse the next picture, which invites them to swipe.</td></tr><tr><td><strong>Type</strong></td><td><p>How the row behaves.</p><ul><li><strong>Carousel</strong>: shoppers move it themselves with arrows or a swipe, so they can stop on a picture they like.</li><li><strong>Marquee</strong>: the row drifts past on its own, better as a decorative band than as something to click.</li></ul></td></tr><tr><td><strong>Show blurred background</strong></td><td>Fills the empty space around a picture with a blurred copy of itself, so pictures that do not fill their frame still look finished instead of sitting on a bare panel.</td></tr><tr><td><strong>Show instagram icon on hover</strong></td><td>Puts a small Instagram mark over a picture when the cursor rests on it, signalling that the photo comes from social and that clicking leads somewhere.</td></tr></tbody></table>

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

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Subheading, Heading, Description</strong></td><td>The three lines above the pictures: a short label for context, the headline shoppers read first, and a sentence saying whose photos these are or how to be featured. Leave a field empty to drop that line.</td></tr><tr><td><strong>Heading size</strong></td><td><p>How large that headline appears.</p><ul><li><strong>Heading 1</strong>: use it when the gallery is the point of the page.</li><li><strong>Heading 2</strong>: the safe middle choice.</li><li><strong>Heading 3</strong>: keeps the gallery quietly secondary.</li></ul></td></tr><tr><td><strong>Alignment</strong></td><td><p>Which edge the heading and description line up with.</p><ul><li><strong>Left</strong>: reads naturally with a full sentence of description.</li><li><strong>Center</strong>: balances a wide row of pictures.</li><li><strong>Right</strong>: rarely needed, use it to mirror a neighbouring section.</li></ul></td></tr></tbody></table>

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

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Show navigation</strong></td><td>Adds the back and next arrows, which tell desktop shoppers there is more to see beyond the edge of the screen.</td></tr><tr><td><strong>Show pagination</strong></td><td>Adds the dots under the row, so shoppers know how far through the gallery they are.</td></tr><tr><td><strong>Column gap</strong></td><td><p>The space between one picture and the next.</p><ul><li><strong>No gap</strong>: the pictures meet edge to edge, reading as one mosaic.</li><li><strong>Small</strong>: a thin line of separation, still dense.</li><li><strong>Medium</strong>: each picture reads as its own photo.</li><li><strong>Large</strong>: airy, best when there are only a few pictures.</li></ul></td></tr><tr><td><strong>Items per row on desktop/mobile</strong></td><td>How many pictures share the screen at once on each device. Fewer means larger photos, more means shoppers see the breadth of the gallery.</td></tr></tbody></table>

#### Marquee settings <a href="#marquee-settings" id="marquee-settings"></a>

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Direction</strong></td><td>Which way the pictures travel across the screen. Match it to the direction the page reads in so the motion feels natural.</td></tr><tr><td><strong>Speed</strong></td><td>How fast they travel. Slow enough that a shopper can take a picture in, since a fast marquee is decoration rather than content.</td></tr><tr><td><strong>Space between items</strong></td><td>The gap between pictures as they scroll past. Widen it when the photos start to read as one continuous strip.</td></tr></tbody></table>

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

| Setting    | Description                                                                                      |
| ---------- | ------------------------------------------------------------------------------------------------ |
| **Top**    | Adds space above the gallery. Increase it when the pictures sit too close to the section before. |
| **Bottom** | Adds space below the gallery. Increase it when the next section starts too abruptly.             |

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

| Setting          | Description                                                                                                  |
| ---------------- | ------------------------------------------------------------------------------------------------------------ |
| **Show divider** | Draws a thin line between this section and the one above it, which helps when both share a background color. |

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

#### Image <a href="#image" id="image"></a>

| Settings  | Description                                                                                                                            |
| --------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| **Image** | The photograph shown in this slot, sharpest at ***(303px x 303px recommended)***.                                                      |
| **Link**  | Where a click on this picture leads, usually the product or collection shown in it. Leave it blank and the picture is decorative only. |

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

* Each block is one picture, in the order the blocks are listed in the sidebar.
* Only one set of motion settings applies at a time. **Carousel settings** are ignored when **Type** is **Marquee**, and the other way round.
* Pictures with no link are not clickable, so a gallery meant to drive traffic needs a link on every block.

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

* [Storytelling](/velare/customize-your-pages/storytelling.md): the group this section belongs to
* [Scrolling text](/velare/customize-your-pages/storytelling/scrolling-text.md): the text version of the same marquee behaviour
* [Social media](/velare/set-up-your-store/social-media.md): where your social accounts are set up
* [Colors](/velare/set-up-your-store/colors.md) and [Layout](/velare/set-up-your-store/layout.md): where the color schemes and the fixed page width 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/storytelling/gallery-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.