Add a Featured Products Carousel on Shopify

SolverStaff
In this article you will learn how to add a featured collection product slider on you Shopify store.

Ensure that your customers see your products where ever they are on your website, this could be within your pages, blog posts or even the shopping cart with a carousel of featured products from any collection.
Editing your theme code to add this feature

Required files: section [shop-the-look.liquid]





In the Section directory, Create a new file called selected-products.liquid and add the following code:


<div class="page-width section--feature-collection">
{% if section.settings.title != blank %}
    <h2 class="title">{{ section.settings.title | escape }}</h2>
{% endif %}
    {%- assign collection = collections[section.settings.collection] -%}
    {%- assign prod_limit = section.settings.limit -%}
    {%- assign autoplay = section.settings.autoplay_time | times: 1000 -%}
 
    <div class="main-carousel" data-flickity='{ "lazyLoad": true, "freeScroll": true, "wrapAround": true, "autoPlay": {{autoplay}}, "prevNextButtons": {{section.settings.show_arrow}}, "pageDots": {{section.settings.show_dots}} }'>
      {% for product in collection.products limit: prod_limit %}
        <div class="carousel-cell">
          <div class="product-detail">
 
            {%- assign img_max_height = '300x300' -%}
          {%- assign featured_image = product.featured_image -%}
          {%- assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
 
          <img class="feature-row__image lazyload"
               src="{{ featured_image | img_url: img_max_height }}"
               data-src="{{ img_url }}"
               data-widths="[360, 480, 620, 740, 860, 980, 1100]"
               data-aspectratio="{{ featured_image.aspect_ratio }}"
               data-sizes="auto"
               tabindex="-1"
               alt="{{ featured_image.alt | escape }}">
            <div class="product-desc {% if section.settings.desc_on_hover == true %} pd-on-hover{% endif %}">
              <h4 class="title">{{product.title}}</h4>
            {% include 'product-price', variant: product.selected_or_first_available_variant %}
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
</div>
<style>
  .section--feature-collection>.title{
    text-align: center;
  }
  .carousel-cell{
    width: 300px;
  }
  .carousel-cell .product-detail{
    position: relative;
    margin: 10px;
  }
  .carousel-cell .feature-row__image{
    width:100%;
  }
  .carousel-cell .product-desc{
    padding: 10px;
  }
  .product-desc .title{
    margin: 0;
    padding: 0 0 5px;
  }
  .pd-on-hover{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.8s;
    background-color: rgba(255,255,255,0.75);
  }
  .carousel-cell .product-detail:hover .pd-on-hover{
    opacity: 1;
    transition: opacity 0.8s;
  }
</style>
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js" defer></script>
{% schema %}
  {
    "name": "Featured Collection",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Featured collection"
      },
      {
        "id": "collection",
        "type": "collection",
        "label": "Collection"
      },
      {
        "type":      "range",
        "id":        "limit",
        "min":       5,
        "max":       30,
        "step":      1,
        "label":     "Products shown",
        "default":   5
      },
      {
        "type": "checkbox",
        "id": "desc_on_hover",
        "label": "Show product description on hover",
        "default": false
      },
      {
        "type": "header",
        "content": "Carousel Controls"
      },
      {
        "type":      "range",
        "id":        "autoplay_time",
        "min":       0,
        "max":       5,
        "step":      1,
        "label":     "Autoplay in second/s",
        "default":   0
      },
      {
        "type": "checkbox",
        "id": "show_arrow",
        "label": "Show arrow",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "show_dots",
        "label": "Show dots",
        "default": true
      }
    ]
  }
{% endschema %}
 
{% stylesheet %}
{% endstylesheet %}
 
{% javascript %}
{% endjavascript %}

In the Layout directory, open the theme.liquid file, locate the {% section 'footer' %} and add the following code right above footer code :

{% if template contains 'index' or template contains 'page' %}
      {% section 'selected-products' %}
    {% endif %}


Congrats, You’ve completed the coding parts.
Now it’s available in the Theme section. You can modify through Themes>customize page section settings. You could add a collection which you want to show in the carousel

0 Comments