hey , Thanks for reaching out ,
- Go to your Shopify Admin Dashboard.
- Navigate to Online Store > Themes.
- Click on the "Actions" button next to your current theme and select "Edit code".
- In the Sections folder, click "Add a new section".
- Name the new section product-slider
- Once you've created the new section, it will open in the code editor. Replace any existing code in product-slider.liquid with the following:
{% comment %}
Product Slider Section
{% endcomment %}
<div class="scrollable-slider-container">
<div class="product-slider">
{% assign products = collections['your-collection-handle'].products %}
{% for product in products %}
<div class="product-card">
<!-- Product Image -->
<a href="{{ product.url }}" class="product-image">
<img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
</a>
<!-- Product Title -->
<div class="product-title">
<a href="{{ product.url }}">{{ product.title }}</a>
</div>
<!-- Product Price -->
<div class="product-price">
{{ product.price | money }}
</div>
</div>
{% endfor %}
</div>
</div>
Replace 'your-collection-handle' with the handle of the collection you want to display. You can find this handle in the Collections section of your Shopify admin.
Next, you need to add the CSS code to make the slider scrollable. Follow these steps:
- In the Shopify code editor, navigate to the Assets folder.
- Open your theme's CSS file (often named theme.css or theme.scss.liquid).
- Add the following CSS at the bottom of the file:
.scrollable-slider-container {
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch; /* Enables smooth scrolling on iOS devices */
margin: 0 auto; /* Centers the slider on the page */
padding: 20px 0; /* Adds padding around the slider */
}
.product-slider {
display: inline-block; /* Keeps the slider content in a single line */
width: max-content; /* Ensures the slider's width fits all product cards */
}
.product-card {
display: inline-block; /* Displays product cards side by side */
width: 200px; /* Adjust width as needed */
margin-right: 10px; /* Space between each product card */
box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Adds a subtle shadow */
background-color: #fff; /* Background color for each card */
border-radius: 5px; /* Rounded corners for cards */
overflow: hidden; /* Ensures content doesn't overflow the card */
text-align: center; /* Centers text within each product card */
padding: 10px; /* Adds padding inside each card */
}
/* Optional: Custom scrollbar styles */
.scrollable-slider-container::-webkit-scrollbar {
height: 8px; /* Height of horizontal scrollbar */
}
.scrollable-slider-container::-webkit-scrollbar-thumb {
background-color: #888; /* Scrollbar thumb color */
border-radius: 10px; /* Rounded scrollbar thumb */
}
.scrollable-slider-container::-webkit-scrollbar-thumb:hover {
background-color: #555; /* Hover color for scrollbar thumb */
}
To make the slider more interactive with a drag-to-scroll feature, add Javascript:
- In the Shopify code editor, go to the Assets folder.
- Find and open your JavaScript file (often named theme.js or custom.js).
- Add the following JavaScript at the bottom:
document.addEventListener('DOMContentLoaded', function () {
const slider = document.querySelector('.scrollable-slider-container');
let isDown = false;
let startX;
let scrollLeft;
slider.addEventListener('mousedown', (e) => {
isDown = true;
slider.classList.add('active');
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
});
slider.addEventListener('mouseleave', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('mouseup', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('mousemove', (e) => {
if (!isDown) return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 2; // Adjusts scroll speed
slider.scrollLeft = scrollLeft - walk;
});
});
Now that you have created the new section, you need to add it to a page or template.
- Go to the Shopify code editor and open Templates/index.liquid (or any page template where you want to display the slider).
- Include the new section by adding the following code where you want the slider to appear:
{% section 'product-slider' %}
- Save all the changes in your Shopify theme editor.
- Preview your store to see the new product slider with a scrollbar.
-Need a Shopify Specialist? Chat on
- Custom Design | Advanced Coding | Store Modifications
Thanks
