How to Add Featured Product Slider To Your Shopify Store: Step-By-Step – EcomExperts
Shopify Blog

How to Add Featured Product Slider To Your Shopify Store: Step-By-Step Tutorial

Andrew Durot
8 min read

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 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 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!

3 comments

  • 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

    Miguel
  • 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

    Mehdi
  • There is now option for how to add a product slider in the dropdown menu

    Ravi Singh

Leave a comment

About Andrew Durot

He is the co-founder of Ecom Experts, a Shopify focused development agency. 

Ecom Experts and Andrew's team have been focused on speed optimization - increasing the speed of over 300 stores in last year alone.

Speed Optimization is a repetitive & time-consuming task that most veteran Shopify experts try to avoid.

Andrew and his team has taken it upon themselves to maser the subject and become the largest speed optimization team on he Shopify platform even building out the only Shopify specific speedchecker tool!

Check Your Speed

Guides

3 comments

  • 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

    Miguel
  • 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

    Mehdi
  • There is now option for how to add a product slider in the dropdown menu

    Ravi Singh

Leave a comment