A user wants to add a product slider showcasing their best sellers collection on their homepage. They initially tried following a YouTube tutorial using “Slack” but encountered issues with arrows and slider functionality.
Solutions Provided:
App-based approach: One user recommended the Collection Slider app from Shopify’s app store as a free solution.
Custom code solution: Another user shared detailed code for creating a “Product Carousel” section by adding custom code to the theme (Themes → Edit Code → Sections → Add new section). This solution includes customizable settings for arrows, dots, colors, button styling, and card width.
Current Status:
The custom code solution is working, but the original poster is experiencing several issues:
Additional users have shared YouTube tutorials for creating custom product sliders without apps, but the mobile responsiveness and styling customization remain unresolved.
Hi
I am looking at promoting my best sellers collection on the homepage of my website and want it to be a slider.
I watched a youtube tutorial and added Slack but I have been having issues with the arrows and slider moving.
https://www.youtube.com/watch?v=Zvf_WEdGrW4
Anyone know if there is a free app then can enable this?
If You want to solve this by app here it is
Hi @gwilliams
You can try follow this path:
Themes => edit code => sections => Add a new section.
and add this code to.
Then in theme customize, you can add section “Product Carousel”
{%- if section.settings.arrows -%}
{%- endif -%}
{%- if section.settings.dots -%}
{%- endif -%}
{%- if section.settings.enable -%}
{%- if section.settings.show_title -%}
##
{%- for block in section.blocks -%}
{{ collections[block.settings.collection].title }}
{%- endfor -%}
{%- endif -%}
{%- endif -%}
{% schema %}
{
"name": "Product Carousel",
"settings": [
{
"type": "checkbox",
"id": "enable",
"label": "Enable",
"default": true
},
{
"type": "checkbox",
"id": "show_title",
"label": "Show title",
"default": true
},
{
"type": "checkbox",
"id": "arrows",
"label": "Show arrows",
"default": true
},
{
"type": "checkbox",
"id": "dots",
"label": "Show Slider Dots",
"default": true
},
{
"type": "color",
"id": "color_bg--overlay",
"label": "Overlay Color",
"default": "#000"
},
{
"type": "color",
"id": "detail-box",
"label": "Detail Box",
"default": "#f3f3f3"
},
{
"type": "text",
"id": "btn-title",
"default": "View More",
"label": "Button Title"
},
{
"type": "color",
"id": "color_bg--buyBtn",
"label": "Button Color on Hover",
"default": "#CBD5CC"
},
{
"type": "range",
"id": "buybtn-radius",
"min": 1,
"max": 20,
"step": 1,
"unit": "px",
"label": "Button Radius",
"default": 20
},
{
"type": "range",
"id": "card-width",
"min": 300,
"max": 440,
"step": 10,
"unit": "px",
"label": "Card Width",
"default": 350
}
],
"blocks": [
{
"type": "collection",
"name": "Collection",
"limit": 1,
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection"
}
]
}
],
"presets": [
{
"name": "Products carousel",
"category": "Carousel Sections"
}
]
}
{% endschema %}
Brilliant that you so much!
The slider is working!
Is there a way to change the layout of the slider
So have all the text/content aligned to the center, and have the product title underneath the image in bold, with the price underneath?
Sorry, can I make the slider slightly bigger and just to feature 2 products?
I believe there is some layout issues on mobile view - not aligned in the centre and the left/right arrows seem to be off the screen…
I believe there is some layout issues on mobile view - not aligned in the centre and the left/right arrows seem to be off the screen…
Many thanks for providing me with the code for my best sellers slider to feature on the homepage.
I was wondering if there is a way to make the slider slightly bigger and just to feature 2 products?
There is also some layout issues on mobile view - not aligned in the centre and the left/right arrows seem to be off the screen…
And I’d like the text to be aligned to the center with the title at the top in bold, with the price underneath and to remove the product vendor (which is in white)
Here is how you can add a custom products slider section without App:
Without using any App. You can add a custom featured collection slider in your store.
