> For the complete documentation index, see [llms.txt](https://beloria-docs.boostheme.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://beloria-docs.boostheme.com/dynamic-sections/collection-product/simple-product-slider.md).

# Simple product slider

![](/files/-MKn_DbhR14Nv4Qt9ulA)

## Open the existing section

1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Simple product slider** section.

## Add a Simple product slider section to your home page

1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click **Add section** > **Simple product slider** > **Add**.
4. Use the settings to customize your **Simple product slider** section.
5. Click **Save**.

## Settings

### Background

* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
* **Background image:** pick or upload your image to display it as the background image.
* **Background size:** set the size of the background image.
* **Background style:** set the style of the background image.

### Section gutters

* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.

### General settings

* **Heading:** add the section title.
* **Subheading:** add section subtitle.
* **Collection:** pick a collection to display its products.
* **Wide display:** turn on/off displaying the section in the wider layout.

### Slider settings

* **Enable center focus effect:** display the product slider and focus on the middle product and the slider will be shown in one row with item size is **Large**.
* **The number of rows:** specify the number of rows in a slide. This setting will be ignored if you enable **the center focus effect**.
* **Navigation type:** specify the way to show the navigation slider. Dots or arrows.
* **Autoplay:** run slider automatically.
* **Autoplay Speed in seconds:** adjust the time between the slide transition.

### Product item

Please refer to [this guide](/tips.md#product-item-settings) for more details.

### Banner column settings

* **Enable:** turn on/off the banner column.
* **Banner width column:** adjust the banner column's width. The width of the product slider will be recalculated base on this setting.
* **Position:** set the position to display the banner column. Left or right of the product slider.

## Add/Edit/Remove a banner

All banners are shown in the banner column. Scroll down to the bottom, you will see an **Add banner** button, click this button to add a new banner. Or you can click one of the available banners to edit/remove it and drag/drop banners to rearrange them. 

![](/files/-MKn_LZKJhIW-OkA1ndM)

**Banner settings:**

### 1. General settings:

* Image: pick or upload your image.
* Heading: add the heading in the banner.
* Subheading. add the subheading in the banner.

{% hint style="info" %}
Note: in the heading and subheading settings, you can insert the`[price]`variable to display the price that is configured in the below setting. 
{% endhint %}

* Price: add your price that is shown in the heading or subheading.
* Shop button text: add your text to display it in a button.
* Button URL: pick an URL for the button.
* Button style: pick a button style.
* Icon class: add HTML class of the icon you want to insert to the button. You can go to[ https://boostheme.com/beloria/icons](https://boostheme.com/beloria/icons) to find and copy the icon HTML class.

### 2. Text box layout:

Align the text box in the horizontal and vertical.

![](/files/-MKn_ZZtPEE1kvJpOrIq)

### 3. Background and color

Configure the background color of the text box, and text color of heading, subheading, price.

![](/files/-MKn_fbhQWKW9qSnS0Dv)

### 4. Font sizes

Configure the font sizes of heading, subheading, price, and button on the desktop, tablet, and mobile screens.

![](/files/-MKn_krcCTQ6mhXoikGO)

### 5. Gutters

Adjust the top and bottom gutters of heading, subheading, and button on desktop, tablet, and mobile screens.

![](/files/-MKn_rIEag2Y1QweTdPa)

![](/files/-MKn_tx0940W1kuetCAV)