A user seeks to implement a circular carousel displaying collections on their Shopify store, sharing a screenshot of the desired functionality.
Proposed Solutions:
Slick Slider Integration: One response suggests adding a Slick slider to a Shopify section using an external tutorial.
Professional Customization: Another contributor warns that implementation varies significantly by theme and recommends hiring a professional. They advise setting up collection data first, noting that Shopify’s “best selling” algorithm updates weekly, not in real-time. For DIY approaches, they suggest finding theme-specific tutorials or transplanting code from themes with built-in collection sliders.
Custom Code Solution: A detailed Liquid template code snippet is provided, including HTML structure, CSS styling for circular images, and schema configuration for a custom section with image blocks and links.
Video Tutorials: Two YouTube video references are shared as step-by-step guides for adding collection carousels without apps.
Status: The discussion remains open with multiple implementation paths offered, ranging from beginner-friendly app-based solutions to advanced custom coding.
Hello Everyone,
I am trying to implement this functionality on my store and have tried to find everything but nothing seems to work.
Can anyone please tell me how this can be done. Thanks
This is the screenshot of the functionality I am trying to achieve.
Hello
You need to add a Slick slider in a section in Shopify then please follow this tutorial.
If this helps you please like and accept it as a solution to help other people. Hire me or mail me for any queries.
How to implement that UI will vary wildly by theme as well as the styling integration, making it an advanced customization, hire a professional.
Setting up product data first then then start on code.
Create that collection and figure out the sorting method, either manually or sort it by best selling.
Research how collections best selling algorithm works, anecdotally it only updates weekly not in real time.
So if you need it to be a real time thing you will need to research for an app to update a collection in near real time.
Coding a DIY approach for the technically inclined is to find a tutorial relevant to the target theme.
There are some tuts in the forums for popular themes like dawn or debut.
Otherwise find a theme with collection sliders or product recommendations on the product page and transplant code.
Or try and modify the available advanced tuts to use a dedicated collection
https://help.shopify.com/en/manual/online-store/themes/os/customize/show-recommendations
https://shopify.dev/themes/product-merchandising/recommendations
Beginners really should avoid the complication of making a slideshow and just link to the collection page itself in place of prev/next arrows.
{% comment %}
Custom Circle Section Schema
{% endcomment %}
{% schema %}
{
“name”: “Custom Circle Section”,
“class”: “custom-circle-section”,
“settings”: [
{
“type”: “text”,
“label”: “Section Title”,
“id”: “section_title”,
“default”: “Featured Products”
},
{
“type”: “color_scheme”,
“id”: “color_scheme”,
“label”: “color”,
“info”: “t:sections.all.colors.has_cards_info”,
“default”: “background-1”
}
],
“blocks”: [
{
“type”: “circle_content”,
“name”: “Call to action”,
“settings”: [
{
“type”: “image_picker”,
“label”: “Product Image”,
“id”: “subarna”
},
{
“type”: “text”,
“label”: “Product Title”,
“id”: “product_title”,
“default”: “Product Title”
},
{
“id”: “link”,
“type”: “url”,
“label”: “Button link”
}
]
}
],
“presets”: [
{
“category”: “custom”,
“name”: “Custom Circle Section”
}
]
}
{% endschema %}
Here is the reference video. You can solve it.
Hope this helps.
Let me know if need any help.
We can add collections in carousel without using any App.
