How to add a product slider to the homepage slider in Supply theme?

Supply is one of the most downloaded free themes from Shopify.

You can make your store look great by configuring a product slider for the two most common configurations:

  • Below the homepage slider
  • Below the header on the homepage, when the slider is disabled

Below the homepage slider

We can use the following manual selector to put the product slider below the homepage slider when there is just one image slider.

#shopify-section-slideshow

Note: This configuration is valid as long as there is just one image slider on the homepage. If there are two or more image sliders, the target must follow the pattern:

#shopify-section-slideshow-N

where N is the index of the image slider starting from 2.

If you want to put the product slider below the second image slider, you have to use this selector:

#shopify-section-slideshow-2

screen42.png

To create the product slider, let's go the app preferences page and let's click on   New product slider at the bottom right corner. 

After that, let's make sure we have selected home page and let's click on  Save and select target. 

In the next window, we need to find an option called   "Use a CSS selector". To make the product slider appear in our desired location, please copy the configuration mentioned above in the Element selector field. 

Don't forget to click on  Save, at the bottom right corner, so that the changes can be applied. 

screen43.png

Once you click on  Save, you'll be redirected to the preferences page for your new slider. There, it is important to add some vertical padding to the slider to avoid cluttering the homepage.

screen33.png

Don't forget to click on save at the bottom right corner. Now you're all set. The product slider will look like the screenshot below:

screen41.png

Below the header on the homepage, when the slider is disabled

In this case, the app configuration is a bit more complicated.

We will use the header as the target element.

#shopify-section-header

screen36.png

Let's go again to the app preferences page and let's click on   New product slider at the bottom right corner. After that, let's make sure we have selected home page and let's click on Save and select target. 

Once thereplease copy the configuration mentioned above in the Element selector field and click on Save, at the bottom right corner. 

screen37.png

After setting the target, we have to centre the slider on the screen by adding a couple of additional styles to the  Product slider box preferences section:

Once you tap on   Advanced style options, you will find the option for Additional styles. Please enter the configuration showed below:

screen39.png

Note that the max-width value may change depending on the theme settings, merchants could edit the index template to change the width.

Let's click again on  Save and now you're all set. The product slider will look like the screenshot below:

screen40.png