How do I add a custom badge to a product page

Shopify Discussion

Topic summary

A user running the Refresh theme wants to add custom badges (like “Best Seller”) to product pages in a specific position.

Proposed Solution:

  • Add tags to products (e.g., Badge-BestSeller, Badge-NewAdded)
  • Insert Liquid code into snippets/card-product.liquid to check for these tags
  • Add CSS styling to base.css or a custom CSS file to position and style the badges

Code snippets were provided for both the Liquid template logic and CSS styling, including positioning, colors, and icon support.

Current Status:
The solution isn’t working for the original poster or another user who tried it. Despite following all steps, badges aren’t appearing in preview mode. The issue remains unresolved with no clear diagnosis of what’s preventing the badges from displaying.

Alternative Approach:
Another contributor suggested using Shopify apps instead of custom code, recommending four options (BSS Product Label & Badges, Deco Product labels, BestSeller Product Tag Manager, and Sami Product Labels) with varying features and pricing from free tiers to ~$4-9/month subscriptions.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hi,

Can anybody please help?

I’m using the refresh theme and I’m putting together my product pages and I’d like to add various custom badges to certain products… like this ‘best seller’ example below.

I’ve followed a few videos and blog posts but I’m not getting anywhere. I would like my custom badges to be positioned in the same place as the example below.

Any help would be really appreciated.

Screenshot 2024-09-01 at 14.47.58.png
Screenshot 2024-09-01 at 14.47.58.png435×467 76.7 KB

1 Like
2

@HeatMyHouse

  1. Add Tags to Products
    Best Seller
    New Added
    50% OFF

  2. Edit the Theme Code

    1. Go to your Online Store
    2. Click on “Themes”
    3. Select “Edit code”
    4. Open your snippets/card-product.liquid file
    5. Add code below this code https://prnt.sc/WrkwZ3ugzq7s

  {% assign badge_tags = 'Badge-BestSeller,Badge-NewAdded,Badge-50Off,Badge-Clearance' | split: ',' %}
  {% for tag in product.tags %}
    {% if badge_tags contains tag %}
      

        {% case tag %}
          {% when 'Badge-BestSeller' %}
            Best Seller
          {% when 'Badge-NewAdded' %}
            New Added
          {% when 'Badge-50Off' %}
            50% OFF
          {% when 'Badge-Clearance' %}
            Clearance
        {% endcase %}
      

    {% endif %}
  {% endfor %}

​

Add CSS Styles for Each Badge
Open your CSS file and add the code below

.badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 12px;
    color: #000;
    font-size: 12px;
    font-weight: 700;
    border-radius: 3px;
    z-index: 10;
}

.badge-bestseller {
    background-color: #ff9800;
}

.badge-newadded {
    background-color: #4caf50;
}

.badge-50off {
    background-color: #f44336;
}

.badge-clearance {
    background-color: #9c27b0;
}

.badge-bestseller::before {
    content: '\2605'; /* Star icon */
    margin-right: 5px;
}

.badge-50off::before {
    content: '\0025'; /* Percentage symbol */
    margin-right: 3px;
}​

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Best regards
Kaushik

3

Thanks Kaushik,

Where can I find the CCS files?

Ian

4

Hello! @HeatMyHouse Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. find your CSS file. If you have a custom CSS file, open that instead.
  5. If you can’t find your custom CSS file, open “base.css”
  6. Add the following code at the end of the file.
5

Hi Kaushik_7,

I’ve done all of the above and its not appearing on the product page.

Should it now appear when I click ‘preview’ on the product that I’ve added the tags to?

Ian

6

Hi Grace2,

I would like to add custom badges to the product pages of my website, for example - ‘best seller’, ‘popular boiler’ and ‘latest version’.

I want to make my product page more appealing.

Can you help?

Thanks

Ian

1 Like
7

Hi,

it is not working in my shop.

I try now since hours and can not figgure out why it is not working at all.

No badge displayed.

Does anybody has an idear what else can be done?

8

Hi @HeatMyHouse

Welcome to Shopify Community!

There are many app on Shopify App Store, that helps merchants place badges on their product/collection pages.

Here are some that could be a great fit for your requirement (provides both text and images as badges & and are easy to use)

  1. BSS Product Label & Badges
  • Easy to use
  • Customization options on free tier subscription.
  • 2 badges for 20 items on free tier. Subscription starts [email removed] $9/month
  • Animation support.

2. Deco Product labels & Badges

  • 4 label, badges for 20 items
  • Huge templates available.
  • Support for theme compatibility
  • Free trial available, but development stores are not supported.
  • Subscription starts [email removed] $7/month.
  1. BestSeller - Product Tag Manager
  • 15 labels/Badges for 20 items.
  • Emoticon support for label.
  • Huge image template available.
  • Theme compatibility support available.
  • Easy/Free to use.
  1. Sami Product Labels and Badges
  • Huge template available.
  • Easy to use.
  • Set rules by tags, collections
  • 2 Badges/Labels on Free tier
  • Subscription starts [email removed] ~ $4/month

You can try these apps to show text/images as badges.

Free apps/ free tiers are available so it would be cost effective as well.

Thank you,

Sajat Shrestha

If this is helpful, please Like and Accept the solution.

Want to modify or custom changes on store? Let me help.