> 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/products/shop-by-outfit.md).

# Shop by outfit

**Shop by outfit** shows a complete look as a photo or a short video, with the products that make it up attached to it as hotspots. Shoppers see the styling first and the individual items second, which is how people actually decide when they are buying clothing, furniture, or anything else bought as a set. It usually sits in the middle of the homepage or a landing page, where it turns one inspiring picture into several product views.

Each outfit is a block, so you can run a few looks side by side and let shoppers move between them.

<figure><img src="/files/Ji3dZqgIi9429in8JwTm" 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 looks should appear, usually the homepage.
3. Click **Add section** and choose **Shop by outfit** from the **Products** group.
4. Add one block per look, and choose whether it uses an image or a video.
5. Upload the media, then select the products that appear in that look.
   {% endhint %}

*Result:* each look is shown with its products attached, so shoppers can go from the styling to any individual item.

### 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 looks spread across the screen.</p><ul><li><strong>Stretch width</strong>: the media runs close to both screen edges whatever the screen size.</li><li><strong>Fixed width</strong>: the looks 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 darker scheme here helps styling photography stand out from a white page.                                                                                                                                                                                                                                                                   |

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

| Setting                  | Description                                                                                                                                                                                                                                                                                                                      |
| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Heading**              | The title shoppers read first, the line that says what these looks are, for example `Wear it together`.                                                                                                                                                                                                                          |
| **Description**          | A sentence under the title, useful for the occasion or season the looks were styled for.                                                                                                                                                                                                                                         |
| **Heading size**         | <p>How large the title is rendered.</p><ul><li><strong>Heading 1</strong>: the biggest, when the looks 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 looks support the products above them.</li></ul> |
| **Alignment**            | <p>Where the title and description sit above the looks.</p><ul><li><strong>Left</strong>: lines up with the first look 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>      |
| **Show view all button** | Adds a button through to the full collection these looks come from, for shoppers who want more than the styled selection.                                                                                                                                                                                                        |

#### Content settings <a href="#content-settings" id="content-settings"></a>

| Setting                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Image ratio**              | <p>The shape every outfit image is cropped to, so looks shot at different sizes 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 looks end up different heights.</li><li><strong>Portrait</strong>: a tall 3:4 crop, the natural choice for full length styling shots.</li><li><strong>Square</strong>: a 1:1 crop, the most forgiving when photos come from different shoots.</li><li><strong>Landscape</strong>: a wide 4:3 crop that keeps the row compact.</li></ul> |
| **Video auto play**          | Starts video looks playing as soon as the page loads, with no click needed. It brings the section to life, and it also loads every clip whether shoppers watch or not.                                                                                                                                                                                                                                                                                                                                                                                      |
| **Products to show**         | How many of the products attached to a look are listed with it. Keep it to the pieces that actually make the outfit, since a long list turns styling back into a catalogue.                                                                                                                                                                                                                                                                                                                                                                                 |
| **Items per row on desktop** | How many looks sit side by side on a wide screen, from 2 to 4. Two gives each look real presence, four turns them into thumbnails.                                                                                                                                                                                                                                                                                                                                                                                                                          |
| **Column gap**               | <p>The space between looks.</p><ul><li><strong>No gap</strong>: the looks touch, for a lookbook style grid.</li><li><strong>Small</strong> and <strong>Medium</strong>: keep the looks separate without wasting width.</li><li><strong>Large</strong>: gives each look room, best with only two per row.</li></ul>                                                                                                                                                                                                                                          |

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

| Setting                       | Description                                                                                                                                  |
| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| **Show navigation**           | Shows the previous and next arrows. Keep them on for desktop, where shoppers have no swipe gesture to reach the looks off screen.            |
| **Show navigation in header** | Moves those arrows up beside the title instead of leaving them with the looks, which keeps them in one predictable place as shoppers scroll. |
| **Show pagination**           | Shows the dots under the row, which tell shoppers how many looks 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 looks fit across a phone screen. One is usually right here, since styling photography loses its point at thumbnail size. |

#### 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 looks.                   |

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

<table><thead><tr><th width="213">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Show divider</strong></td><td>Draws a thin horizontal line at the section edge, useful when this section and its neighbour share a background colour and run into each other.</td></tr></tbody></table>

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

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

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

| Setting         | Description                                                                                                                                                        |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Media type**  | Whether this look is presented as a still image or as a video. Video suits movement and fabric, a still suits detail and colour.                                   |
| **Image**       | The styling photograph for this look, used when the media type is set to image. Show the whole outfit, since shoppers judge the products by how they sit together. |
| **Video local** | A clip uploaded to your Shopify files, used in place of the image. Keep it short, because it can start on its own when **Video auto play** is enabled.             |
| **Product**     | The products that make up this look. These are what shoppers can open from the picture, so include the pieces that are actually for sale in it.                    |

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

* Shoppers see a styled look and can move from it to any of the products attached to it, without hunting through a collection.
* With **Video auto play** on, every video look begins playing as the page loads, which adds weight to the page on slower connections.
* A look with no products attached is just a picture, so shoppers have nothing to act on.

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

* [Products](/velare/customize-your-pages/products.md): the group this section belongs to
* [Shopable image](/velare/customize-your-pages/shopables/shopable-image.md) and [Shopable video](/velare/customize-your-pages/shopables/shopable-video.md): the shopable media sections, where hotspots are positioned by hand
* [Featured collection](/velare/customize-your-pages/products/featured-collection.md): a plain product row, when styling is not the point
* [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/products/shop-by-outfit.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.