> 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/collections/collection-highlights.md). # Collection highlights **Collection highlights** presents your categories one at a time: a list of collection names on one side, a large image of the selected one on the other. As a shopper hovers or clicks a name, the image and its wording change in place, so browsing categories feels like turning pages rather than scanning a grid. Shoppers meet it on the homepage or a landing page, usually as the editorial moment between the hero banner and the first product row. Use it when you have a handful of collections that each deserve a full picture. When you have many categories of equal weight, a plain grid such as [Collection list](/velare/customize-your-pages/collections/collection-list.md) will serve shoppers better.
### Where to find it {% hint style="success" %} **Steps:** 1. Go to **Online Store > Themes > Customize**. 2. Open the template where the highlights should appear, usually the homepage. 3. Click **Add section** and choose **Collection highlights** from the **Collections** group. 4. Add one block per collection, and select the collection in each block. 5. Upload a thumbnail image for each block, then set the trigger behaviour and image position. {% endhint %} *Result:* the collection names are listed as tabs, and the panel shows the image and wording of whichever one is active. ### Section settings #### General settings
| Setting | Description | | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Section width** |

How far the panel spreads across the screen.

| | **Color scheme** | The background and text colours of the section. Schemes are defined in **Theme settings > Colors**, and a contrasting scheme here helps the panel read as a feature rather than another product row. | #### Section header
| Setting | Description | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Subheading** | A short line above the title, often a label such as `Shop by category` that frames what the panel is for. | | **Heading** | The title shoppers read first, the line that explains why these particular collections are grouped together. | | **Description** | A sentence under the title, useful when the grouping needs justifying, for example a seasonal edit or a new range. | | **Heading size** |

How large the title is rendered.

| | **Alignment** |

Where the title and its supporting line sit above the panel.

| #### Tab settings
| Setting | Description | | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Image position** | Which side of the collection names the picture sits on: **Left** puts the image first so shoppers see the category before they read it, **Right** puts the names first so they read then look. | | **Image ratio** |

The shape every collection image is cropped to, so switching between collections does not make the panel jump in height.

| | **Prefix header** | Puts a marker in front of each collection name: **Ordinal number** counts them, which suggests a sequence to work through, **Icon** shows a symbol instead, which suits categories with no natural order. | | **Trigger behavior** | What makes the panel switch collections: **Hover** changes it as the shopper moves the pointer over a name, which feels quick on desktop, **Click** waits for a deliberate choice and is the safer option on touch screens. | | **Enable autoplay** | Cycles through the collections on its own, so shoppers see every category without touching anything. Turn it off when the images carry text that needs reading. | #### Section padding
| 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 panel. | #### Section divider
| Settings | Description | | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | | **Show divider** | Draws a thin horizontal line at the section edge, useful when this panel and its neighbour share a background colour and run into each other. | ### Block settings Add one block per collection you want in the panel. The order of the blocks is the order of the names shoppers see.
| Settings | Description | | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Collection** | Which category this entry opens. Shoppers who click through land on that collection page, so pick one that is actually stocked. | | **Image** | The picture shown in the panel while this entry is active, sharpest at ***(330px x 520px recommended)***. It overrides whatever image the collection carries in your admin. | | **Heading, Text** | The wording shown beside the picture: the name shoppers read for this entry and a line of supporting detail. Use it to say something the collection title cannot, such as how many styles it holds. | | **Heading size** | Sets how prominent the heading appears. Choose from **H2** to **H6** to match the visual hierarchy of the section. | | **Icon** | An optional image shown with the entry. Choose a simple icon that helps shoppers identify the collection quickly. | ### What changes on the storefront * Shoppers see one collection image at a time, and switch between categories by hovering or clicking the names beside it. * Each entry links to its collection page, so the panel doubles as navigation rather than decoration. * With **Enable autoplay** on, the panel keeps moving while shoppers read, which can pull a picture away mid sentence. ### Related pages * [Collections](/velare/customize-your-pages/collections.md): the group this section belongs to * [Collection tabs](/velare/customize-your-pages/collections/collection-tabs.md): tabs that switch between collections while showing their products * [Collection list](/velare/customize-your-pages/collections/collection-list.md): the plain grid alternative, for many categories of equal weight * [Colors](/velare/set-up-your-store/colors.md) and [Typography](/velare/set-up-your-store/typography.md): where the schemes and font presets 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/collections/collection-highlights.md?ask=&goal= ``` `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.