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:
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.
Conclusion
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.
Copied!
2 comments
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