How to Add Featured Product Slider To Your Shopify Store: Step-By-Step Tutorial
A product slider is a visual aide, a little bit like a small slideshow for your products. It gives your store a more professional look, therefore increasing interest and conversions.
Have you ever been in other peoples’ stores and seen a product slider? You might have thought: “Wow, that’s a cool feature. I wonder if I can add one of those to my Shopify store.” The answer is yes, you can. And it’s not hard to do. Just follow the instructions in this product slider Shopify tutorial.
Featured Product Slider Shopify
Step 1: Duplicate your live theme
From your Shopify admin go to Online store and choose themes. Next to the live theme click on Actions and choose Duplicate. This way you will have a backup of your live theme in case you miss some step and it has a negative impact on your store.
Step 2: Add a new section
Now that you have the duplicate of your theme you can click on Actions again, but this time choose Edit Code.
From the navigation to the left go to the Sections directory and choose Add a new section. Name it Feature-slider and paste the following code into the new file:
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
{% comment %}
* Make sure you have the Flickity plugin installed and the proper license for this to function on your store
* Plugin, licensing and documentation at https://flickity.metafizzy.co/
{% endcomment %}
{% assign collection_main = collections[section.settings.collection_main] %}
{% assign collection_limit = section.settings.collection_limit %}
{% assign cell_align = section.settings.cell_align %}
{% assign wrap_around = section.settings.wrap_around %}
{% assign img_width = section.settings.img_width | append: 'x' %}
<div class="flickity-section-{{ section.id }} flickity-index-slider collection" style="background-color: {{ section.settings.bg }}">
<div class="page-width">
<div>
<p class="text-title text-center" style="margin-bottom:{{ section.settings.title_mb }}px">{{ section.settings.title }}</p>
</div>
<div class="flickity-section__carousel carousel-{{section.id }} text-center"
data-flickity='{
"cellAlign": "{{ cell_align }}",
"pageDots": false,
"freeScroll": true,
"contain": true,
"wrapAround": {{ wrap_around }}
}'>
{% for product in collection_main.products limit: collection_limit %}
{%- if product.metafields.inventory.ShappifyHidden == 'true' -%}{%- continue -%}{%- endif -%}
{% assign first_variant = product.selected_or_first_available_variant %}
{% assign featured_img_src = first_variant.featured_img.src | default: product.featured_image.src %}
{% assign price = first_variant.price %}
{% assign compare_at_price = first_variant.compare_at_price %}
<div class="carousel__cell" style="width:{{ section.settings.cell_width }};margin-right:{{ section.settings.mr }}px">
<a href="{{ product.url }}">
<img class="lazyload" data-src="{{ featured_img_src | img_url: img_width }}" alt="{{ product.featured_img.alt }}" />
</a>
<a href="{{ product.url }}">
<h5>{{ product.title }}</h5>
</a>
{% if compare_at_price > price %}
<s class="product__compare-at-price">{{ compare_at_price | money }}</s>
<p class="product__product-price">{{ price | money }}</p>
{% else %}
<p class="product__product-price">{{ price | money }}</p>
{% endif %}
</div>
{% endfor %}
{% comment %}
{% for block in section.blocks %}
{% assign block_product = all_products[block.settings.featured_product] %}
{% assign block_first_variant = block_product.selected_or_first_available_variant %}
{% assign featured_img_src = block_first_variant.featured_img.src | default: block_product.featured_image.src %}
{% assign price = block_first_variant.price %}
{% assign compare_at_price = block_first_variant.compare_at_price %}
<div class="carousel__cell" style="width:{{ section.settings.cell_width }};margin-right:{{ section.settings.mr }}px">
{% if block.settings.featured_product != blank %}
<a href="{{ block_product.url }}">
<img class="lazyload" data-src="{{ featured_img_src | img_url: img_width }}" alt="{{ block_product.featured_img.alt }}" />
</a>
{% else %}
{{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
<a href="{{ block_product.url }}">
<h5>{{ block_product.title }}</h5>
</a>
{% if compare_at_price > price %}
<s class="block-product__compare-at-price">{{ compare_at_price | money }}</s>
<p class="block-product__product-price">{{ price | money }}</p>
{% else %}
<p class="block-product__product-price">{{ price | money }}</p>
{% endif %}
</div>
{% endfor %}
{% endcomment %}
</div>
</div>
</div>
{% schema %}
{
"name": "Collection Slider",
"settings": [
{
"type": "collection",
"id": "collection_main",
"label": "Choose a Collection"
},
{
"type": "range",
"id": "collection_limit",
"min": 2,
"max": 50,
"step": 1,
"unit": ".",
"label": "How many products to show",
"default": 4
},
{
"type": "color",
"id": "bg",
"label": "Background Color"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Featured Collection Slider"
},
{
"type": "range",
"id": "img_width",
"min": 200,
"max": 600,
"step": 5,
"unit": "px",
"label": "Image Width",
"default": 200
},
{
"type": "select",
"id": "cell_align",
"label": "Slide Alignment",
"options": [
{
"value": "center",
"label": "Center"
},
{
"value": "left",
"label": "Left"
}
],
"default": "center"
},
{
"type": "range",
"id": "title_mb",
"min": 30,
"max": 120,
"step": 1,
"unit": "px",
"label": "Title Margin Bottom",
"default": 48
},
{
"type": "select",
"id": "cell_width",
"label": "Choose number of slides to show on start",
"options": [
{
"value": "25%",
"label": "Four"
},
{
"value": "20%",
"label": "Five"
},
{
"value": "16.6666667%",
"label": "Six"
},
{
"value": "12.5%",
"label": "Eight"
}
],
"default": "25%"
},
{
"type": "radio",
"id": "wrap_around",
"label": "Enable Wrap Around (endless scrolling)",
"options": [
{
"value": "true",
"label": "True"
},
{
"value": "false",
"label": "False"
}
],
"default": "true"
},
{
"type": "range",
"id": "mr",
"min": 0,
"max": 48,
"step": 1,
"unit": "px",
"label": "Cell Margin Right",
"default": 16,
"info": "Save page to see changes."
}
],
"presets": [
{
"name": "Collection Slider",
"category": "Slider"
}
]
}
{% endschema %}
Click on Save!
Step 3: Theme.liquid
From the Layout directory choose theme.liquid. Paste the following code inside the HTML tag.
<script src=“https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js”></script>
<link rel=“stylesheet” href=“https://unpkg.com/flickity@2/dist/flickity.min.css”>
Click on Save.
Step 4: Customizer
Go back to your Shopify admin and go to Online store. Next to the theme you customized in the previous step choose Customize.
Find your newly created section, choose the collection you want to feature and that is it!
Product Slideshow Shopify
Now you know how to put a featured product slider in your Shopify store. This is a great feature that is sure to attract a lot of attention to your featured products Shopify and make your store more appealing to your customers. It makes your site more interactive and increases visitor engagement. Product sliders are a win-win for your store. Happy selling!
Guides
- How To Create CUSTOM PRODUCT OPTIONS on Shopify 2.0
- How To Open External Links In A New Tab - Easy Shopify Tutorial
- How To Add Before And After Slider To Shopify - Easy 2022 Tutorial
- How To Add a Background Video To Shopify For Free
- How To Embed TikTok Videos To Any Shopify Page For Free
- Create Product Bundles Without The App - 2022 Easy Shopify Tutorial!
- Add Back to Top Button on Shopify Using Code: Detailed Tutorial
- How to Add A Custom Cart Icon on Shopify Using Code: Detailed Tutorial
- How to Add Breadcrumb Navigation to Your Shopify Store: DIY Tutorial Using Code
- How to Add Sales Countdown Timer to Your Shopify Store
- Cumulative Layout Shift Optimization: Causes and How to Measure It
- Ask How Customers Heard About Your Store On The Cart Page - 2022 Shopify Tutorial
- How to create a simple Quick View without app usage to your Shopify store
- Add A Multiple Currency Selector to Your Shopify Store Using Code Tutorial
- How to Create A Page of Collections on Shopify Using Code
- Show The Number of Products Left in Stock on Your Shopify Product Page
- Change the Number of Products in the Collection Page- Shopify Tutorial
- DIY Guide to Embed A YouTube Video in Shopify Product Page Tutorial
- Add a Message to the Shopify Product Pages by Using Product Tags - 2022 Easy Tutorial
- How to Add a Delivery Date Picker to Your Cart Page - Easy Step-By-Step Shopify Tutorial
- How To Create A Stunning Parallax Scrolling Section In Your Shopify Store Tutorial
- 6-step Tutorial on How to Add Wholesale To Shopify Store Without Shopify Plus
- How to Add Banner Image to Product Pages Without The App - Quick Shopify Tutorial
- How to add Hover Effect on Main Navigation Bar In Shopify
- How to Add A Gallery Page to Your Shopify Store without the App
- Disable Right-click to Protect Your Images on Shopify Using Code - Tutorial
- How to Auto Hide Sold Out Products on Shopify: DIY Tutorial
- DIY Code: How To Add Continue Shopping Button To Your Shopify Cart Page
- How to Create Custom Product Options on Shopify Without the App in 2022
- How to Select Variants By Clicking Their Images on Shopify
- How to Create a Custom Note Field on Your Shopify Cart Page
- How to Enable Custom File Upload Product Options on Shopify
- How To Show An Alternate Product Image On Your Shopify - Easy Step-By-Step Tutorial
- Step-by-Step Tutorial to Set Up Facebook Messenger Chat On Shopify Without App
- DIY Code To Add a Size Chart to Shopify Product Pages
- How To Redirect Shopify Customers After Login, Logout & Account Creation
- 4 Steps to Create a Sticky Header on Shopify: DIY Code
- How to Add Featured Product Slider To Your Shopify Store: Step-By-Step Tutorial
- Shopify Product Description Tabs: 5 easy steps to create your own collapsable descriptions
- Shopify Quick ADD TO CART Button On Collection Page Without The App
- How To Add a CUSTOM FONT To Your Shopify Store
5 comments
-
To the ecomexperts.io Owner, exact same below: Link Text
-
How Are You
I couldn’t refrain from commenting. Perfectly written!
https://cutt.ly/I0UIBBS
Best Regards
-
Thank you for this helpful tutorial.
However, can you tell me how to add a product collection image to the left?
Like splitting the page into two: left side is a customizable collection image, and right side that has the product slider for that collection.
Thanks
-
Hi Andrew
thank you very much for this video
I just uses the code for featured product slider. It works very well on PC view but on mobile it’s not optimized, I just need to have 2 product in stand of 4. Is it possible to tell me how do it ?Thanks
Mehdi -
There is now option for how to add a product slider in the dropdown menu
LEARN MORE
Get ahead with the latest in e-commerce and Shopify Plus

How Headphones.com Mobile Speed Score Went From 21 to 76 In 48 Hours
5 comments
To the ecomexperts.io Owner, exact same below: Link Text
How Are You
I couldn’t refrain from commenting. Perfectly written!
https://cutt.ly/I0UIBBS
Best Regards
Thank you for this helpful tutorial.
However, can you tell me how to add a product collection image to the left?
Like splitting the page into two: left side is a customizable collection image, and right side that has the product slider for that collection.
Thanks
Hi Andrew
thank you very much for this video
I just uses the code for featured product slider. It works very well on PC view but on mobile it’s not optimized, I just need to have 2 product in stand of 4. Is it possible to tell me how do it ?
Thanks
Mehdi
There is now option for how to add a product slider in the dropdown menu