☘️Product Slider - User Guide

Product Sliders can make your store show a large number of products in a tidy and professional way keeping your site fast. And it makes your site look much more professional, clean and sharp in your potential customers’ eyes.

With Featured Product Slider app, it allows you to create easily attractive product slider (Featured products (select manually), Related products, Products slider by collection, recently viewed products) carousel on your site or shop and increase conversions & sales. You can display product slider on pages, product page, collection page, blog.

PRODUCT SLIDER APP FEATURES (Featured products (select manually), Related products, Products slider by collection, recently viewed products)

Show icon and discount percentage for sale off products

Slider column number

You can set custom number of slider column number for different devices like desktop, tablet and mobile

Slider autoplay

You can choose slider autoplay on page load completed, so that slider will automatically slide your product to display your customers. You can also set custom values for autoplay speed and timeout

Slider rewind & loop

You can set the slider to re-wind when slide item reached to end of the slider and it will automatically start slider from first product. You can also set loop so that slider will never stop and continuously slide to loop through each product

Slider stops on hover

When your customer wants to see a product on the slider it will automatically stop sliding so that your customer can drag by mouse or touch on mobile device to check their desired products

Slider navigations

You can display slider navigations so that user can click these to check or slide product one by one.

Slider dots

You can display slider pagination or dots at bottom so that user can click these to check or slide product by each screen

Slider RTL

If your website is running with RTL languages you are feel free to use, this slider plugin has great support for RTL languages

Slider lazy load

You can enable lazy load to delay load product thumbnails which product is not in current view, it will increase your page speed and great support for SEO friendly product slider for your store

Touch & Mouse drag

This is responsive product slider so your customer can slide product by mouse drag or touch dragging based on their devices

Query products limit

You can set custom number of query products, like you want to display only 10 items from latest product release. It will save and minimize database query to load faster product slider

Featured product You can choose to display or hide featured product on the slider.

Other features of Product Slider

Compatible with all Page Builder apps.

Compatible with Online Store 2.0

User Guide:

Install app

After installed our Featured Product Slider app, the app will redirect you to the Manage Sliders screen.

Step 1: Enable App embeds

From your store admin, go to Online Store > Themes > Customize > App embeds

Step 2: Add a slider item

Click the Add slider button to add new a product slider

Put the Title, select the Next/Prev navigation style, select Slider type: Featured, Collection, Related/Recommended, Recently viewed, Tag.

Edit a product slider

From the Manage Sliders screen, click the Edit button on a slider you want to edit.

Save the slider.

Step 3: Embed slider

Get the Slider ID to show slider to anywhere on your store.

For example: show the slider into your homepage. Please go to Online Store > Themes > Customize > Add section > Add product slider Paste the product slider ID and save changes.

If your theme is NOT 2.0, you can not add app block. So you need to contact us, we will help you integrate our app with your theme. Or you can view the integration code below

Integration code (If your theme is NOT 2.0)

1. Create sections/zify-product-slider-block.liquid

{{ section.settings.zify_custom_liquid }}
<link rel="stylesheet" href="{{ 'zify-products-slider.css' | asset_url }}">
{% schema %}
{
   "name": "Zify Custom Liquid",
   "settings": [
   {
      "type": "liquid",
      "id": "zify_custom_liquid",
      "label": "Zify Custom Liquid",
      "info": "Add app snippets or other liquid code to create advanced customizations."
   }],
   "presets": [
   {
      "name": "Zify Custom Liquid"
   }]
}
{% endschema %}

1. Create snippets/zify-products-slider.liquid

{% assign zify_products_slider_settings = shop.metafields.zify_products_slider.settings %}  
{% assign slider_id = slider_id %}
{% assign sliders_array = zify_products_slider_settings.sliders_array %}
{% assign slider_settings = zify_products_slider_settings.slider_settings %}
{% assign settings_data = zify_products_slider_settings.settings %}
{% assign slider_isFreePlan = zify_products_slider_settings.slider_isFreePlan %}
{% assign trans = zify_products_slider_settings.trans %}
{% assign img_size = zify_products_slider_settings.size %}

{% for sliderItemArr in sliders_array %}
  {% for sliderItem in sliderItemArr %}
    
    {% if sliderItem.id == slider_id and sliderItem.type == 'manual' %}
      <div class="product-slider" id="product-slider-{{ sliderItem.id }}"></div>
      {% render 'products-featured', 
          sliderItem: sliderItem, 
          slider_settings: slider_settings, 
          settings_data: settings_data, 
          slider_isFreePlan: slider_isFreePlan, 
          trans: trans, 
          img_size: img_size, 
      %}
      {% break %}
    {% endif %}

    {% if sliderItem.id == slider_id and sliderItem.type == 'collections_slider' %}
      <div class="product-slider" id="product-slider-{{ sliderItem.id }}"></div>
      {% render 'products-collection', 
          sliderItem: sliderItem, 
          slider_settings: slider_settings, 
          settings_data: settings_data, 
          slider_isFreePlan: slider_isFreePlan, 
          trans: trans, 
          img_size: img_size, 
      %}
      {% break %}
    {% endif %}

    {% if sliderItem.id == slider_id and sliderItem.type == 'product_type' %}
      <div class="product-slider" id="product-slider-{{ sliderItem.id }}"></div>
      {% if template.name == 'product' %}
        {% render 'products-related-type', 
            sliderItem: sliderItem, 
            slider_settings: slider_settings, 
            settings_data: settings_data, 
            slider_isFreePlan: slider_isFreePlan, 
            trans: trans, 
            img_size: img_size, 
        %}
      {% else %}
        <div style="background: antiquewhite;padding: 10px;">The related product block is available only on the product page.</div>
      {% endif %}
      {% break %}
    {% endif %}

    {% if sliderItem.id == slider_id and sliderItem.type == 'collection' %}
      <div class="product-slider" id="product-slider-{{ sliderItem.id }}"></div>
      {% if template.name == 'product' %}
        {% render 'products-related-collection', 
            sliderItem: sliderItem, 
            slider_settings: slider_settings, 
            settings_data: settings_data, 
            slider_isFreePlan: slider_isFreePlan, 
            trans: trans, 
            img_size: img_size, 
        %}
      {% else %}
        <div style="background: antiquewhite;padding: 10px;">The related product block is available only on the product page.</div>
      {% endif %}
      {% break %}
    {% endif %}

    {% if sliderItem.id == slider_id and sliderItem.type == 'tag' %}
      <div class="product-slider" id="product-slider-{{ sliderItem.id }}"></div>
      {% if template.name == 'product' %}
        {% render 'products-related-tag', 
            sliderItem: sliderItem, 
            slider_settings: slider_settings, 
            settings_data: settings_data, 
            slider_isFreePlan: slider_isFreePlan, 
            trans: trans, 
            img_size: img_size, 
        %}
      {% else %}
        <div style="background: antiquewhite;padding: 10px;">The related product block is available only on the product page.</div>
      {% endif %}
      {% break %}
    {% endif %}

    {% if sliderItem.id == slider_id and sliderItem.type == 'vendor' %}
      <div class="product-slider" id="product-slider-{{ sliderItem.id }}"></div>
      {% if template.name == 'product' %}
        {% render 'products-related-vendor', 
            sliderItem: sliderItem, 
            slider_settings: slider_settings, 
            settings_data: settings_data, 
            slider_isFreePlan: slider_isFreePlan, 
            trans: trans, 
            img_size: img_size, 
        %}
      {% else %}
        <div style="background: antiquewhite;padding: 10px;">The related product block is available only on the product page.</div>
      {% endif %}
      {% break %}
    {% endif %}

    {% if sliderItem.id == slider_id and sliderItem.type == 'recently' %}
      <div class="product-slider" id="product-slider-{{ sliderItem.id }}"></div>
      
      {% break %}
    {% endif %}

  {% endfor %}
  
{% endfor %}

1. Create snippets/products-featured.liquid

{%- liquid
	assign slider_title = sliderItem.title
	assign zify_slider_nav = sliderItem.nav
	assign zify_slider_products = sliderItem.products | split: '/'
	assign zify_slider_products_ids = sliderItem.ids
	assign product_limit = settings_data.limit
	assign slider_show_title = settings_data.display_title
	assign slider_remove_copyright = settings_data.remove_copyright
	assign slider_isFreePlan = slider_isFreePlan
	assign slider_price = settings_data.display_price
	assign slider_addtocart = settings_data.display_btn
	assign slider_viewmore = settings_data.show_viewmore
	assign slider_rtl = slider_settings.rtl
	assign slider_lazyLoad = slider_settings.lazyLoad
	assign slider_loop = slider_settings.loop
	assign slider_rewind = slider_settings.rewind
	assign slider_autoplayHoverPause = slider_settings.autoplayHoverPause
	assign slider_slide_auto = slider_settings.slide_auto
	assign slider_show_nav = slider_settings.show_nav
	assign slider_show_dots = slider_settings.show_dots
	assign slider_autoplay_timeout = slider_settings.autoplay_timeout
	assign slider_smart_speed = slider_settings.smart_speed
	assign slider_color_success = slider_settings.color_success
	assign slider_bg_success = slider_settings.bg_success
	assign slider_rps_mb = slider_settings.rps_mb
	assign slider_rps_sm = slider_settings.rps_sm
	assign slider_rps_md = slider_settings.rps_md
	assign slider_rps_ln = slider_settings.rps_l
	assign enable_showall = settings_data.enable_showall
	assign show_outofstock = settings_data.show_outofstock
	assign slide_by = settings_data.slide_by
	assign slider_width_img = settings_data.width_img
	assign slider_height_img = settings_data.height_img
	assign slider_crop_img = settings_data.crop_img
	assign slider_scale_img = settings_data.scale_img
	assign slider_show_variants = settings_data.show_variants
	assign slider_open_product_newtab = settings_data.open_product_newtab
	assign btn_add = trans.btn_add
	assign btn_view = trans.btn_view
	assign view_all = trans.view_all
	assign add_success = trans.add_success
	assign slider_enable = settings_data.status
	if settings_data.mode == 1
	  assign slider_class_enable = 'owl-carousel owl-theme'
	else
	  assign slider_class_enable = 'zify-grid-product'
	endif
  
	assign size = slider_width_img | append: 'x' | append: slider_height_img
  -%}
  
  {% for zify_slider in zify_slider_products %}
	{% assign zify_slider_arr = zify_slider | split: '|' %}
	{% assign products = zify_slider_arr[1] | split: ',' %}
	{% assign product_ids = zify_slider_products_ids | split: ',' %}
    
	<div class="zify-slider-item-{{ sliderItem.id }}">
	  {% if slider_show_title == 1 -%}
		<h3 class="zify-silder-title zify-products-slider-title-{{ sliderItem.id }}">{{ slider_title }}</h3>
	  {%- endif %}
	  {% if slider_remove_copyright == 0 and slider_isFreePlan == 1 %}
		<div style="display:block !important;float:right;font-size:12px;color:#999 !important;text-decoration: underline;opacity: 1;z-index: 9999 !important;font-weight: bold;">
		  Product slider by Zifyapps
		</div>
	  {% endif %}
	  <div class="zify-products-slider {{ slider_class_enable }} zify-products-slider-{{ sliderItem.id }}">

        
      {% paginate collections.all.products by 1000 %}
		{% for product_id in product_ids limit: product_limit %}
          {% assign id = product_id | times: 1 %}
		  {% assign product_obj = collections.all.products | where: 'id', id %}
          {% assign product = product_obj[0] %}
		  {% if product %}
			<div class="zify-item-product" id="item-{{ product.id }}">
			  <a
				href="{{ product.url }}"
				title="{{ product.title }}"
				{% if slider_open_product_newtab == 1 %}
				  target="_blank"
				{% endif %}
			  >
				{%- assign featured_image = product.featured_image -%}
				<img
				  src="{{ featured_image | img_url: size, crop: slider_crop_img, scale: slider_scale_img}}"
				  alt="{{ featured_image.alt | escape }}"
				  loading="lazy"
				  width="{{slider_width_img}}"
				  height="{{slider_height_img}}"
				>
				<div class="product-title">{{ product.title }}</div>
			  </a>
  
			  {% if slider_price == 1 %}
				<span class="zify-price">
				  {%- assign variant = product -%}
				  {% if variant.title %}
					{%- assign compare_at_price = variant.compare_at_price -%}
					{%- assign price = variant.price -%}
					{%- assign available = variant.available -%}
				  {% else %}
					{%- assign compare_at_price = 1999 -%}
					{%- assign price = 1999 -%}
					{%- assign available = true -%}
				  {% endif %}
				  {%- assign money_price = price | money -%}
				  <div class="price{% if compare_at_price > price %} price--on-sale{% endif %}" data-price>
					{% if section.settings.show_vendor %}
					  <div class="price__vendor">
						<span class="visually-hidden">{{ 'products.product.vendor' | t }}</span>{{ product.vendor }}
					  </div>
					{% endif %}
					<div class="price__regular">
					  <span class="visually-hidden visually-hidden--inline">
						{{- 'products.product.regular_price' | t -}}
					  </span>
					  <span class="price-item price-item--regular" data-regular-price>
						{% if compare_at_price > price %}
						  {{ compare_at_price | money }}
						{% else %}
						  {{ money_price }}
						{% endif %}
						{% if products.product.sold_out %} {{ 'products.product.sold_out' | t }}{% endif %}
					  </span>
					</div>
					{% if compare_at_price > price %}
					  <div class="price__sale">
						<span class="visually-hidden visually-hidden--inline">
						  {{- 'products.product.sale_price' | t -}}
						</span>
						<s class="zify-product-single__price--compare">{{ compare_at_price | money }}</s>
						<span class="price-item price-item--sale" data-sale-price>{{ money_price }}</span>
						<span class="price-item__label" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>
					  </div>
					{% endif %}
				  </div>
				</span>
			  {% endif %}
  
			  {% if slider_viewmore == 1 %}
				<a
				  href="{{ product.url }}"
				  title="{{ btn_view }} {{ product.title }}"
				  class="product-form__submit button button--full-width button--secondary btn btn btn-default zify-btn-viewmore"
				>
				  {{- btn_view -}}
				</a>
			  {% endif %}
  
			  {% form 'product', product, class: 'product-form zify-addtocart-form' %}
				<div
				  class="product-select-group zify-product-select"
				  {% if product.variants.size < 2 or slider_show_variants == 0 %}
					style="display:none"
				  {% endif %}
				>
				  <select name="id" class="product-select" data-target="{{ product.id }}">
					{%- for variant in product.variants -%}
					  <option
						value="{{ variant.id }}"
						data-compare="{{ variant.compare_at_price | money }}"
						data-price="{{ variant.price | money }}"
						data-image="{{ variant.featured_image | img_url: '300x450', crop:'center', scale:3}}"
					  >
						{{ variant.title }}
					  </option>
					{%- endfor -%}
				  </select>
				</div>
				{% if slider_addtocart == 1 %}
				  {%- if product.available -%}
					<button
					  type="submit"
					  {% unless product.available %}
						disabled="disabled"
					  {% endunless %}
					  class="product-form__submit button button--full-width button--secondary btn btn btn-default zify-addtocart-submit"
					  aria-label="{{ btn_add }}"
					>
					  {{ btn_add }}
					</button>
				  {%- else -%}
					<span class="price__badge price__badge--sold-out">
					  {%- if products.product.sold_out %} {{ 'products.product.sold_out' | t }}{% endif -%}
					</span>
				  {%- endif -%}
				{% endif %}
			  {% endform %}
			  {% if compare_at_price > price %}
				<div class="item_marks">
				  <span class="item_mark item_discount">-{{ compare_at_price | minus: price | times: 100.0 | divided_by: compare_at_price | round }}%</span>
				</div>
			  {% endif %}
			</div>
		  {% endif %}
		{% endfor %}
      {% endpaginate %}
	  </div>
	</div>
  {% endfor %}
  <style type="text/css">
	{% if sliderItem.nav == 6 %}
		.zify-slider-item-{{ sliderItem.id }} .zify-nav .a {fill: none;stroke: #686767;;stroke-width: 400;stroke-miterlimit: 10;}
		.zify-slider-item-{{ sliderItem.id }} .zify-nav .c {fill: none;stroke: #686767;;stroke-width: 400;stroke-miterlimit: 10;}
	{% endif %}
	{% if sliderItem.nav == 7 %}
		.zify-slider-item-{{ sliderItem.id }} .zify-nav .c {fill: #fff;fill-opacity: 0.7;}
		.zify-slider-item-{{ sliderItem.id }} .zify-nav .a {fill: #333;}
	{% endif %}
	{% if sliderItem.nav == 8 %}
		.zify-slider-item-{{ sliderItem.id }} .zify-nav .c {fill: #000;fill-opacity: 0.7;}
		.zify-slider-item-{{ sliderItem.id }} .zify-nav .a {fill: #ddd;}
	{% endif %}
  </style>

1. Create snippets/products-collection.liquid

{%- liquid
	assign slider_title = sliderItem.title
	assign zify_slider_nav = sliderItem.nav
	assign zify_slider_collection = sliderItem.collection_id | split: '/'
	assign product_limit = settings_data.limit
	assign slider_show_title = settings_data.display_title
	assign slider_remove_copyright = settings_data.remove_copyright
	assign slider_isFreePlan = slider_isFreePlan
	assign slider_price = settings_data.display_price
	assign slider_addtocart = settings_data.display_btn
	assign slider_viewmore = settings_data.show_viewmore
	assign slider_rtl = slider_settings.rtl
	assign slider_lazyLoad = slider_settings.lazyLoad
	assign slider_loop = slider_settings.loop
	assign slider_rewind = slider_settings.rewind
	assign slider_autoplayHoverPause = slider_settings.autoplayHoverPause
	assign slider_slide_auto = slider_settings.slide_auto
	assign slider_show_nav = slider_settings.show_nav
	assign slider_show_dots = slider_settings.show_dots
	assign slider_autoplay_timeout = slider_settings.autoplay_timeout
	assign slider_smart_speed = slider_settings.smart_speed
	assign slider_color_success = slider_settings.color_success
	assign slider_bg_success = slider_settings.bg_success
	assign slider_rps_mb = slider_settings.rps_mb
	assign slider_rps_sm = slider_settings.rps_sm
	assign slider_rps_md = slider_settings.rps_md
	assign slider_rps_ln = slider_settings.rps_l
	assign enable_showall = settings_data.enable_showall
	assign show_outofstock = settings_data.show_outofstock
	assign slide_by = settings_data.slide_by
	assign slider_width_img = settings_data.width_img
	assign slider_height_img = settings_data.height_img
	assign slider_crop_img = settings_data.crop_img
	assign slider_scale_img = settings_data.scale_img
	assign slider_show_variants = settings_data.show_variants
	assign slider_open_product_newtab = settings_data.open_product_newtab
	assign btn_add = trans.btn_add
	assign btn_view = trans.btn_view
	assign view_all = trans.view_all
	assign add_success = trans.add_success
	assign slider_enable = settings_data.status
	if settings_data.mode == 1
	  assign slider_class_enable = 'owl-carousel owl-theme'
	else
	  assign slider_class_enable = 'zify-grid-product'
	endif
  
	assign size = slider_width_img | append: 'x' | append: slider_height_img
  -%}
  
  {% for collect_item in zify_slider_collection %}
	{% assign collection = collections[collect_item] %}
	{% assign products = collection.products %}
  
	<div class="zify-slider-item-{{ sliderItem.id }}">
	  {% if slider_show_title == 1 -%}
		<h3 class="zify-silder-title zify-products-slider-title-{{ sliderItem.id }}">{{ slider_title }}</h3>
	  {%- endif %}
	  {% if slider_remove_copyright == 0 and slider_isFreePlan == 1 %}
		<div style="display:block !important;float:right;font-size:12px;color:#999 !important;text-decoration: underline;opacity: 1;z-index: 9999 !important;font-weight: bold;">
		  Product slider by Zifyapps
		</div>
	  {% endif %}
	  <div class="zify-products-slider {{ slider_class_enable }} zify-products-slider-{{ sliderItem.id }}">
		{% for product in products limit: product_limit %}
		  {%- assign variant = product -%}
		  {% if variant.title %}
			{%- assign compare_at_price = variant.compare_at_price -%}
			{%- assign price = variant.price -%}
			{%- assign available = variant.available -%}
		  {% else %}
			{%- assign compare_at_price = 1999 -%}
			{%- assign price = 1999 -%}
			{%- assign available = true -%}
		  {% endif %}
		  {% if available == false and show_outofstock == 0 %}
			{% continue %}
		  {% else %}
			<div
			  class="zify-item-product {% if available %} instock {% else %} zify-item-outofstock {% endif %}"
			  id="item-{{ product.id }}"
			>
			  <a
				href="{{ product.url }}"
				title="{{ product.title }}"
				{% if slider_open_product_newtab == 1 %}
				  target="_blank"
				{% endif %}
			  >
				{%- assign featured_image = product.featured_image -%}
				<img
				  src="{{ featured_image | img_url: size, crop: slider_crop_img, scale: slider_scale_img}}"
				  alt="{{ featured_image.alt | escape }}"
				  loading="lazy"
				  width="{{slider_width_img}}"
				  height="{{slider_height_img}}"
				>
				<div class="product-title">{{ product.title }}</div>
			  </a>
  
			  {% if slider_price == 1 %}
				<span class="zify-price">
				  {%- assign variant = product -%}
				  {% if variant.title %}
					{%- assign compare_at_price = variant.compare_at_price -%}
					{%- assign price = variant.price -%}
					{%- assign available = variant.available -%}
				  {% else %}
					{%- assign compare_at_price = 1999 -%}
					{%- assign price = 1999 -%}
					{%- assign available = true -%}
				  {% endif %}
				  {%- assign money_price = price | money -%}
				  <div class="price{% if compare_at_price > price %} price--on-sale{% endif %}" data-price>
					{% if section.settings.show_vendor %}
					  <div class="price__vendor">
						<span class="visually-hidden">{{ 'products.product.vendor' | t }}</span>{{ product.vendor }}
					  </div>
					{% endif %}
					<div class="price__regular">
					  <span class="visually-hidden visually-hidden--inline">
						{{- 'products.product.regular_price' | t -}}
					  </span>
					  <span class="price-item price-item--regular" data-regular-price>
						{% if compare_at_price > price %}
						  {{ compare_at_price | money }}
						{% else %}
						  {{ money_price }}
						{% endif %}
						{% if products.product.sold_out %} {{ 'products.product.sold_out' | t }}{% endif %}
					  </span>
					</div>
					{% if compare_at_price > price %}
					  <div class="price__sale">
						<span class="visually-hidden visually-hidden--inline">
						  {{- 'products.product.sale_price' | t -}}
						</span>
						<s class="zify-product-single__price--compare">{{ compare_at_price | money }}</s>
						<span class="price-item price-item--sale" data-sale-price>{{ money_price }}</span>
						<span class="price-item__label" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>
					  </div>
					{% endif %}
				  </div>
				</span>
			  {% endif %}
  
			  {%- assign variant_class = '' -%}
			  {% if product.variants.size < 2 %}
				{%- assign variant_class = 'no-variant' -%}
			  {%- endif -%}
			  {% if slider_viewmore == 1 %}
				<a
				  href="{{ product.url }}"
				  title="{{ btn_view }} {{ product.title }}"
				  class="btn btn btn-default zify-btn-viewmore {{ variant_class }}"
				>
				  {{- btn_view -}}
				</a>
			  {% endif %}
  
			  {% form 'product', product, class: 'product-form zify-addtocart-form' %}
				<div
				  class="product-select-group zify-product-select"
				  {% if product.variants.size < 2 or slider_show_variants == 0 %}
					style="display:none"
				  {% endif %}
				>
				  <select name="id" class="product-select" data-target="{{ product.id }}">
					{%- for variant in product.variants -%}
					  <option
						value="{{ variant.id }}"
						data-compare="{{ variant.compare_at_price | money }}"
						data-price="{{ variant.price | money }}"
						data-image="{{ variant.featured_image | img_url: '300x450', crop:'center', scale:3}}"
					  >
						{{ variant.title }}
					  </option>
					{%- endfor -%}
				  </select>
				</div>
				{% if slider_addtocart == 1 %}
				  {%- if product.available -%}
					<button
					  type="submit"
					  {% unless product.available %}
						disabled="disabled"
					  {% endunless %}
					  class="product-form__submit button button--full-width button--secondary btn btn btn-default zify-addtocart-submit"
					  aria-label="{{ btn_add }}"
					>
					  {{ btn_add }}
					</button>
				  {%- else -%}
					<span class="price__badge price__badge--sold-out">
					  {%- if products.product.sold_out %} {{ 'products.product.sold_out' | t }}{% endif -%}
					</span>
				  {%- endif -%}
				{% endif -%}
			  {% endform %}
			  {% if compare_at_price > price %}
				<div class="item_marks">
				  <span class="item_mark item_discount">-{{ compare_at_price | minus: price | times: 100.0 | divided_by: compare_at_price | round }}%</span>
				</div>
			  {% endif %}
			</div>
		  {% endif %}
		{% endfor %}
	  </div>
  
	  {% if enable_showall == 1 %}
		<a class="link zify-link-viewall" href="/collections/{{ collection.handle }}">{{ view_all }}</a>
	  {% endif %}
	</div>
  {% endfor %}
  <style type="text/css">
	{% if sliderItem.nav == 6 %}
		.zify-slider-item-{{ sliderItem.id }} .zify-nav .a {fill: none;stroke: #686767;;stroke-width: 400;stroke-miterlimit: 10;}
		.zify-slider-item-{{ sliderItem.id }} .zify-nav .c {fill: none;stroke: #686767;;stroke-width: 400;stroke-miterlimit: 10;}
	{% endif %}
	{% if sliderItem.nav == 7 %}
		.zify-slider-item-{{ sliderItem.id }} .zify-nav .c {fill: #fff;fill-opacity: 0.7;}
		.zify-slider-item-{{ sliderItem.id }} .zify-nav .a {fill: #333;}
	{% endif %}
	{% if sliderItem.nav == 8 %}
		.zify-slider-item-{{ sliderItem.id }} .zify-nav .c {fill: #000;fill-opacity: 0.7;}
		.zify-slider-item-{{ sliderItem.id }} .zify-nav .a {fill: #ddd;}
	{% endif %}
  </style>

1. Create assets/zify-products-slider.css

@import 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css';
@import 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css';
@import 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';

.product-title{
  margin-top:15px;
  margin-bottom:15px;
}
.zify-silder-title {
    text-align: center;
    padding-top: 0;
    margin-top: 35px;
}
.zify-price-item-from{
  margin-right: 10px;
}
/*.zify-modal {
  max-width: 400px;
  opacity: 0.7;
  position: fixed;
  z-index: 1000;
  color: #FFF;
  overflow: hidden;
}
.zify-modal:hover{
  opacity: 1;
}*/
.zify-popup-products{
    position: fixed;
      z-index: 999999999;
      margin: 0!important;
      left: 0!important;
      top: 0!important;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(248, 239, 239, 0.3);
      opacity: 1!important;
      visibility: inherit!important;
      box-sizing: content-box;
      transform: unset;
      max-width: 100%;
      text-align: center;
  }
  .zify-popup-products .zify-notifications-alert{
     position: relative;
     border-radius: 10px;
      background-color: #fefefe;
      border-radius: 0;
      border: 0;
      /* min-height: 150px; */
     
      box-shadow: 0 4px 8px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,.19);
      -webkit-animation-name: animatetop;
      -webkit-animation-duration: .4s;
      animation-name: animatetop;
      animation-duration: .4s;
      -webkit-box-shadow: 0 0 11px rgba(0,0,0,.6);
      -moz-box-shadow: 0 0 11px rgba(0,0,0,.6);
      -o-box-shadow: 0 0 11px rgba(0,0,0,.6);
      box-shadow: 0 0 11px rgba(0,0,0,.6);
      margin: 0 auto;
      text-align: center;
      width: 350px;
      max-width: 98%;
      margin-top: 10%;
  }
.zify-popup-products .zify-notifications-alert span.zify-success{
  width: 100%;
  padding: 25px 15px 25px 55px;
  background-color:#74c587;
  color: #fff;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0MjYuNjY3IDQyNi42NjciIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQyNi42NjcgNDI2LjY2NzsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxwYXRoIHN0eWxlPSJmaWxsOiM2QUMyNTk7IiBkPSJNMjEzLjMzMywwQzk1LjUxOCwwLDAsOTUuNTE0LDAsMjEzLjMzM3M5NS41MTgsMjEzLjMzMywyMTMuMzMzLDIxMy4zMzMgIGMxMTcuODI4LDAsMjEzLjMzMy05NS41MTQsMjEzLjMzMy0yMTMuMzMzUzMzMS4xNTcsMCwyMTMuMzMzLDB6IE0xNzQuMTk5LDMyMi45MThsLTkzLjkzNS05My45MzFsMzEuMzA5LTMxLjMwOWw2Mi42MjYsNjIuNjIyICBsMTQwLjg5NC0xNDAuODk4bDMxLjMwOSwzMS4zMDlMMTc0LjE5OSwzMjIuOTE4eiIvPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
  background-size: 40px 40px;
  background-position: 10px center;
  display: block;
  background-repeat: no-repeat;
}
.zify-popup-products .zify-notifications-alert span.zify-error{
  width: 100%;
  padding: 25px 15px 25px 55px;
  background-color:#dc3545;
  color: #fff;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0MjYuNjY3IDQyNi42NjciIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQyNi42NjcgNDI2LjY2NzsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxwYXRoIHN0eWxlPSJmaWxsOiNGMDUyMjg7IiBkPSJNMjEzLjMzMywwQzk1LjUxNCwwLDAsOTUuNTE0LDAsMjEzLjMzM3M5NS41MTQsMjEzLjMzMywyMTMuMzMzLDIxMy4zMzMgIHMyMTMuMzMzLTk1LjUxNCwyMTMuMzMzLTIxMy4zMzNTMzMxLjE1MywwLDIxMy4zMzMsMHogTTMzMC45OTUsMjc2LjY4OWwtNTQuMzAyLDU0LjMwNmwtNjMuMzYtNjMuMzU2bC02My4zNiw2My4zNmwtNTQuMzAyLTU0LjMxICBsNjMuMzU2LTYzLjM1NmwtNjMuMzU2LTYzLjM2bDU0LjMwMi01NC4zMDJsNjMuMzYsNjMuMzU2bDYzLjM2LTYzLjM1Nmw1NC4zMDIsNTQuMzAybC02My4zNTYsNjMuMzZMMzMwLjk5NSwyNzYuNjg5eiIvPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
  background-size: 40px 40px;
  background-position: 10px center;
  display: block;
  background-repeat: no-repeat;
}
.zify-item-product .zify-price .price{
  display: block;
  text-align: center;
}
.zify-item-product .zify-price .price > div{
  display: inline-block;
  margin: 0 2px;
}
.zify-item-product .zify-price .price  .price-item__label{
  display: none;
}
.zify-item-product .zify-addtocart-form{
  padding-top: 0;
}
.zify-item-product .zify-addtocart-form .zify-product-select{
  display: block;
  width: 100%;
  padding: 5px 20px;
}
.zify-item-product .zify-addtocart-form .zify-product-select select{
    display: block;
    -webkit-appearance: menulist;
    background-image: none;
    width: 100%;
    max-width: 100%;
    font-size: 1em;
    font-weight: normal;
    border: 1px solid rgb(232, 233, 235);
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    text-align: left;
    vertical-align: baseline;
    margin: 2px 0px;
    border-radius: 0px;
    height: 2em;
    min-height: 2em;
    max-height: 2em;
    padding: 0px 10px;
    line-height: 1em
}
.zify-modal .zify-close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 20px;
  cursor: pointer;
}
.zify-modal--overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color:rgba(255,255,255,0.1);
}
.zify-hidden {
  display: none;
}
.zify-item-product .zify-addtocart-form{text-align: center;display:block;}
.zify-item-product .item_marks {
  position: absolute;
  top: 18px;
  right: 18px
 }
.zify-item-product .item_mark {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  line-height: 36px;
  text-align: center
 }
.zify-item-product .item_discount {
  background: #df3b3b;
  margin-right: 0
 }
.zify-price span.zify-price-item{margin-left:3px;}
.zify-item-product{text-align: center;}
.zify-item-product a,
.zify-item-product .product-title {
    border: 0;
	color:#333;
    text-decoration: auto;
}
/*
.zify-item-product .product-title {
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
    font-family: inherit;
}*/
.zify-item-product .zify-price{
  display: block;
  text-align: center;
  margin:10px 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
}

.zify-item-product .zify-price .price dd,
.zify-item-product .zify-price .price dt{
  margin-left: 0;
  margin-right: 0;
}
.zify-price .price--on-sale .price-item.price-item--regular {
    text-decoration: line-through;
    opacity: 0.8;
}
.zify-addtocart-submit, .zify-btn-viewmore {
    margin: 3px;
}
.zify-item-product img{height: auto;}
/* Grid

–––––––––––––––––––––––––––––––––––––––––––––––––– */
.product-slider{
  width: 100%;clear: both;
}
.zify-products-slider.zify-grid-product .zify-item-product{
  margin-bottom: 25px;
}
.zify-products-slider.zify-grid-product .product-form{
  margin:0 !important;
}
.zify-products-slider.zify-grid-product{
  margin-left: -15px;
  margin-right: -15px;
}
.zify-products-slider.zify-grid-product .zify-item-product{
    padding-left: 15px;
  padding-right: 15px;
}
.zify-products-slider.zify-grid-product-col-1 .zify-item-product{
  width: 100%;
  float: left;
}
.zify-products-slider.zify-grid-product-col-2 .zify-item-product{
  width: 50%;
  float: left;
}
.zify-products-slider.zify-grid-product-col-3 .zify-item-product{
  width: 33.333333%;
  float: left;
}
.zify-products-slider.zify-grid-product-col-4 .zify-item-product{
  width: 25%;
  float: left;
}
.zify-products-slider.zify-grid-product-col-5 .zify-item-product{
  width: 20%;
  float: left;
}
.zify-products-slider.zify-grid-product-col-6 .zify-item-product{
  width: 16.666666%;
  float: left;
}
.zify-products-slider.zify-grid-product-col-7 .zify-item-product{
  width: 14.257142%;
  float: left;
}
.zify-products-slider.zify-grid-product-col-8 .zify-item-product{
  width: 12.5%;
  float: left;
}
.zify-products-slider.zify-grid-product-col-9 .zify-item-product{
  width: 11.111111%;
  float: left;
}
.zify-products-slider.zify-grid-product-col-10 .zify-item-product{
  width: 10%;
  float: left;
}
.zify-products-slider.owl-carousel .owl-item{
  display : inline-block;
  /*border: 1px solid #ddd;*/
  padding: 15px;
}
.zify-item-product .zify-price .price--on-sale .price__regular{
  display: none;
}
.zify-products-slider .zify-nav {border: 0;background: none;width:40px;height:40px;display:block;position:absolute;cursor:pointer;opacity: 0;top: 50%;margin-top: -20px}
.zify-products-slider .zify-navleft{left:0px} 
.zify-products-slider .zify-navright{right:0}
.zify-products-slider:hover .zify-nav{opacity: 1}
.zify-wapper-slider h3 {
    text-align: center;
    margin-top: 25px;
}
.zify-item-product span.visually-hidden.visually-hidden--inline {
    display: none;
}
/*fix load product image on collection*/
.grid-link__image--loading {
    animation: auto !important;
}

1. Add block and paste embed code

{% render 'zify-products-slider',slider_id: YOUR_SLIDER_ID %}

YOUR_SLIDER_ID: Get it when you created a slider.

Settings

Please click the Settings from the left navigation to setting the app.

Uninstall

1. From your admin, go to Settings > Apps and sales channels, then remove the Featured Product Slider app by Zifyapp partner.