Featured products in collection

Shopify Discussion
1

I need to display three featured products on each collection page. I want these products for be specifically from that collection and not the same products displayed across all collection pages, which is all I have been able to create so far!
I can’t work out how to create this so any advice appreciated.

Thanks

2

Hi,

This is Richard at PageFly - Shopify Advanced Page Builder app.

To display three featured products on each collection page that are specifically from that collection, you can use Liquid programming and Shopify’s built-in features. Here’s a step-by-step guide:

1. Create a Liquid Snippet:

  • Go to your Shopify admin.
  • Navigate to Online Store > Themes.
  • Click the Actions menu for your active theme and select Edit code.
  • Create a new snippet named featured_products.liquid.

2. Write the Liquid Code:

Paste the following code into the featured_products.liquid snippet:

{% if collection.products.size > 0 %}
  <h3>Featured Products</h3>
  <div class="featured-products">
    {% for product in collection.products.limit(3) %}
      <div class="featured-product">
        <a href="{{ product.url }}">
          <img src="{{ product.images.first.url | img_url: 'small' }}" alt="{{ product.title }}">
        </a>
        <h4><a href="{{ product.url }}">{{ product.title }}</a></h4>
        <p>{{ product.price | money }}</p>
      </div>
    {% endfor %}
  </div>
{% endif %}

3. Add the Snippet to Your Collection Template:

  • Navigate to Online Store > Themes.
  • Click the Actions menu for your active theme and select Edit code.
  • Find the collection.liquid template and open it.
  • Locate the section where you want to display the featured products.
  • Add the following code to that section:
{% include 'featured_products' %}

Hoping my solution helps you solve your problem.

Best regards,

Richard | PageFly

3

@MTSport To display three featured products in a collection page, please follow the below steps.

  1. Go to “Settings” → “Custom data” → “Collections”.

  2. Add a metafield for the collection with product type.

  3. Then, go to “Online Store” and click the action button from the current theme and then select “Edit code”.

  4. Create a new section with the reference of the featured-collection.liquid section. Use the created metafield values to display the products on the collection page.

  5. Once created the section, design it as per your need.

Don’t hesitate to reach us through mail for further assistance.

4

Thank you for this - really helpful!

5

@MTSport Happy to hear that our solution was helpful for you. It would be helpful for others too, if you mark it as an “Accepted” solution and also support us by clicking “Like”. Kindly don’t hesitate to contact us for any other helps.