How to feature collections on Shopify using Liquid

TomShopify2 Comments

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 collections in your Shopify 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:

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:

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:

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:

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.

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.

Sign up for my Shopify newsletter

Enter your email below to get actionable Shopify tips and information delivered weekly straight to your inbox.

2 Comments on “How to feature collections on Shopify using Liquid”

  1. Brent

    i cannot get this to work. I am using the Fashionopolism theme by Underground Media…
    I have follwed the direction and i am using this within a ‘page’ as a test.

    Can you help me?
    Not sectioned….

    PBR
    {% include ‘my-featured-collection’ with handle: ‘pbr’ %}

    This just displays this exactly on my test page…

    1. Tom

      Hi Brent,

      I just verified this works on my Pages so in theory we can get it to work on yours.

      Perhaps you can share more of your page code? If your page is showing the raw {% include ‘my-featured-collection’ with handle: ‘pbr’ %} instead of the snippet, maybe you have it inside of a capture block?

      You can try putting that code in a different portion of your page too outside of a capture or {{ ... }} block.

Leave a Reply

Your email address will not be published. Required fields are marked *