Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
How can i change this like this (as how i have for collection):
@NOT1 Yeah you can do this by putting slider code in the you may also like section.
Hi,
Add a Slider Library
Add CSS/JS Files
Edit the Related Products Section
Initialize the Slider
Code example
<script type="text/javascript">
$(document).ready(function(){
$('.related-products-slider').slick({
slidesToShow: 4, // Number of products to show
slidesToScroll: 1, // Number of products to scroll per click
autoplay: true, // Enable auto-slide
autoplaySpeed: 3000, // Auto-slide speed in milliseconds
arrows: true, // Enable navigation arrows
dots: false, // Enable pagination dots
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
}
}
]
});
});
</script>
Use CSS for style
I dont know much about these can u pls explain me step by step and give the codes
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025