The Product list: Carousel - on the home page, are not sliding automatically

Store Design

Topic summary

A user is experiencing an issue with the Horizon theme where the Product list: Carousel on the homepage does not auto-slide through products.

Current Status:

  • The carousel displays products but requires manual navigation
  • User confirmed they want automatic sliding functionality

Proposed Solution:
A responder explained that auto-slide is not enabled by default in the Horizon theme and provided a technical workaround:

  • Access theme code via Online Store > Themes > Edit code
  • Locate the carousel section file (typically sections/product-list-carousel.liquid)
  • Find the associated JavaScript file in the assets folder
  • Add autoplay initialization code depending on the carousel library used (Flickity, Swiper, or Slick)
  • Example code snippet provided for Slick Carousel with 3-second intervals

The responder recommended contacting a Shopify expert or the theme developer if the user is uncomfortable with code modifications. The issue remains unresolved pending implementation of the suggested customization.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hello, I’m trying out the Horizon theme and I noticed that the products in the Product list: Carousel - on the home page, are not sliding automatically. Is there a way to make them slide automatically after a certain time interval?

2

I want to, yes

3

Hi @StoyanStoyanov

The Horizon theme does support a product carousel on the homepage, but by default, the Product list: Carousel section doesn’t have auto-slide functionality enabled.

To add auto-sliding behavior, you’ll need to customize the theme’s JavaScript. Here’s a general approach:

  1. Go to your theme code:
    Online Store > Themes > … > Edit code

  2. Locate the carousel section (usually under sections/product-list-carousel.liquid or similar).

  3. Check the JavaScript file used for the carousel (often in assets/, like theme.js or carousel.js).

  4. Add auto-slide code:
    If the carousel is using a library like Flickity, Swiper, or Slick, you’ll typically need to initialize it with an autoplay option.
    For example, if using Slick Carousel, the code would look like:

    $('.your-carousel-class').slick({
  autoplay: true,
  autoplaySpeed: 3000 // 3 seconds
});

If you’re not sure about modifying code or identifying the exact section, I recommend reaching out to a Shopify expert or contacting the theme developer for guidance.

Let me know if you’d like a more detailed walkthrough based on your theme version!