> For the complete documentation index, see [llms.txt](https://vodoma-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://vodoma-docs.boostheme.com/dynamic-sections/collection-product/simple-product-slider.md).

# Simple product slider

Easy to display a product slider beside a banner with image and texts.

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHalMwGD9PjzmGN9J8j%2F-MHapGuC8ElPLqgB0tBO%2Fsimple-product-slider.jpeg?alt=media\&token=260a7b0c-1d58-469c-a992-6a0a1aa76962)

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

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHavZB-JgHgVJ-1Agou%2F-MHawKJ7wxxPwU8YQaQq%2Fsimple-product-slider-add-banner.jpeg?alt=media\&token=7c13f9ef-2ef0-465c-9208-be48e484261c)

**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/vodoma/icons> to find and copy the icon HTML class.

### 2. Text box layout:

Align the text box in the horizontal and vertical.

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHavZB-JgHgVJ-1Agou%2F-MHazaWXMksj9Uk7oNvl%2Fsimple-product-slider-text-box-layout.jpeg?alt=media\&token=4b60d313-1938-4848-bdef-e1d2c2791464)

### 3. Background and color

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

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHavZB-JgHgVJ-1Agou%2F-MHazzAm0orKa0R8pcu3%2Fsimple-product-slider-background-color.jpeg?alt=media\&token=10b6bb1d-1d6f-4af6-94cc-6c1fa6562117)

### 4. Font sizes

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

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHavZB-JgHgVJ-1Agou%2F-MHb-NN8LzJfT9xjioM_%2Fsimple-product-slider-font-sizes.jpeg?alt=media\&token=99235e9a-5fce-4d0a-ab84-7313aa41b4e9)

### 5. Gutters

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

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHavZB-JgHgVJ-1Agou%2F-MHb-cybmjc1b3Ivtf8v%2Fsimple-product-slider-gutters-dk.jpeg?alt=media\&token=ab69498c-b73e-42ba-8699-557e267a9313)

![](https://3659370746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFddYUXQFaTvE_hvQho%2F-MHavZB-JgHgVJ-1Agou%2F-MHb-ffUpxA3ZZn9Cudy%2Fsimple-product-slider-gutters-mb.jpeg?alt=media\&token=1e99ed33-9e09-4338-8329-2ad95a802ba1)