collection list slider shopify

Add Collection List Slider - Shopify Themes

Log in or Sign up to ensure access to purchased code across multiple devices.

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: Compatible with all Shopify 2.0 FREE themes . Updated to latest version 12.0

Show case all your collections using a slider. This is a slider for the collections and NOT products.  For product slider, please refer here

Check DEMO store here 💻. Password: made4uo

What are Add Collection List Slider?

A collection list slider is a user interface element that presents your product collections in a swipeable format. It improves navigation and product discovery for customers by allowing them to browse through multiple collections efficiently, especially on devices with limited screen space.

Why Use are Add Collection List Slider?

There are several reasons to incorporate a collection list slider into your Shopify store:

  • Enhanced Navigation: Sliders allow customers to browse through multiple collections efficiently, especially on devices with limited screen space.
  • Increased Visibility: By featuring collections prominently, you can drive traffic to specific categories or new product lines.
  • Improved Customer Engagement: The interactive nature of sliders can keep visitors engaged and encourage them to explore more of your store's offerings.

Additional Considerations:

  • Ensure the slider functions and displays seamlessly across all devices, especially on smartphones and tablets where screen space is limited. You might consider using a slider that adapts the number of collections displayed based on the device viewport.
  • For optimal presentation within the slider, consider the size and format of your collection images and titles. You might want to experiment with different image sizes and concise titles to ensure they are well-displayed on various screen sizes.
  • Provide clear and intuitive navigation controls (arrows, dots) for users to browse through the collections within the slider.
  • Large image files can slow down loading times. Use optimized image sizes and consider lazy loading techniques to ensure the slider loads quickly and doesn't impact your store's performance.

    What you are buying:

    • A slider for collections list
    • Options to change the card background and active border
    • Option to set how many items for desktop, tablet, and mobile
    • Included option to set the maximum width of the section
    • Added an option to hide the collection title
    • Option to show counter as dots, slider, and number
    • Added an option to show button on side

    What makes our code better:

    • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
    • We do not leave or add codes use to advertise for our website
    • Our code is mobile friendly

    Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.

    Steps on how to add Collection List Slider

    Step #1. Open your code editor

    From you Admin page, go to Online store, then Themes. Choose the theme you want to edit, then click the three dots, then Edit code

    Step #2. Create a new section file

    In Section folder, create a new section, name it whatever you want, then replace the default code with the code below.

    Step #3. Create a new asset

    Open the Asset folder, and "create a new asset." Create a new CSS file and name it "collection-list-slider", then place the code below.

    Step #4. Still at the Asset folder,

     Open the global.js or theme.js and add the code below. 

    Step #5. Save the changes

    Once you've added the code, save your changes to the theme code by clicking the SAVE button on the right hand upper corner.

    Step #4. Customize theme

    Go to the theme editor by clicking three dots on your left hand upper corner, then Customize theme. Make sure to SAVE once you are done customizing.


    Adding a collection list slider to your Shopify store can be a powerful tool to improve navigation, increase product discovery, and ultimately boost sales. By considering the various factors discussed in this article, such as placement, customization options, and mobile responsiveness, you can create a slider that seamlessly integrates with your store's design and enhances the user experience. Remember to monitor the slider's performance and adjust your strategy based on customer interaction data. With a well-implemented collection list slider, you can effectively showcase your product collections and keep visitors engaged while browsing your store.

    Back to blog


    What seems to be the problem. If you cannot see the code, please follow the steps mentioned above. You can also contact me at chat with us


    I bought the code and it does not work correctly, can you correct it please


    Leave a comment