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

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

You can make your store look great by configuring a product slider below the homepage slider.

We can use the following manual selector to put the product slider below the homepage image slider.

#shopify-section-hero

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. 

screen61.png

Once you click on Save, you'll be redirected to the preferences page for your new slider, you can select the collection you want to have or if you want to show all products, among many other configurations:

In this page, it is important to centre the slider on the screen. This can be done 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:

screen62.png

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

screen63.png