How to Create a Shopify Product Slider (Step by Step)

You are looking for a guideline to create some sliders on your website in order to boost sales, but honestly, you don’t know how to make it right and quickly to save your time. Next, you are so confused and have to search for various tips and technical ways to complete a slider step by step.

Since you know that Shopify has no product slider option, you need you to use an app like Product Slider | Carousel that allows you to create beautiful product sliders. This app will help you to display your products beautifully in a slider.

To create a Shopify product slider, you’ll need to follow these 5 steps:

Step 1. Install Shopify app (FREE)
Step 2. Create a product slider in Shopify
Step 3. Configure products and appearance in the slider settings
Step 4. Publish & Display the Shopify product slider

Ready to get started? Let’s go!

Step 1: Install Shopify app (FREE)

Shopify app can be easily installed via Shopify App Store

Go to our app’s link: https://apps.shopify.com/product-slider-1

Click Add app button (you might be asked to login if you have not logged in to your Shopify account yet)

You’ll be directed to your store. Click Install app button. Done

After successfully installing, it will appear in your app list in Shopify admin.

Step 2: Create a product slider in Shopify app

Now you should go to Apps => Shopify – Product Slider from your Shopify admin to create a new slider. Click Add Slider

Add the title and go to the next step

Step 3: Configure products and appearance in the slider settings

Configure products

Next you should configure your products.

Filter Products has 2 options:

Collection: Display products from a collection.
Specific: Select products manually.

You also can set number of total products to show by enter the number in Limit field.

Configure appearance

Select which theme style you want to display. With free version, you can access to 3 themes. If you want to access to more themes, please upgrade to premium version.

Premium version have 7-days trial program so you can try without any cost.

You can customize your product slider even further in other tabs:

Slider Controls

At this section, you can set up manually the mode and speed of your slider in Slider Mode and AutoPlay Speed as well as Slider Speed. Choose Pause on Hover and Infinite Loop, you turn on the form of product pictures movements. Besides, if you don’t like it, you can also turn it off.

There is another highlight point here, Shopify Slider provides you changed colors feature in NAVIGATION and PAGINATION. The platform uses full color system of RGBA and HEX for slider navigation and pagination’s part. Drag the circle on the color bar to identify chroma and main color.

Display Options

You edit and add your product information in Slider Section Title. Especially, with upgrade account, you can definitely use other innovative features of this section, such as selecting a custom URL, setting a space or margin between product, and opening product’s images when click on title, thumbnail, readmore button.

Mention clearly the name and short or long description of your products by tick on name square in PRODUCT NAME part and in PRODUCT DESCRIPTION.

in order to draw attentions and call to action from customers to your product’s price by decorating discount texts and Add to Cart Button. You must be satisfied with mix and match many color style for button, hover, background, border color as well.

Image Settings

This is where you tell your customers how amazing your products are by showing theirs images. After uploading qualified pictures, you can apply basic design for them like changing colors and styles of Border (Solid, Transparent, Line, etc.), choosing the right display scale in Image Size and setting a specific mode for each picture in Image Mode.

You should upgrade your account to open other outstanding features.

Typography

In order to make your product display more attractive, designing text and font is necessary, too. In this tab, you can set slider font, title font, product name font, and so on.

There are 3 main columns kinds of font including Font Family, Font Style and Font Subset to select. The others are simple edit tools for your texts and letters. Most of them are easy to use!

Check out this article to learn about the different configuration settings available from the Slidify app dashboard

Once you are done with the settings, you can display this product slider in your Shopify online store.

Step 4. Publish & Display the Shopify product slider

Once you are done with the settings, click Save button.

Add product slider to homepage

Open the Install tab and copy the product slider ID

Navigate back to the Online Store section of your Shopify store, under the Themes page look for your theme that is activated and click on the Customize button.