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

<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 %}

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