Simple product slider

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

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

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.

Note: in the heading and subheading settings, you can insert the[price]variable to display the price that is configured in the below setting.

• 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 to find and copy the icon HTML class.

2. Text box layout:

Align the text box in the horizontal and vertical.

3. Background and color

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

4. Font sizes

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

5. Gutters

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