> 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/featured-product-slider.md).
# Featured product slider
**Featured product slider** gives each of a few chosen products a slide of its own, pairing a promotional image with wording and a colour treatment. Instead of a grid where every item is the same size, shoppers see one product at a time, presented the way a campaign page would present it. Use it on the homepage or a landing page for the handful of products a season is built around.
Each slide needs its own photography, so treat this as a section for the products worth shooting for, not a replacement for [Featured collection](/velare/customize-your-pages/products/featured-collection.md).
### Where to find it
{% hint style="success" %}
**Steps:**
1. Go to **Online Store > Themes > Customize**.
2. Open the template where the slider should appear, usually the homepage.
3. Click **Add section** and choose **Featured product slider** from the **Products** group.
4. Add one block per product and select the product in each block.
5. Upload the promotional image for each slide, then set the image ratio and position.
{% endhint %}
*Result:* the products appear one slide at a time, in the order of the blocks, with the image on the side you chose.
### Section settings
#### General settings
| Setting | Description |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Section width** |
How far the slider spreads across the screen.
Stretch width: the slides run close to both screen edges whatever the screen size.
Fixed width: the slides line up with the page width set in Theme settings > Layout, so they match the sections around them.
Full width: the section fills the whole browser window and resizes with it, which suits a campaign feel.
|
| **Color scheme** | The background and text colours of the section as a whole. Schemes are defined in **Theme settings > Colors**, and individual slides can override this with their own scheme. |
#### Section header
| Setting | Description |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Subheading** | A short line above the title, often a campaign or season name that frames the products that follow. |
| **Heading** | The title shoppers read first, the line that says what these products have in common. |
| **Description** | A sentence under the title, useful when the selection needs explaining rather than simply naming. |
| **Heading size** |
How large the title is rendered.
Heading 1: the biggest, when the slider is the centrepiece of the page.
Heading 2: a middle size that suits most placements.
Heading 3: the smallest, when the slider supports the content around it.
|
| **Alignment** |
Where the title and its supporting lines sit above the slides.
Left: lines up with the slide edge and reads naturally.
Center: balanced over a wide slider, the common choice.
Right: use it to lead the eye towards an image placed on the right.
The shape every slide image is cropped to, so slides do not change height as shoppers move between them.
Portrait (3:4): a tall crop that suits fashion and full length shots.
Square (1:1): the most forgiving when photos come from different shoots.
Landscape (4:3): a wide crop that keeps the slider low on the page.
Full screen: the image takes the whole slide area, for the most immersive treatment.
|
| **Image width** | How much of the slide the picture takes, leaving the rest to the wording. Widen it when the photography sells the product, narrow it when the words do. |
| **Image position** | Which side of the wording the picture sits on: **Left** so shoppers see the product first, **Right** so they read the message first. |
| **Enable image link** | Makes the picture itself clickable through to the product page. Turn it on, because shoppers instinctively click a product photo before they look for a button. |
#### Carousel settings
| Setting | Description |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| **Show navigation** | Shows the previous and next arrows. Keep them on for desktop, where shoppers have no swipe gesture to reach the other products. |
| **Show pagination** | Shows the dots under the slider, which tell shoppers how many products are featured and where they are in the list. |
| **Enable autoplay** | Moves through the slides on its own. Leave it off here, since each slide carries a product shoppers may want time to consider. |
#### 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 slider. |
#### Section divider
| Setting | Description |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Show divider** | Draws a thin horizontal line at the section edge, which helps shoppers see where one product row ends and the next begins when both use the same colour scheme. |
#### Block settings
Add one block per featured product. The order of the blocks is the order of the slides.
| Setting | Description |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Product** | Which product this slide is about. Its title, price, and link come from the product itself, so the slide stays correct when you edit it in the admin. |
| **Image** | The promotional picture for this slide, which replaces the product's own photo. Use a styled or lifestyle shot, since a plain catalogue image wastes the space this section gives it. |
| **Color scheme** | The colours used for the wording panel on this slide, set per slide so each product can carry its own mood while the section keeps one background. |
| **Overlay opacity** | How strongly the wording panel is shaded over the picture. Raise it when the text is competing with a busy photo, lower it when the panel is hiding the product. |
| **Subheading** | A short line above the main message on this slide, for context such as the range or material. |
| **Heading** | The main message shown on this slide. Use it to name the product, highlight its key benefit, or introduce the promotion in a clear, concise line. |
### What changes on the storefront
* Shoppers see one featured product at a time, with your promotional image rather than the product's catalogue photo.
* Each slide can use its own colour scheme, so the section changes mood as shoppers move through it.
* With **Enable image link** off, the picture is decoration only and shoppers have to find another way through to the product.
### Related pages
* [Products](/velare/customize-your-pages/products.md): the group this section belongs to
* [Featured collection](/velare/customize-your-pages/products/featured-collection.md): the grid alternative, for showing many products rather than a few
* [Shop by outfit](/velare/customize-your-pages/products/shop-by-outfit.md): for a look made up of several products rather than one hero item
* [Colors](/velare/set-up-your-store/colors.md) and [Product page](/velare/customize-your-pages/product-page.md): where the schemes come from and where each slide leads
---
# 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/featured-product-slider.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.