Featured products in collection

Featured products in collection

MTSport
Visitor
2 0 0

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

Replies 5 (5)

PageFly-Richard
Shopify Partner
4663 1069 1726

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

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

ArielleColgate
Shopify Partner
11 0 5

Hi MTSport,

 

You might want to try creating a Meta-field for a featured products in the Collection
You’ll require Shopify Meta fields to store specific product information for each collection. Meta fields allow you to attach additional data to various parts of your store.

Navigate to your Shopify Admin panel.
Go to Settings > Custom data > Collections.

  • Click on Add definition and create a new metafield definition.
  • Name it something like Featured Products.
  • Set the content type to Product and select List of Products to allow for multiple product entries.
  • Save the metafield.
  • You will need to add your metafield to your specific collection which you want the product to be displayed (by adding featured product go to Products > Collections on your shopify dashboard, select the collection you want to edit., under the metafields section you will find the featured products, then you will add them the newly three products you want to feature in this collection.
  • Repeat this process for each collection then you will have to modify your collection template in your store theme.
  • Go to Online Store > Themes > Click Actions > Edit Code.

Open the collection.liquid file (or the template).

If you are using a section-based theme, look for collection-template.liquid or similar under Sections. CTRL+ F to find then you have to paste your custom code, if need be, seek help from an expert or ask your dev for guidance

 

Explanation:
Metafields allow you to store additional information about your collections (in this case, a list of featured products).
Liquid template changes let you pull that data and display it on the front end. The code dynamically checks if the metafield is set for the collection and displays the corresponding products.

 

You can reply here for further explanations and process break down.

Thanks for taking the time to read!

The WebColgate
A Partner at Shopify.com
->7yrs of expertise on Fiverr.com with 4.6 star rating
->Deep expertise in custom development & optimization
E-mail: [email protected]

Vinsinfo
Shopify Partner
426 143 142

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

Please reach out to [email protected] for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
MTSport
Visitor
2 0 0
Thank you for this - really helpful!

Vinsinfo
Shopify Partner
426 143 142

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

Please reach out to [email protected] for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support