There are several ways to create a product slider on Shopify. Such as using custom code, the in-built product slider on the Dawn theme, and using a Shopify app like Slider Revolution or EasyBoost: Product Showcase.
In this blog, you’ll discover detailed steps and tips for creating an effective Shopify product slider and enhancing your online store’s visual appeal. Whether you’re a beginner or an experienced merchant, this guide will help you create a stunning product slider that drives engagement and conversions.
Let’s Get Started!
Table of Contents
How to Create a Product Slider in Shopify?
A product slider is an engaging and interactive way to showcase products while saving space on your Shopify store. It enhances the user experience and helps create a visually appealing layout. Here are three effective methods to create a product slider in Shopify:
- Using Your Shopify Theme’s Built-in Featured Collection Section
- Implementing Custom Code
- Integrating Third-Party Apps: Slider Revolution, Easy Display: Product Showcase, etc.
In the following section, we will explore each of these three methods in detail, one by one.
How to Create a Product Slider in the Shopify Dawn Theme
If you’re fine with a simple product slider, you can create one using the Dawn theme’s Featured Collection option. Follow these steps:
Step 1: Upload Products on Shopify
Log in to your Shopify admin panel.
Go to Products > Add Product.
Enter the product details, such as title, description, images, price, and inventory.
Click the Save button after adding all the necessary information.
Step 2: Create a Collection
A collection allows you to showcase a specific set of products. Grouping similar products in a collection ensures customers see relevant items, such as bestsellers, new arrivals, or products on sale, in your product slider.
- Go to Products > Collections
- Click Create Collection
- Write the Title and Description of the collection
- Select the Type of Collection
- Manual: Add products manually.
- Smart: Define conditions like product type, tag, or price to auto-add products.
- If you chose the manual option, click Browse under the Products section in your collection.
- Select the products to include in the collection and click Add.
- Then click on the Save button.
Step 3: Access the Theme Editor
Once your collection is ready, go to the Shopify admin panel.
Go to Online Store > Themes.
Select the Dawn Theme and click Customize.
Step 4: Add the Featured Collection Section
In the theme editor, click Add Section from the left panel.
Select Featured Collection to showcase products from a specific collection.
Step 5: Adjust Settings for a Slider Effect
Click on the Featured Collection section.
Select the Collection.
Enable “Enable Carousel on Desktop”
Set the Number of Products to display per slide to achieve the slider effect.
Then, click on the Save button.
Output
Important Note: The Featured Collection section in the Shopify Dawn theme is optimized for desktop devices. It is not effective on mobile or tablet devices. If you wanna more control over your product slider, then apply the next methods.
Create a Product Slider in Shopify Using the Custom Code
If the built-in options in the Shopify Dawn/Horizon theme don’t meet your needs, you can add a product slider using custom code. This requires advanced technical skills. Custom coding can lead to issues, such as poor responsiveness on different devices or outdated code. These problems may cause the slider to stop working or require fixes later.
So, before adding the custom product slider code to your theme file, back up your theme. Syncora: Backup & Restore is one of the best Shopify apps to back up orders, customers, products, data, apps, etc. For this guide, we are using Syncora, the reliable solution. You can also install the Syncora on your Shopify Store.
Create a Product Slider on Shopify with Custom Liquid Code
Building a custom Shopify product slider using Liquid code offers a wide range of flexible sliders. But it requires technical skills like coding. However, I have provided the custom liquid code for free with a step-by-step guide below:
Step 1: Copy the Shopify Product Slider Liquid Code
First, copy this liquid code to create a custom Shopify product slider.
{% liquid
assign slider_id = 'shopidevs-product-slider-' | append: section.id
assign chosen_collection = collections[section.settings.collection]
assign products_limit = section.settings.products_to_show
%}
<section class="shopidevs-product-slider-section" id="{{ slider_id }}">
<div class="page-width">
{% if section.settings.heading != blank %}
<div class="shopidevs-product-slider__header">
<h2 class="shopidevs-product-slider__title">{{ section.settings.heading | escape }}</h2>
{% if section.settings.show_view_all and chosen_collection != blank %}
<a class="shopidevs-product-slider__view-all" href="{{ chosen_collection.url }}">
View all
</a>
{% endif %}
</div>
{% endif %}
{% if chosen_collection != blank and chosen_collection.products_count > 0 %}
<div class="swiper shopidevs-product-slider js-shopidevs-swiper-{{ section.id }}">
<div class="swiper-wrapper">
{% for product in chosen_collection.products limit: products_limit %}
<div class="swiper-slide">
<div class="shopidevs-product-card">
<a href="{{ product.url }}" class="shopidevs-product-card__image-link">
<div class="shopidevs-product-card__image-wrap">
{% if product.featured_image %}
{{
product.featured_image
| image_url: width: 900
| image_tag:
loading: 'lazy',
widths: '240, 360, 480, 640, 800, 900',
sizes: '(min-width: 990px) calc((100vw - 120px) / 4), (min-width: 750px) calc((100vw - 80px) / 2), 80vw',
class: 'shopidevs-product-card__image shopidevs-product-card__image--primary',
alt: product.featured_image.alt | escape
}}
{% else %}
{{ 'product-1' | placeholder_svg_tag: 'shopidevs-product-card__image shopidevs-product-card__image--primary placeholder-svg' }}
{% endif %}
{% assign hover_image = product.images[1] %}
{% if hover_image != blank %}
{{
hover_image
| image_url: width: 900
| image_tag:
loading: 'lazy',
widths: '240, 360, 480, 640, 800, 900',
sizes: '(min-width: 990px) calc((100vw - 120px) / 4), (min-width: 750px) calc((100vw - 80px) / 2), 80vw',
class: 'shopidevs-product-card__image shopidevs-product-card__image--hover',
alt: hover_image.alt | escape
}}
{% endif %}
</div>
</a>
<div class="shopidevs-product-card__content">
<a href="{{ product.url }}" class="shopidevs-product-card__title">
{{ product.title | escape }}
</a>
{% if section.settings.show_vendor and product.vendor != blank %}
<div class="shopidevs-product-card__vendor">{{ product.vendor | escape }}</div>
{% endif %}
{% if section.settings.show_price %}
<div class="shopidevs-product-card__price">
{% if product.compare_at_price > product.price %}
<span class="shopidevs-product-card__price--sale">
{{ product.price | money }}
</span>
<span class="shopidevs-product-card__price--compare">
{{ product.compare_at_price | money }}
</span>
{% else %}
<span>{{ product.price | money }}</span>
{% endif %}
</div>
{% endif %}
{% if section.settings.show_button %}
<a href="{{ product.url }}" class="shopidevs-product-card__button">
{{ section.settings.button_label | escape }}
</a>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
{% if section.settings.show_arrows %}
<button class="shopidevs-product-slider__nav shopidevs-product-slider__nav--prev" aria-label="Previous slide" type="button">
←
</button>
<button class="shopidevs-product-slider__nav shopidevs-product-slider__nav--next" aria-label="Next slide" type="button">
→
</button>
{% endif %}
{% if section.settings.show_dots %}
<div class="shopidevs-product-slider__pagination"></div>
{% endif %}
</div>
{% else %}
<div class="shopidevs-product-slider__empty">
Choose a collection with products to display the slider.
</div>
{% endif %}
</div>
</section>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css">
<style>
#{{ slider_id }} {
margin-top: {{ section.settings.margin_top }}px;
margin-bottom: {{ section.settings.margin_bottom }}px;
}
#{{ slider_id }} .shopidevs-product-slider__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
}
#{{ slider_id }} .shopidevs-product-slider__title {
margin: 0;
font-size: 28px;
line-height: 1.2;
}
#{{ slider_id }} .shopidevs-product-slider__view-all {
text-decoration: none;
font-size: 14px;
}
#{{ slider_id }} .shopidevs-product-slider {
position: relative;
overflow: hidden;
width: 100%;
padding-bottom: 36px;
}
#{{ slider_id }} .swiper-wrapper {
align-items: stretch;
}
#{{ slider_id }} .swiper-slide {
height: auto;
box-sizing: border-box;
}
#{{ slider_id }} .shopidevs-product-card {
background: #fff;
border: 1px solid rgba(0,0,0,0.08);
border-radius: 14px;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
}
#{{ slider_id }} .shopidevs-product-card__image-link {
display: block;
text-decoration: none;
}
#{{ slider_id }} .shopidevs-product-card__image-wrap {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #f7f7f7;
}
#{{ slider_id }} .shopidevs-product-card__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: opacity 0.35s ease, transform 0.35s ease;
}
#{{ slider_id }} .shopidevs-product-card__image--primary {
opacity: 1;
z-index: 1;
}
#{{ slider_id }} .shopidevs-product-card__image--hover {
opacity: 0;
z-index: 2;
}
#{{ slider_id }} .shopidevs-product-card:hover .shopidevs-product-card__image--hover {
opacity: 1;
}
#{{ slider_id }} .shopidevs-product-card:hover .shopidevs-product-card__image--primary {
opacity: 0;
}
#{{ slider_id }} .shopidevs-product-card:hover .shopidevs-product-card__image {
transform: scale(1.03);
}
#{{ slider_id }} .shopidevs-product-card__content {
padding: 14px;
}
#{{ slider_id }} .shopidevs-product-card__title {
display: block;
text-decoration: none;
color: inherit;
font-weight: 600;
margin-bottom: 8px;
line-height: 1.4;
}
#{{ slider_id }} .shopidevs-product-card__vendor {
font-size: 13px;
opacity: 0.75;
margin-bottom: 8px;
}
#{{ slider_id }} .shopidevs-product-card__price {
margin-bottom: 12px;
font-size: 15px;
}
#{{ slider_id }} .shopidevs-product-card__price--sale {
font-weight: 700;
margin-right: 8px;
}
#{{ slider_id }} .shopidevs-product-card__price--compare {
text-decoration: line-through;
opacity: 0.65;
}
#{{ slider_id }} .shopidevs-product-card__button {
display: inline-block;
text-decoration: none;
padding: 10px 14px;
border-radius: 8px;
border: 1px solid {{ section.settings.button_border_color }};
background: {{ section.settings.button_bg_color }};
color: {{ section.settings.button_text_color }};
transition: all 0.25s ease;
}
#{{ slider_id }} .shopidevs-product-card__button:hover {
background: {{ section.settings.button_hover_bg_color }};
color: {{ section.settings.button_hover_text_color }};
border-color: {{ section.settings.button_hover_bg_color }};
}
#{{ slider_id }} .shopidevs-product-slider__nav {
position: absolute;
top: 42%;
transform: translateY(-50%);
z-index: 3;
width: 42px;
height: 42px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,0.15);
background: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
#{{ slider_id }} .shopidevs-product-slider__nav--prev {
left: 8px;
}
#{{ slider_id }} .shopidevs-product-slider__nav--next {
right: 8px;
}
#{{ slider_id }} .shopidevs-product-slider__pagination {
margin-top: 18px;
text-align: center;
}
#{{ slider_id }} .shopidevs-product-slider__empty {
padding: 20px;
border: 1px dashed rgba(0,0,0,0.2);
border-radius: 12px;
}
@media screen and (max-width: 749px) {
#{{ slider_id }} .shopidevs-product-slider__title {
font-size: 22px;
}
#{{ slider_id }} .shopidevs-product-slider__nav {
display: none;
}
}
</style>
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js" defer></script>
<script>
(function() {
const sliderRootId = '{{ slider_id }}';
const sliderSelector = '#' + sliderRootId + ' .js-shopidevs-swiper-{{ section.id }}';
let shopidevsSwiperInstance;
function initShopiDevsSwiper() {
const sliderEl = document.querySelector(sliderSelector);
if (!sliderEl || typeof Swiper === 'undefined') return;
if (shopidevsSwiperInstance && typeof shopidevsSwiperInstance.destroy === 'function') {
shopidevsSwiperInstance.destroy(true, true);
}
shopidevsSwiperInstance = new Swiper(sliderEl, {
loop: {{ section.settings.enable_loop }},
{% if section.settings.auto_rotate %}
autoplay: {
delay: {{ section.settings.autoplay_delay | times: 1000 }},
disableOnInteraction: false
},
{% endif %}
observer: true,
observeParents: true,
watchOverflow: true,
spaceBetween: 16,
slidesPerView: 1.2,
breakpoints: {
750: {
slidesPerView: 2.2
},
990: {
slidesPerView: {{ section.settings.desktop_columns }}
}
},
{% if section.settings.show_arrows %}
navigation: {
nextEl: '#{{ slider_id }} .shopidevs-product-slider__nav--next',
prevEl: '#{{ slider_id }} .shopidevs-product-slider__nav--prev'
},
{% endif %}
{% if section.settings.show_dots %}
pagination: {
el: '#{{ slider_id }} .shopidevs-product-slider__pagination',
clickable: true
},
{% endif %}
on: {
init: function() {
this.update();
}
}
});
setTimeout(function() {
if (shopidevsSwiperInstance) {
shopidevsSwiperInstance.update();
}
}, 300);
}
function waitForSwiperAndInit(retryCount) {
if (typeof Swiper !== 'undefined') {
initShopiDevsSwiper();
} else if (retryCount < 20) {
setTimeout(function() {
waitForSwiperAndInit(retryCount + 1);
}, 150);
}
}
document.addEventListener('DOMContentLoaded', function() {
waitForSwiperAndInit(0);
});
document.addEventListener('shopify:section:load', function(event) {
if (event.target && event.target.querySelector('.js-shopidevs-swiper-{{ section.id }}')) {
waitForSwiperAndInit(0);
}
});
document.addEventListener('shopify:section:reorder', function() {
waitForSwiperAndInit(0);
});
document.addEventListener('shopify:section:select', function(event) {
if (event.target && event.target.querySelector('.js-shopidevs-swiper-{{ section.id }}')) {
setTimeout(function() {
if (shopidevsSwiperInstance) {
shopidevsSwiperInstance.update();
} else {
waitForSwiperAndInit(0);
}
}, 250);
}
});
window.addEventListener('resize', function() {
if (shopidevsSwiperInstance) {
shopidevsSwiperInstance.update();
}
});
})();
</script>
{% schema %}
{
"name": "ShopiDevs-Product-Slider",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Featured products"
},
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "range",
"id": "products_to_show",
"label": "Products to show",
"min": 4,
"max": 20,
"step": 1,
"default": 8
},
{
"type": "range",
"id": "desktop_columns",
"label": "Products visible on desktop",
"min": 2,
"max": 5,
"step": 1,
"default": 4
},
{
"type": "checkbox",
"id": "show_price",
"label": "Show price",
"default": true
},
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show vendor",
"default": false
},
{
"type": "checkbox",
"id": "show_button",
"label": "Show button",
"default": true
},
{
"type": "text",
"id": "button_label",
"label": "Button label",
"default": "Shop now"
},
{
"type": "color",
"id": "button_bg_color",
"label": "Button background color",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_text_color",
"label": "Button text color",
"default": "#111111"
},
{
"type": "color",
"id": "button_border_color",
"label": "Button border color",
"default": "#dddddd"
},
{
"type": "color",
"id": "button_hover_bg_color",
"label": "Button hover background color",
"default": "#111111"
},
{
"type": "color",
"id": "button_hover_text_color",
"label": "Button hover text color",
"default": "#ffffff"
},
{
"type": "checkbox",
"id": "show_view_all",
"label": "Show View all link",
"default": true
},
{
"type": "checkbox",
"id": "show_arrows",
"label": "Show arrows",
"default": true
},
{
"type": "checkbox",
"id": "show_dots",
"label": "Show dots",
"default": true
},
{
"type": "checkbox",
"id": "enable_loop",
"label": "Enable loop",
"default": false
},
{
"type": "checkbox",
"id": "auto_rotate",
"label": "Auto rotate",
"default": false
},
{
"type": "range",
"id": "autoplay_delay",
"label": "Auto rotate speed (seconds)",
"min": 3,
"max": 10,
"step": 1,
"default": 5
},
{
"type": "range",
"id": "margin_top",
"label": "Top spacing",
"min": 0,
"max": 100,
"step": 4,
"default": 32
},
{
"type": "range",
"id": "margin_bottom",
"label": "Bottom spacing",
"min": 0,
"max": 100,
"step": 4,
"default": 32
}
],
"presets": [
{
"name": "ShopiDevs-Product-Slider"
}
]
}
{% endschema %}Step 2: Go to “Theme Code Editor”
- Log in to your shopify store admin panel.
- Click on the (…) 3 dots.
- Then go to the “Edit code.”
Step 3: Create a New Section for the Custom Product Slider Section
- Open the “Sections” folder.
- Create a new file for the custom Shopify product slider. I have named the section ‘shopidevs-product-slider.liquid’
Step 4: Paste the Custom Liquid Code & Save
- Paste the custom liquid code that you have copied in step 1.
- Save the changes.
Step 5: Go to “Theme Editor”
- Now, click on the “Edit Theme” to customize your storefront by adding the shopify product slider.
Step 6: Add New Section “Custom Product Slider”
- Click on the “Add Section“.
- Then add your custom Shopify product slider.
Step 7: Choose a Collection and Save
- Select the “Product Slider” section.
- Assign a collection to the product slider. You can also create a new collection from here.
- Customize all other settings and design based on your branding.
- Then click on the “Save” button.
Preview
If you’re a skilled developer, you can try this yourself. But be prepared for testing and troubleshooting to make sure it works well on all devices.
For most users, it’s better to use Shopify’s default carousel or a slider app from the Shopify App Store. These options are easier, supported, and reliable, saving you the hassle of coding.
How to Add a Product Slider in Shopify Using Slider Revolution?
Here’s how to create product image sliders with Slider Revolution & Sections, the best Shopify product carousel slider app:
Step 1: Go to your Shopify Dashboard
Go to your Shopify Dashboard, click on Apps, and select Slider Revolution (Shopify product image slider). Install the Slider Revolution & Sections app from the Shopify App Store if you have not installed it yet.
Step 2: Choose a Template
Go to Dashboard. Here you will find the New Slider from Template option for creating a Shopify product page image slider.
This option lets you design your product image slider on Shopify from a ready template. You will have all the essential tools and customization options to customize your image slider.
Slider Revolution & Sections offers a library of 300+ design templates, including static and dynamic product slider templates.
After selecting a template, click on the Install Template (+) button.
You’ll then be redirected to the Slider Revolution and Section’s My Slider Page. Click on the Pencil Icon to open the editor.
On the Editor page, you’ll have access to all the tools needed to design and customize your product slider for Shopify.
Step 3: Publish the Slider
Copy the Shortcode of the template from the Slider Revolution Editor.
NB: Don’t forget to save the template before copying the Shortcode.
Go to the Shopify Store dashboard. Navigate to Themes and select Customize.
In the theme editor, navigate to the part where you want to add a new section.
Then click on the Add Section or Add Block option.
Now, click on Apps and choose any one from the following options:
- General Slider: To add a Static Product Slider
- Dynamic Product Slider: To add a Dynamic Product Slider
Now paste the shortcode in the Slider Shortcode box and click the Save button. The product images will now be visible in your store.
Step 4: Check Preview
After completing all customizations, click Save and then Preview. This lets you check user experience and design mistakes to make final adjustments in your display product sliders before publishing.
Output
Create the Product Slider Using EasyDisplay: Product Showcase
First, install the Free EasyDisplay: Product Showcase app from the Shopify app store
Install from here: Get EasyDisplay: Product Showcase App. Now just click the Install button. That’s it.
After completing the installation, it’s time to customize the product slider. First, go to the EasyDisplay: Product Showcase app. Now click the Showcase button. Now you will see the window like this:
Now, put the title and select the product > select layout > select templates > and customize your style. After completing the customization, click the Save button. Then you will see a list of items created.
Now copy the Showcase ID and go to Online Stores> Theme> Customizes> App Add block(select product showcase)> Paste the ID.
Watch Video: How to Create Product Showcase (Slider, Gallery, Recommended) for Shopify Easily
Watch Now: Desktop, Tablet & Mobile Responsive Settings for Shopify EasyDisplay: Product Showcase
Watch Now: How to Showcase the Related Products in Shopify by EasyDisplay: Product Showcase
This is how you can create product sliders easily by using EasyDisplay Product Showcase.
Conclusion
A Shopify product slider is not just for design. It helps you show important products quickly with interactive designs. You can highlight best-sellers, new arrivals, or special offers. It also makes browsing easier for your visitors.
But you need to use it carefully. Keep your slider fast and simple. Do not add too many products. Avoid fast auto-sliding. Make sure your main message is clearly visible.
Start with a simple product slider and test what works. Then monitor how users interact with your store’s product slider section. Then, improve your slider step by step. A well-optimized product slider can increase engagement and help you get more sales.
FAQs
Why Should You Use a Shopify Slider?
Using a Shopify slider can enhance your online store in several ways. First, it lets you show many products or promotional banners in one small space. This grabs attention and shares key messages.
Additionally, sliders are often equipped with custom navigation options. This enables users to easily browse through content. Moreover, Shopify sliders can be customized to fit your brand’s aesthetic. It ensures a cohesive look while still providing functionality. Overall, a slider offers a more dynamic shopping experience for customers.
How Product Sliders Can Boost Sales?
Product sliders help to boost sales by enhancing the online shopping experience. They let customers look at many products quickly in one place. This keeps shoppers interested and encourages them to explore more.
Sliders also show special deals, new items, or best-sellers. This leads to attracting shoppers’ attention, increasing engagement, and generating more sales. With a clear and attractive design, sliders make it simple for customers to find what they like. This helps stores to sell more and keeps shoppers happy.
Which Shopify Product Slider App is the Best?
The Slider Revolution & Sections app is the best choice for a Product Slider on Shopify.
This app offers:
✓ 600+ Premium Templates to create stunning sliders.
✓ Code-free Customization, making it easy to use.
✓ Advanced Editing Tools for a polished design.
✓ Free and Paid Plans to fit different needs and budgets.
It’s a great way to make your store look professional and attract more shoppers.
Jakaria is an SEO Content Writer in Shopify, Ecommerce, WordPress, and Tech Industry with 5+ years of experience. He specialises in developing engaging, helpful content by simplifying complex topics into an amazing story for B2B, SaaS, and Shopify businesses. He’s also passionate about staying updated on growth marketing strategies and Shopify trends.
