# Simple product slider

![](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MKn_61v28FKIbEvTPbH%2F-MKn_DbhR14Nv4Qt9ulA%2Fsimple-product-slider.jpeg?alt=media\&token=50dfd2a4-b256-4f10-a10b-200d0105e0f1)

## 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](https://beloria-docs.boostheme.com/tips#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. 

![](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MKn_61v28FKIbEvTPbH%2F-MKn_LZKJhIW-OkA1ndM%2Fsimple-product-slider-add-banner.jpeg?alt=media\&token=49986bd3-59eb-4b0e-89c9-7c373d9a6907)

**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.

![](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MKn_61v28FKIbEvTPbH%2F-MKn_ZZtPEE1kvJpOrIq%2Fsimple-product-slider-text-box-layout.jpeg?alt=media\&token=a364ebb4-90ae-42c9-ba90-75593087863a)

### 3. Background and color

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

![](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MKn_61v28FKIbEvTPbH%2F-MKn_fbhQWKW9qSnS0Dv%2Fsimple-product-slider-background-color.jpeg?alt=media\&token=d96c0a6b-e1ab-4471-a17c-7174bed263fc)

### 4. Font sizes

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

![](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MKn_61v28FKIbEvTPbH%2F-MKn_krcCTQ6mhXoikGO%2Fsimple-product-slider-font-sizes.jpeg?alt=media\&token=2980ee38-712a-4187-b143-51c9308d1252)

### 5. Gutters

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

![](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MKn_61v28FKIbEvTPbH%2F-MKn_rIEag2Y1QweTdPa%2Fsimple-product-slider-gutters-dk.jpeg?alt=media\&token=6a6117d1-8a82-4bf5-ba89-f3e280f487f1)

![](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MKn_61v28FKIbEvTPbH%2F-MKn_tx0940W1kuetCAV%2Fsimple-product-slider-gutters-mb.jpeg?alt=media\&token=ee926f4d-fdaa-4526-bd6e-c2d3a96894f8)