> For the complete documentation index, see [llms.txt](https://utd-bv.gitbook.io/manual-shopify-theme-ultra/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://utd-bv.gitbook.io/manual-shopify-theme-ultra/ultra-sections/sections-and-snippets/featured-products.md).

# Featured products

In this section, you can show products in a slideshow for your customers. You can change the count of products per row: 3, 4 or 5.

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/lX74zR9gJPppEqQzxJZN/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA_%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0_2024-03-12_%D0%B2_14.47.46.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/fMOUwFVOeK5OClFXXSyL/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA_%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0_2024-03-12_%D0%B2_14.48.20.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/SXwFiNvI22meyrJbnssd/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA_%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0_2024-03-12_%D0%B2_14.49.02.png" alt=""><figcaption></figcaption></figure>

## **Adding a section**

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/AGEb0bhqIy3SrHRpMyjA/Untitled.png" alt=""><figcaption></figcaption></figure>

In order to add a section, you need to go to **`Customizer`** → **`Add Section`** → **`Featured products`**.

## **Section settings**

### General

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/llxmBOiGjxqLKoN4b26t/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA_%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0_2024-03-08_%D0%B2_15.39.09.png" alt=""><figcaption></figcaption></figure>

1. **`Heading`** - the setting allows you to add a section title;
2. **`Products`** - the setting is responsible for selecting products to display. **Limit: 12 products**;
3. **`Layout`** - setting allows you to change the number of displayed cards on the **Desktop**. The values are 3, 4, 5;

### Banner

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/Wem1Ue9lz1UsJTLE5Thk/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA_%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0_2024-03-08_%D0%B2_15.40.02.png" alt=""><figcaption></figcaption></figure>

1. **`Image`** - the setting allows you to add an image to the banner;
2. **`Heading`** - the setting allows you to add heading text to the banner;
3. **`Subheading`** - the setting allows you to add subheading text to the banner;
4. **`Button label`** - the setting allows you to add a button text (required for displaying the button);
5. **`Button link`** - the setting allows you to add a button link (required for displaying the button);

### Colors

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/NBpbofMobPh0Pnku4ZBs/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA_%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0_2024-03-08_%D0%B2_15.42.49.png" alt=""><figcaption></figcaption></figure>

1. **`Text color`** - the setting allows you to set the color for the text;
2. **`Overlay color`** - the setting allows you to set the color for overlaying the background for the banner;
3. **`Button color`** - the setting allows you to set the color for the button text;
4. **`Button background`** - the setting allows you to set the color for the button background;
5. **`Button border`** - the setting allows you to set the color for the button border;
6. **`Button color (hover)`** - the setting allows you to set the color for the button text on hover;
7. **`Button background (hover)`** - the setting allows you to set the color for the button background on hover;
8. **`Button border (hover)`** - the setting allows you to set the color for the button border on hover;

### Layout

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/mI8d3cdngaClOrDHfH2o/Untitled%201.png" alt=""><figcaption></figcaption></figure>

1. **`Container width`** - a container width of the section. If the “Inherit” value is selected then the container width is based on the group 'Layout' settings in the Theme settings;
2. **`Desktop offset top`** - the **top** indent of the section on the **desktop**;
3. **`Desktop offset bottom`** - the **bottom** indent of the section on the **desktop**;
4. **`Mobile offset top`** - the **top** indent of the section on the **mobile**;
5. **`Mobile offset bottom`** - the **bottom** indent of the section on the **mobile**.