Make multicolumn carousel on pc

[kuleting99]

Hi guys,

I want to make it so my multicolumn have carousel on pc and not just mobile, just so I dont get two rows.

If you could make it so it spins automatically in a slow tempo that would be awesome but not required.

I am using the trade theme right now.

Please explain as simple as possible as I am not that good at coding

Thanks for any help!

[mrashid_1]

@kuleting99 Certainly! I’m here to help with this issue. Could you please share your store URL, or if preferred, to collaborate to sort this out ? Let me know what works best for you.

[rajweb]

Hey @kuleting99 ,

I’d be happy to help you set up a carousel for your multicolumn section on both desktop and mobile views. This way, it’ll stay in a single row on all devices, with a slow autoplay option to keep it engaging.

Here’s a step-by-step guide to achieve this using the Slick Carousel library. It’s reliable, smooth, and should be easy to set up in your Trade theme.

Steps to Set Up the Carousel

1. Add Slick Carousel to Your Theme:

Download the Slick CSS and JavaScript files from the Slick Carousel website

In your Shopify admin, go to Online Store > Themes. Click Actions > Edit code.

Upload the Slick CSS and JavaScript files in the Assets folder by selecting Add a new asset.

2. Link Slick Carousel in Your Theme:

In the theme.liquid file (found under Layout), link the Slick files by adding these lines:

Ensure jQuery is loaded as well (most themes have it by default). If not, add this above the Slick script:

3. Initialize the Carousel in Your Javascript:

In the Assets folder, create a new JavaScript file by clicking Add a new asset, name it carousel.js, and add the following code:

$(document).ready(function(){
    $('.multicolumn-section-class').slick({
        slidesToShow: 3, // Number of columns shown at once on desktop
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 3000, // Slower tempo for smooth autoplay
        arrows: true,
        dots: true,
        responsive: [
            {
                breakpoint: 768, // Adjust settings for mobile
                settings: {
                    slidesToShow: 1
                }
            }
        ]
    });
});

Replace muticolumn-section-class with the class name of your multicolumn section (use your browser’s inspector tool to find the exact class name).

4. Link the JavaScript File

In theme.liquid, just before the closing tag, add a link to the carousel.js file:

Save all the changes, then check your site to see the multicolumn section as a smoothly autoplaying carousel.

Let me know if you need any adjustments or if you have questions. I’m here to help!

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[kuleting99]

kuletingatang.no

[befitone]

Thank you very much for this comm. I’am searching as well for days for this.

I have a little question though.. what is the link for Step 1 (to download Slick CSS and JavaScript files) ?

I’ve made some code changes to my site, even I don’t have any background of coding, so will be a big help for me your reply. Thank you!

[rajweb]

@befitone ,

Could you please send me a message via email? That way, we can discuss the details more thoroughly.

Looking forward to your email!

Thanks