How to feature collections on Shopify using Liquid

Last week, we discussed how you can use sections to feature collections in your Shopify store.

The section-based approach has its merits: it is simple to use and doesn't require diving into any Liquid theme code. However, sections may not always be the best approach for featuring Shopify collections in your store.

This week, I'd like to share with you another approach to featuring collections in your Shopify store. This approach will give you complete control over how and where you include products from collections within your store.

If you are comfortable diving into a bit of Liquid code, you will be featuring collections on your store in no time.

In today's post, we'll discuss:

When Shopify sections may not be a good fit for featuring collections
Prerequisites for building a featured collection snippet using Liquid
How you can build your own featured collection snippet using Liquid
Using the featured collection within your Shopify store

When Shopify sections may not be a good fit for featuring collections

So why might sections not be a good fit for your Shopify store?

There are really two primary reasons sections may not work for featuring collections in your store:

If your theme does not support sections
If you want to feature collections outside of the homepage

If your theme doesn't support sections, then you'll need to find another way to feature collections on your homepage. Obvious right?

However, even if your store does support sections, they can only be used on your Shopify store's homepage. For example, if you wanted to feature your best-sellers collection on your product page, you'd be out of luck with sections.

Prerequisites for building a featured collection snippet using Liquid

Building a featured collection snippet will require a bit more technical knowledge than the section-based approach. You don't necessarily need to be a full-fledged software developer, but you should probably:

Have a basic understanding of Shopify's Liquid templating language.
Be comfortable with basic Theme customizations

Sound good? Then let's dive in.

How you can build your own featured collection snippet using Liquid

To add a featured collection snippet, you'll need to visit the Edit HTML/CSS of your current Theme as shown here:

Then create a new snippet called my-featured-collection.liquid by clicking on the Add a new snippet on the left as shown here:

Paste the following liquid into the my-featured-collection.liquid snippet and save it:

{% comment %}
  This snippet will feature products from a collection.

  Parameters:

  handle  - (required) the collection handle
  cols    - the number of items per row, valid values are 3, 4 or 5; defaults to 3
  rows    - the number of rows; defaults to 1
{% endcomment %}

{% if rows == blank %}{% assign rows = 1 %}{% endif %}
{% if cols == blank %}{% assign cols = 3 %}{% endif %}
{% assign total_products = cols | times: rows %}

<div>
  {% case cols %}
    {% when 5 %}
      {% assign grid_item_width = 'medium-down--one-half post-large--one-fifth' %}
    {% when 4 %}
      {% assign grid_item_width = 'medium-down--one-half post-large--one-quarter' %}
    {% else %}
      {% assign grid_item_width = 'medium--one-third post-large--one-third' %}
  {% endcase %}

  <div class="grid-uniform">
    {% for product in collections[handle].products limit: total_products %}
      <div class="grid__item {{grid_item_width}}">
        {% include 'product-grid-item' with featured: product %}
      </div>
    {% endfor %}
  </div>
</div>

Lines 1-9 provide an overview of how to use this snippet. The snippet supports three parameters:

handle - to specify the collection handle (e.g. - 'best-sellers')
cols - to specify the number of columns (i.e. how many items per row) to display
rows - to specify the number of rows of products to display

Lines 11-13 set the defaults for the params, and also the total_products which is used below to limit the number of products to display.

Lines 16-23 set up the CSS classes for the product grid based on the number of columns specified. This portion may vary for your theme since it depends on your themes CSS styles.

In my case, I am working with a copy of the Minimal theme, which is based on the Shopify Timber framework. If your theme is based on the Timber framework these styles should work for you as well. Otherwise, you may need to adjust this to match your theme's grid framework.

Lines 26-30 is where the actual work of displaying your featured collection happens. Specifically, on line 26, the collection is obtained by the handle param passed in, and then limited based on the total_products computed earlier.

Then, as shown on line 28, each product in the list is rendered via the product-grid-item snippet. The product-grid-item is a fairly common name used by many themes for displaying products in your store in a grid view, such as in collections. This means your featured products should display exactly the same as items seen throughout your store.

Using the featured collection within your Shopify store

The my-featured-collection snippet can now be used anywhere in your Shopify store to feature collections.

To use the snippet, you just need to add a single line of Liquid where you'd like to feature your collections.

For example, to add the top 3 best selling products from my best-sellers collection, I used the following:

Best sellers

{% include 'my-featured-collection' with handle: 'best-sellers' %}

You can see this in action here:

To demonstrate the flexibility of the my-featured-collection snippet, let's re-use it to show the top 8 products from my on-sale collection like so:

On Sale - 20% OFF

{% include 'my-featured-collection' with handle: 'on-sale', rows: 2, cols: 4 %}

This results in the following on sale items showing up on my product page:

Basically, you can use this technique to feature any collection anywhere on your Shopify store. The options are endless.

Learn How to Double (2X) Your Shopify Sales with Product Labels

Boost sales by highlighting key features with product badges
Increase conversions by promoting scarcity, urgency and social proof
Sell more with targeted promotions to increase average order sizes

See the guide

Summary

That wraps up our discussion on how to feature Shopify collections on your store using Liquid.

Building a reusable featured collection snippet in Liquid makes it easy for you to feature products from any collection in your Shopify store. You can use this approach for promoting your best-sellers, on-sale items, new arrivals, etc. however you'd like throughout your store. Since this approach requires diving into a little bit of Liquid and theme modifications, a bit more technical skill is required versus something like sections. However, if you would like complete control of how to feature products in your store, the Liquid featured collection is the way to go.