Website Building » Shopify » How Do I Add a Carousel to Shopify?

How Do I Add a Carousel to Shopify?

Last updated on October 1, 2022 @ 6:15 pm

Adding a carousel to your Shopify store can be a great way to showcase your products and increase conversion rates. There are a few different ways to add a carousel to Shopify, so we’ll cover the two most popular methods.

Method 1: Adding a Carousel Using an App

The first method is to use an app from the Shopify App Store. There are many different apps available, so you’ll need to find one that suits your needs. We recommend Product Carousel by Secomapp. Once you’ve installed the app, follow these steps:

PRO TIP: Adding a carousel to your Shopify store may result in decreased page load speed and decreased conversion rates. Use caution when considering this change to your store.

1. Go to Carousels in the left-hand sidebar and click Add Carousel. 2. Enter a name for your carousel and select the products you want to include. You can also choose how many products to display per slide and the order in which they appear.

3. When you’re happy with your settings, click Save. 4. To add the carousel to your store, go to Pages, click on the page where you want to add the carousel, and then click Add Section. Select Product Carousel from the list of sections and click Add. 5. Save your changes and you’re done! Your new carousel will now be visible on your store.

Method 2: Adding a Carousel Using HTML/CSS Code

If you’re comfortable working with HTML and CSS, you can also add a carousel to Shopify using code. Again, there are many different ways to do this, so we’ll just cover one example. We recommend using Owl Carousel 2, which is a free jQuery plugin.

  1. First, you’ll need to download the plugin and upload it to your Shopify server. You can do this by going to the Owl Carousel 2 website, clicking on the Download button, and then uploading the ZIP file to your server using FTP.
  2. Next, you’ll need to include the Owl Carousel 2 CSS and JS files in the


    You can do this by going to Shopify Admin, clicking on Online Store > Themes > Edit code, and then adding the following code to the bottom of your theme’s code:


    |} {% endraw %} {% raw %}

    Once you’ve added this code, save your changes.

    3) The next step is to add the HTML code for your carousels.

    Add this code where you want your carousels to appear:

    |} {% endraw %} {% raw %}

    Be sure to replace “//placeholdit33g…” with URLs for your own images.

    4) The final step is to add the jQuery code that will initialize your carousels.

    Add this code at the bottom of your theme’s code:|} {% endraw %} {% raw %}|} {% endraw %} {% raw %}$(document).ready(function(){$(“#OwlCarouse32l1”).OwlCarouse32l();}); // Initialize Owl Carous31e31el #1|} {% endraw %} {% raw %}|} {% endraw %} {% raw %}// If you have multiple carousels on one page, initialize each one with a unique ID.

    5) Save your changes and you should now see your new carousels on your store!If you run into any trouble, be sure to check out the Owl Carous31e31el 2 documentation.

Drew Clemente

Drew Clemente

Devops & Sysadmin engineer. I basically build infrastructure online.