Shopify Tutorials

Add Now Featured Products Carousel

Ensure that your customers see your Add a featured products carousel 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.

Add a featured products carousel or slideshow layout. Add captions, buttons, videos, slider backgrounds, borders, and copy protection to your product slider. Create a customer testimonials slideshow or an Shopify product carousel layout for social proof, or create a client logo slider to build trust.

Now you know how to put a featured Shopify product carousel 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. Add a featured products carousel makes your site more interactive and increases visitor engagement. Product sliders are a win-win for your store. 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.

Customers want to read reviews, see products from every conceivable angle, and explore new discounts and offers before they even think about clicking that Shopify product carousel. Set your image slider on a loop to ensure customers don’t miss important info! Use slider as a Shopify product carousel to show your best products.

Editing your theme code to add product carousel 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 %}
  • 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 product carousel
Shopify Developer

Recent Posts

How to Link eBay to Shopify Store

Imagine! Seamlessly connecting the vast customer base of eBay with the robust features of your…

1 month ago

Unlock the Power of Shopify Flow: Automation Strategies for eCommerce

Let’s face it. Running an online store requires unwavering discipline. Juggling multiple tasks simultaneously is…

1 month ago

Everything You Need to Know About Shopify Liquid

There’s no denying that Shopify has taken over the world. The ecommerce platform contributes to…

2 months ago

Maximizing Revenue: 7 Best Shopify Themes for Conversion Rates that Soar

It’s true. Every marketing strategy has one common objective: to drive maximum conversion rates. If…

2 months ago

Terrific Dropshipping Business Ideas for 2024

*Sigh*. Are you tired of trying out different methods of making money online? Hear it…

2 months ago

Shopify SEO Checklist for Continued Success in 2023

When driving traffic to your Shopify store, Search Engine Optimization (SEO) is the most affordable…

3 months ago