Shopify themes, liquid, logos, and UX
Hey! 😊
When the product slider is utilized multiple times across different sections, it ceases to function properly. Specifically, after multiple uses, the slider stops displaying products altogether, showing only a maximum of 20 products across all sections where it's implemented. And start repeating same product after 20 products
Please thoroughly review the code related to the product slider functionality.
https://k0fohx0ewybfm3sy-68083908825.shopifypreview.com
<style>
.dawn-product-slider {
position: relative;
margin: 0 auto;
}
.carousel-cell {
scroll-snap-align: start;
}
.carousel-cell a img {
max-width: 100%;
width: 100%;
}
.carousel {
scroll-snap-type: x mandatory;
overflow-x: scroll;
display: flex;
}
a.next,
a.previous{
position: absolute;
top: 50%;
left: -50px;
transform: translateY(-50%);
}
a.next {
left: auto;
right: -50px;
}
a.next svg,
a.previous svg {
width: 20px;
height: auto;
}
</style>
<style>
.dawn-product-slider {
max-width: 1300px;
margin: auto;
padding: 0 0px;
padding-bottom: 0px;
margin-top: 0px;
}
.dawn-product-slider img {
margin: 0 auto;
display: block;
}
.dawn-product-slider .carousel-cell {
background: #fff;
border-radius: 1px;
margin: auto;
padding: 2px;
margin: 2px;
width: 200px;
min-width: 200px;
}
.product-btn {
width: 100%;
}
.dawn-product-slider a {
color: black;
text-decoration: none;
}
.dawn-product-slider a .title:hover {
text-decoration: underline;
}
.dawn-product-slider a .title, .dawn-product-slider a .price {
margin: 0px;
}
.dawn-product-slider .flickity-button.flickity-prev-next-button.previous,
.dawn-product-slider .flickity-button.flickity-prev-next-button.next {
background: red;
color: white;
}
.dawn-product-slider:focus-visible, .dawn-product-slider .carousel:focus-visible {
outline: unset;
outline-offset: unset;
box-shadow: unset;
}
@media(max-width: 1300px){
a.next{ right: 0;}
a.previous{ left: 0;}
}
.overflow-scroll-x {
overflow-x: scroll;
}
</style>
<div class="collection page-width">
<div class="title-wrapper-with-link">
<h2 class="title{% if section.settings.title == blank %} title--no-heading{% endif %}">{{ section.settings.title | escape }}</h2>
</div>
<div class="dawn-product-slider">
<div class="carousel" id="slider">
{% for block in section.blocks %}
{% assign product = all_products[block.settings.product_item] %}
<div class="carousel-cell">
<a href="{{ product.url }}">
<img src="{{ product.featured_image | img_url: 'master' }}" border="0" />
{% comment %}
<p class="title">{{ product.title }}</p>
<p class="price">{{ product.price | money }}</p>
{% endcomment %}
</a>
</div>
{% endfor %}
</div>
<a href="javascript:void(0);" class="shopify-section-{{ section.id }}_previous previous">
<svg viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M768 903.232l-50.432 56.768L256 512l461.568-448 50.432 56.768L364.928 512z" fill="#000000"></path></g></svg>
</a>
<a href="javascript:void(0);" class="shopify-section-{{ section.id }}_next next">
<svg viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M256 120.768L306.432 64 768 512l-461.568 448L256 903.232 659.072 512z" fill="#000000"></path></g></svg>
</a>
</div>
</div>
<script>
document.querySelector('.shopify-section-{{ section.id }}_next').addEventListener('click', function() {
const el = document.querySelector('#shopify-section-{{ section.id }} #slider');
el.scrollTo({
top: 0,
left: el.scrollLeft + 250,
behavior: 'smooth'
});
});
document.querySelector('.shopify-section-{{ section.id }}_previous').addEventListener('click', function() {
const el = document.querySelector('#shopify-section-{{ section.id }} #slider');
el.scrollTo({
top: 0,
left: el.scrollLeft - 250,
behavior: 'smooth'
});
});
</script>
{% schema %}
{
"name": "Products slider",
"settings": [
{
"type": "range",
"id": "navigation_amount",
"min": 2,
"max": 6,
"step": 1,
"default": 6,
"label": "Change the number of cards in view"
},
{
"type": "color",
"id": "navigation_color",
"label": "Change color of the pagination|navigation|scrollbar"
},
{
"type": "text",
"id": "title",
"default": "Products slider",
"label": "t:sections.featured-collection.settings.title.label"
}
] ,
"blocks": [
{
"type": "card",
"name": "Product card",
"settings": [
{
"type": "product",
"id": "product_item",
"label": "Choose the product you want to displayed"
}
]
}
] ,
"presets": [
{
"name": "Product slider",
"category":"Custom"
}
]
}
{% endschema %}
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025