How can I add an extra sale badge to specific products?

Topic summary

Goal: add an additional product badge (e.g., “Top Seller”/“Most Popular”) on collection pages, matching the existing sale badge style.

Approach proposed: use product-level controls (metafields or tags) to decide which products show the extra badge. Requires small custom Liquid, HTML, and CSS edits.

UI options: two layouts demonstrated via screenshots—stacked badges or side-by-side. The requester prefers side-by-side.

Implementation detail: add a conditional in the product loop (product card on collection grid), right after the sale badge:

  • If product.tags contains ‘Top Seller’, render a “Top Seller” badge.
  • Backup the theme before editing.

Theme caveat: file/placement differs by theme. The product loop may be in a card/snippet (e.g., card-collection.liquid) rather than collection.liquid. The requester reported not having collection.liquid and seeing files like card-collection.liquid, featured-collection.liquid, list-collections.liquid.

Latest update: a tutorial video was shared showing how to add multiple badges on product cards.

Key terms: metafield (custom product field for storing values), Liquid (Shopify’s templating language).

Status: guidance provided (tags/metafields, code snippet, file location hints, video). No confirmation of successful implementation; file location specifics remain to be finalized. Attachments (screenshots, video) are central to understanding the solution.

Summarized with AI on December 21. AI used: gpt-5.

Hi,

I’m looking to add an extra badge right under the current one on specified products that say “Top Seller” or “Most Popular”

I cannot find any coding or answers on the internet been looking for hours.

Preferably I’d like it in the exact same style, text and colour theme as the current badge.

@sleepingbooty Hope you are doing well.

YOu can manage it by adding metafield to your product. Just give the option to add a tag like “Top Seller” or “Most Popular” in your metafield and based on the checked item fetch that label on the product grid.

It requires adding some custom code to fetch and display on the product grid. I hope you know liquid coding, HTML and CSS.

I don’t know coding very well. I was hoping I could simulate the code that’s already there for the current ones and copy paste somehow but was hoping to get some insight on what that might look like!

@sleepingbooty code might be available but the keeping code in the theme is different for each theme. because each theme has its structure.

Could you please share your store URL so I can show you what it’ll look like on your store after adding it?

https://sleepingbooty.com.au/collections/all

Thank you

@sleepingbooty Please check the attached screenshot, how it’ll be looks on your website after adding.

On one image how it looks the badge to below each other.

and on one image keep the badges to side with each other.

I like them side by side! Would I be able to choose which products get allocated this?

Thank you!

@sleepingbooty Yes, this is possible for which product you want to display the tag.

it requires some custom coding to add to your theme.

also requires to creation meta field for the product to display such tags based on your selection.

Is there a simple way to go about it? I don’t want to be too much trouble!

This is the simplest way to achieve this.

And it really simple. you just have to select which tag you want to display on which product from the Shopify admin product section.

the rest will be done in liquid coding. This is one time effort.

I have “Top Seller” tagged on the products I want it to display for already :slightly_smiling_face:

@sleepingbooty Okay got it. Then you must have to find the product loop in your collection.liquid file and place the below code just after the sale tag.

{% if product.tags contains 'Top Seller' %}
    Top Seller
  {% endif %}

Please take the backup of live theme before making any changes to theme code.

Hi @webwondersco

Hate to be so cumbersome to teach but I’m having trouble finding which collection file it is.

I don’t have a base “collection.liquid” file from the search option.

Only:

card-collection.liquid
featured-collection.liquid
list-collections.liquid

Just want to make sure I’m in the right one before making adjustments.

Thank you!

Hi @sleepingbooty ,

Please refer the below video to add any number of badges on product card.

Hope this will help others too.