Simple product slider

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

Open the existing section

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

Add a Simple product slider section to your home page

From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit and click Customize.
Click Add section > Simple product slider > Add.
Use the settings to customize your Simple product slider section.
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 to 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 the HTML class of the icon you want to insert to the button. You can go to https://boostheme.com/woodstock/icons to find and copy the icon HTML class.