How to set product automatic scrolling

Store Design
1

1751871677088_看图王.jpg
1751871677088_看图王.jpg1052×426 76.3 KB

my web：www.bmcarcover.com

2

Hi @Jim_65 ,
Could you please let me know what exactly you would like to customize in the section shown in your screenshot?

3

Hi @Jim_65,

I checked and Dawn doesn’t support this currently, so you can do it with the following options:

  • Option 1: Add other slider libraries and customize the code for it, refer to the libraries: swiper slider, flickity, slick,…
  • Option 2: Customize the theme slider-component code, it will be a complex request and very difficult to guide in detail.
  • Option 3: Use app builder to create new section for it. Refer pagefly
4

Hello @Jim_65

To enable automatic scrolling (carousel/slider) for products:

  1. Use a JavaScript slider library (e.g., Swiper, Slick, Flickity).
  2. Initialize it with autoplay settings.

Example (using Swiper):

<div class="swiper-container">
  <div class="swiper-wrapper">
    {% for product in collection.products %}
      <div class="swiper-slide">
        <!-- Product card here -->
      </div>
    {% endfor %}
  </div>
</div>

<script>
  new Swiper('.swiper-container', {
    loop: true,
    autoplay: {
      delay: 3000,
      disableOnInteraction: false
    }
  });
</script>
5

Hi @Jim_65

This is David from PieLab.

You can use CSS and JavaScript (or simply CSS animation in basic cases) to make your product section automatically scroll horizontally, as shown in the image. Here’s how to do it:

CSS + Java Script + HTML:

<div class="product-carousel-wrapper">
        <div class="product-carousel">
            <div class="product-track">
                <div class="product-item">Product 1</div>
                <div class="product-item">Product 2</div>
                <div class="product-item">Product 3</div>
            </div>
        </div>
    </div>
    <script>
    document.addEventListener("DOMContentLoaded", function () {
        const track = document.querySelector(".product-track");
        if (track) {
        track.innerHTML += track.innerHTML;
        }
    });
    </script>
    <style>
        .product-carousel-wrapper {
            overflow: hidden;
            position: relative;
            width: 100%;
        }

        .product-carousel {
            display: flex;
        }

        .product-track {
            display: flex;
            gap: 20px;
            animation: scroll-carousel 10s linear infinite;
        }

        .product-item {
            min-width: 300px;
            flex-shrink: 0;
            background: #eee;
            text-align: center;
            padding: 40px 0;
        }

        @keyframes scroll-carousel {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }
    </style>

Hope this helps! Let me know how it goes

Cheers,
David

6

Hi @Jim_65

To enable automatic scrolling (carousel/slider) for products:

Go to: Online Store > Themes > Edit Code > theme.liquid

Paste below cdn just before closing head tag.

<!-- Slick Carousel CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>

<!-- jQuery (required for Slick) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Slick Carousel JS -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

Initialize Slick with Autoplay
Open theme.liquid file and add this code at just before closing body tag.

<script>
$(document).ready(function () {
  $('.product-grid.contains-card').slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    arrows: true,
    dots: false,
    autoplay: true,
    autoplaySpeed: 3000, // every 3 seconds
    responsive: [
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 2,
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
        }
      }
    ]
  });
});
</script>
7

Locate the Featured Collection Section File

  1. Go to Online Store > Themes > … > Edit Code.

  2. Find sections/featured-collection.liquid.

</script>
document.addEventListener("DOMContentLoaded", function () {
	const scrollContainer = document.querySelector(".slider");
	let scrollAmount = 0;
	const scrollStep = 1; // pixels per step
	const intervalDelay = 4; // ms per frame

	let maxScroll = scrollContainer.scrollWidth - scrollContainer.clientWidth;

	function autoScroll() {
  		scrollAmount += scrollStep;

  	if (scrollAmount >= maxScroll) {
    		scrollAmount = 0;
  	}

  	scrollContainer.scrollTo({
    	left: scrollAmount,
    	behavior: "smooth",
  	});
	}

	let autoScrollInterval = setInterval(autoScroll, intervalDelay);

	// Pause on hover
	scrollContainer.addEventListener("mouseenter", () => clearInterval(autoScrollInterval));
	scrollContainer.addEventListener("mouseleave", () => {
  	autoScrollInterval = setInterval(autoScroll, intervalDelay);
	});
  });
</script>