How to Add a Product Slider to a Shopify Store

As a Shopify developer, it’s your job to create Shopify apps, themes, and stores which make a lasting impact on your customer, and their target audience. There are plenty of great ways to do this, from designing an eye-catching theme with a focus on excellent UX, to taking advantage of powerful Shopify features for checkout customization and customer experience.

One of the most important things you’ll need to do if you’re building a store for a client on Shopify, is find the most effective method of showcasing products. While product pages are a good start, it can also be helpful to showcase a range of products on multiple pages, with a product slider. 

So, how exactly do you add a product slider to a Shopify store?

Let’s walk through the process. 

Step 1: Choosing a Shopify Slider App

First things first, there’s no embedded product slider option within the Shopify website builder at present. This means you’re going to need to leverage an app from the Shopify marketplace to unlock your new functionality. The good news is there are a number of great options out there, such as:

• Enorm Product Slider: $3.99 per month: Create slider assortments focused on new or top-selling products with no coding requirements. You can even direct clients directly to product pages whenever they click on an image in the slider.
• Product Slider Upsell: $0.99 per month: Design a variety of sliders showcasing related items on product pages, recently viewed items, or top-selling products. You can use this solution to increase the average order value of customers on a Shopify store.
• Image slider: Free: Simple and effective, this image slider allows you to showcase various product pictures as well as customer testimonials and social posts in one carousel. You’ll also be able to customize the look and feel of the slider. 
• Layer slider: $6.99 per month: A powerful drag-and-drop slider, this product comes with a fully responsive selection of slider templates to choose from. You can use the solution to highlight a wide range new and trending product.
• Product Image Slider Carousel: This simple carousel or slideshow creator allows you to add captions, buttons, videos, backgrounds and borders to your design. You can even set your image slider on a loop. 

To get started, choose the slider you want to use for your store. If none of the options above appeal to you, then you can visit the Shopify app store and search for “Slider” to see some of the top rated options. Once you find a slider you want, click on the “Add App” button.

Step 2: Create your Slider

The exact steps you’ll use to create your Shopify product slider will depend on the app you choose. Most solutions will appear in your “admin” account within the Shopify ecosystem after you’ve added them to your store. From there, you’ll need to click into the app, and potentially log into an account. 

For the purpose of this blog, we’ll look at the process for creating a slider with one of the top products used by skilled Shopify developers, the POWR.io slider. Once you’ve logged into your account, you’ll be able to click on the “Template” tab to choose from a range of slider options.

There are various options available here, including “Carousel” or “Slider”. Notably, the slider will only show one image at a time, while the carousel shows multiple images or products at once.

Step 2: Configure the Slider’s Appearance

Once you’ve chosen your starting template, click on the “Content” tab to see the contents of your slides. You’ll see slides in the template which you can delete and replace with your own elements. You’ll be able to add features like:

• Images: Directly from a computer or from a pasted link
• Video: Linked from YouTube or Vimeo
• Banners: With images, titles, subtitles, buttons, and layouts
• Document: Uploaded directly from your computer
• Event: With images, title, subtitle, and time frame

As mentioned above, the exact elements you’ll be able to edit in your slider will depend on the app you’re using. In most cases, you will at least be able to add an image of your product, but you may want to include information like pricing, and a button to see the product page too.

Step 3: Adjust Your Display Options

The next step is adjusting how your product slider is going to look and perform on the Shopify site. It might be worth talking to your client about their preferences at this stage, and how much motion or animation they’re looking for. The majority of slider apps will come with a range of transition animations, but fades and standard carousel designs are the most common.

If you want to explore through the transition options in POWR.io you can click on the Options menu and visit the “Transitions” section. Here, you can also choose whether you want to enable automatic sliding (usually a good idea to keep your audience engaged). You’ll also be able to decide whether you want to be able to repeat the same slideshow automatically when it reaches an end. 

When adjusting your display options, there are some other points you might want to think about, such as:

• Branding: What kind of colors and brand elements can you use in your product slider to make it unique to the site you’re building? Everything should look aligned when you make a great Shopify site, so focus on consistency. 
• Buttons: You can add buttons in some sliders which link to a specific webpage (like a product page) or take a payment. In POWR.io slider, you can do this by opening your app settings and clicking “add element”. Some other sliders will allow you to link the image directly to the page you want to send your visitors to. 
• Sizing and cropping: Most of the best slider apps for Shopify will automatically be responsive to match your Shopify theme. This means their sizing will adapt based on where your end user is viewing the page. However, you might need to consider sizing and cropping changes with some products. 

Step 4: Publishing your Shopify Product Slider

As with everything else, the steps you use to publish your Shopify product slider will depend on what app you’re using to build the design. With POWR.io, the app we’ve been looking at for this page, you can add a slider to any page on your website by copying the HTML snippet created when you design your slider in the POWR editor. 

Most sliders will use the same strategy of HTML snippets, which make it a lot easier to add various sliders and carousels to multiple pages throughout a website. 

Keep in mind, some sliders could cause issues with the other code on a page, so it’s best to double check everything works exactly as it’s supposed to.

Have Fun Building Sliders

Product sliders on Shopify can be a great way to make your client’s products stand out, and boost their chances of conversions. Once you’ve found an app you can rely on to make your Shopify slider look fantastic, the rest is pretty straightforward. 

Just be sure to check the functionality of your Shopify theme and website after you add anything new to your design.

‍