# 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://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2F3DSOtmWHyOAMp4Yl3qhM%2F%25D0%25A1%25D0%25BD%25D0%25B8%25D0%25BC%25D0%25BE%25D0%25BA_%25D1%258D%25D0%25BA%25D1%2580%25D0%25B0%25D0%25BD%25D0%25B0_2024-03-12_%25D0%25B2_14.47.46.png?alt=media&#x26;token=3e224902-79da-4961-aa77-38c3429342a8" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FBr95fjPoMiHGPEsLs7dO%2F%25D0%25A1%25D0%25BD%25D0%25B8%25D0%25BC%25D0%25BE%25D0%25BA_%25D1%258D%25D0%25BA%25D1%2580%25D0%25B0%25D0%25BD%25D0%25B0_2024-03-12_%25D0%25B2_14.48.20.png?alt=media&#x26;token=61d3d1fa-2705-41ef-a17e-81c0278e2dc7" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FG9L0KFTWSeUd6ynB7Jvy%2F%25D0%25A1%25D0%25BD%25D0%25B8%25D0%25BC%25D0%25BE%25D0%25BA_%25D1%258D%25D0%25BA%25D1%2580%25D0%25B0%25D0%25BD%25D0%25B0_2024-03-12_%25D0%25B2_14.49.02.png?alt=media&#x26;token=01355495-8a9c-4b0e-8bee-df0ba315cae5" alt=""><figcaption></figcaption></figure>

## **Adding a section**

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FnMW36s4PWlUVZWjwspr7%2FUntitled.png?alt=media&#x26;token=35868040-6fa4-41a0-a6cb-57ff7794a0c9" 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://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FpbXQxM6zmkfmitsUGrd0%2F%25D0%25A1%25D0%25BD%25D0%25B8%25D0%25BC%25D0%25BE%25D0%25BA_%25D1%258D%25D0%25BA%25D1%2580%25D0%25B0%25D0%25BD%25D0%25B0_2024-03-08_%25D0%25B2_15.39.09.png?alt=media&#x26;token=8a52ef7b-1712-43a0-ad08-8dd2aaa97dee" 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://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FRWjHG7yB4H1kFqktb99I%2F%25D0%25A1%25D0%25BD%25D0%25B8%25D0%25BC%25D0%25BE%25D0%25BA_%25D1%258D%25D0%25BA%25D1%2580%25D0%25B0%25D0%25BD%25D0%25B0_2024-03-08_%25D0%25B2_15.40.02.png?alt=media&#x26;token=52e4bd3a-c405-4c6c-afdf-d829f6a64621" 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://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2Fcj0P9tNK3vWsJJmTt9Ex%2F%25D0%25A1%25D0%25BD%25D0%25B8%25D0%25BC%25D0%25BE%25D0%25BA_%25D1%258D%25D0%25BA%25D1%2580%25D0%25B0%25D0%25BD%25D0%25B0_2024-03-08_%25D0%25B2_15.42.49.png?alt=media&#x26;token=109d3cf5-611f-40dd-bf76-e166b2d4d683" 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://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2Fhbn4H4n55xohBeyQXagv%2FUntitled%201.png?alt=media&#x26;token=3a0aeb60-861d-4351-8026-b5e5040c6ce0" 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**.