How to feature collections on Shopify using Liquid

TomShopify8 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.


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.

8 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….

    {% 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.

  2. Serdar

    Hi; Nice explanation for me, Thank you about it to you.

    But I get this error ; “Could not find asset snippets/indiv-product.liquid “. Because actually I not have this file.

    Could it have been modified ?

  3. Tom

    Hi Serdar,

    I’m not sure where the “snippets/indiv-product.liquid” is being referenced. That is not in the above code I shared in this post so I’m guessing that is from your Shopify theme somewhere.

    My best guess is your theme is trying to include that snippet and it doesn’t exist.

  4. Matt

    Hi Tom,

    I’m using the free “Simple” template to drop in this snippet. I have the thing working to a degree, but I cannot get the size of the images to adjust. All of the product images are showing up larger then initially uploaded (uploaded at 560px square, displaying at 600px square).

    I’m using your default grid_item_width = ‘medium-down–one-half post-large–one-quarter’ and am trying to to a 2 row, 4 col layout. I think the part that is driving me mad is that no matter what i change in the grid_item_width line (line 20 of your example above) I cannot get the image to change size.

    Not much documentation out there on how to use the grid_item_width… any help would be greatly appreciated.

  5. Tom

    Hi Matt,

    I took a look at the Simple theme and I suspect you may need to try a different grid_item_width.

    I looked in “sections/collection-template.liquid” for some clues and you can see they are using this grid_item_width: “medium-up–one-third small–one-half”. You can try that to see if it works.

    Btw – it looks like your theme is using the csswizardry grids which is also used by the Timber framework. You can see more info about this here:

    I hope that helps point you in the right direction 🙂


  6. Matt

    Hi Tom,

    I was able to get it somewhat working using “medium-up–one-third medium-up–one-third”. That gives me a 2 row, 3 column grid, however my issue now is that the product item pictures are way too small.. currently showing up at 70px and should be around 300px… any thoughts on how to adjust the grid math?

    Thanks again for your help.

  7. Tom

    Hey Matt,

    Sorry I am not really familiar with how those themes set the dimensions for your images.

    If it were me, I’d probably take a look at your collection grid snippet (included in sections/collection-template.liquid) and see what it is doing. Then you can in theory just follow that pattern.

    Good luck!

Leave a Reply

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