{% comment %}
Custom Multi-Product Slider Section
{% endcomment %}
<div class="product-slider-wrapper page-width">
{%- if section.settings.title != blank -%}
<h2 class="product-slider-heading">{{ section.settings.title | escape }}</h2>
{%- endif -%}
{%- assign collection = collections[section.settings.collection] -%}
{%- assign products_to_show = section.settings.products_to_show -%}
<div class="slider-container-main">
<button type="button" class="slider-arrow prev-arrow" aria-label="Previous Products">❮</button>
<div class="product-slider-track">
{%- if collection != blank and collection.products_count > 0 -%}
{%- for product in collection.products limit: products_to_show -%}
<div class="product-card-slide">
<a href="{{ product.url }}" class="product-card-link">
<div class="product-card-image-wrapper">
{%- if product.featured_media -%}
<img src="{{ product.featured_media | image_url: width: 400 }}" alt="{{ product.title | escape }}" loading="lazy" class="product-card-image">
{%- else -%}
{{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
</div>
<div class="product-card-info">
<h3 class="product-card-title">{{ product.title }}</h3>
<div class="product-card-price">
<span class="price-item">{{ product.price | money }}</span>
{%- if product.compare_at_price > product.price -%}
<span class="price-compare" style="text-decoration: line-through; opacity: 0.6; font-size: 0.9em;">
{{ product.compare_at_price | money }}
</span>
{%- endif -%}
</div>
</div>
</a>
</div>
{%- endfor -%}
{%- else -%}
{%- for i in (1..6) -%}
<div class="product-card-slide">
<div class="product-card-image-wrapper">
{{ 'product-' | append: i | placeholder_svg_tag: 'placeholder-svg' }}
</div>
<div class="product-card-info">
<h3 class="product-card-title">Sample Product {{ i }}</h3>
<div class="product-card-price">
<span class="price-item">₹999.00</span>
</div>
</div>
</div>
{%- endfor -%}
{%- endif -%}
</div>
<button type="button" class="slider-arrow next-arrow" aria-label="Next Products">❯</button>
</div>
</div>
<style>
.product-slider-wrapper {
padding: 40px 20px;
position: relative;
max-width: 1200px;
margin: 0 auto;
box-sizing: border-box;
}
.product-slider-heading {
text-align: center;
margin-bottom: 25px;
font-size: 24px;
}
.slider-container-main {
position: relative;
display: flex;
align-items: center;
}
.product-slider-track {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 10px 0;
width: 100%;
}
.product-slider-track::-webkit-scrollbar {
display: none;
}
.product-card-slide {
flex: 0 0 calc(25% - 15px);
box-sizing: border-box;
border: 1px solid #e8e8e8;
border-radius: 8px;
overflow: hidden;
background: #fff;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card-slide:hover {
transform: translateY(-4px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.product-card-link {
text-decoration: none;
color: inherit;
display: block;
}
.product-card-image-wrapper {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background-color: #f7f7f7;
}
.product-card-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.placeholder-svg {
width: 100%;
height: 100%;
background-color: #f0f0f0;
}
.product-card-info {
padding: 12px 15px;
}
.product-card-title {
font-size: 16px;
margin: 0 0 8px 0;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.product-card-price {
font-size: 15px;
color: #333;
display: flex;
gap: 8px;
align-items: center;
}
.slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: #ffffff;
border: 1px solid #ddd;
border-radius: 50%;
width: 40px;
height: 40px;
cursor: pointer;
z-index: 5;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.slider-arrow:hover {
background: #f0f0f0;
}
.prev-arrow { left: -20px; }
.next-arrow { right: -20px; }
@media (max-width: 990px) {
.product-card-slide {
flex: 0 0 calc(33.333% - 14px);
}
}
@media (max-width: 768px) {
.product-card-slide {
flex: 0 0 calc(50% - 10px);
}
.prev-arrow { left: -10px; }
.next-arrow { right: -10px; }
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
const tracks = document.querySelectorAll('.product-slider-track');
tracks.forEach(function(track) {
const parent = track.closest('.slider-container-main');
if (!parent) return;
const prevBtn = parent.querySelector('.prev-arrow');
const nextBtn = parent.querySelector('.next-arrow');
if (nextBtn) {
nextBtn.addEventListener('click', function() {
const card = track.querySelector('.product-card-slide');
const slideWidth = card ? card.offsetWidth + 20 : 250;
track.scrollBy({ left: slideWidth * 2, behavior: 'smooth' });
});
}
if (prevBtn) {
prevBtn.addEventListener('click', function() {
const card = track.querySelector('.product-card-slide');
const slideWidth = card ? card.offsetWidth + 20 : 250;
track.scrollBy({ left: -slideWidth * 2, behavior: 'smooth' });
});
}
});
});
</script>
{% schema %}
{
"name": "Product Slider",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Featured Products"
},
{
"type": "collection",
"id": "collection",
"label": "Select Collection"
},
{
"type": "range",
"id": "products_to_show",
"min": 4,
"max": 16,
"step": 1,
"default": 8,
"label": "Maximum products to show"
}
],
"presets": [
{
"name": "Product Slider"
}
]
}
{% endschema %}