How to Add Shopify Product Badges Without App (2026 Guide)

Do you want to make your Shopify products stand out with eye-catching custom tags? Then this is the right guide for you. Badges like “Sale”, “New Arrival”, or “Best Seller” can help products get noticed fast. You do not need any app to do it. Surprised? In this post, you will learn how to create Shopify product badges without an app using Shopify’s metafields and simple theme code.

This step-by-step guide works even if you do not know coding. You will also learn how to add a badge in Shopify and control the text and color right from your admin panel. By the end, you will have colorful, professional badges that look clean and load fast. Ready to transform your Shopify store? Let us get started then! 

Summary

• You can add product badges in Shopify without any app using metafields and a small snippet.
• Badge text, color, and style can be controlled directly from the Shopify Admin.
• Badges help highlight sale items, new arrivals, bestsellers, and limited stock.
• Simple CSS lets you position and design the badge on product and collection pages.
• DiscountRay offers advanced smart badges if you want automation and dynamic rules.

Why Add Badges

Badges help customers focus on key products. They highlight what is new, popular, or on sale.
They guide shoppers and boost clicks.

Examples: 

• “Sale” badges show discounts and deals.
  
• “Bestseller” badges build trust and show popularity.
  
• “New Arrival” badges tell what is new.
  
• “Limited Stock” badges create urgency.
  

If you sell clothing, add a “New Arrival” badge to new items. Customers will spot them right away.

Adding Shopify custom badges improves the look of your store and saves money. You will not need extra apps or scripts. It is one of the best ways to add badges to Shopify products while keeping things simple.

Coming Up…

You will learn to:

• Add badges to product and collection pages
  
• Control badge text and color from Shopify Admin
  
• Create custom product badges Shopify store owners love
  
• Add tags like Sale, Bestseller, or Limited
  
• Use Shopify product badges without an app to save money and stay fast
  

In the next section, we will provide a step-by-step guide on how to add custom badges using simple coding. Do not worry if you are not familiar with it. These instructions are easy to follow, and all you need to do is copy and paste to get the desired output. 

Steps to Creating Shopify Product Badges Without App

Step 1 – Create Metafields

Metafields store extra product details.
You will create three: one for badge text, one for background color, and one for text color.

Steps:

1. In Shopify Admin, go to Settings → Custom Data (Metafields) → Products

1. Click Add definition and create
   

• Badge Text – single line text, example, “Sale”
  
• Badge Background Color – single line text, example, #FF0000
  
• Badge Text Color – single line text, example, #FFFFFF
  

1. Click Save
   

Now edit any product and scroll to Metafields. You will see three boxes ready to fill.

Example:

If the product is a Summer Dress, fill in

• Badge Text → Sale
  
• Background Color → #FF0000
  
• Text Color → #FFFFFF
  

Save it.

Shopify will now show a red Sale badge on that product.

That is how Shopify product badges without an app work.

Step 2 – Add the Snippet

This step is easy. You just paste one block of code.

1. Go to Online Store → Themes

1. Click Actions → Edit Code
   
2. Under Snippets, click Add a new snippet
   
3. Name it product-badges
   
4. Paste this code
   

{% if product.metafields.custom.badge_text != blank %}

  <div class=”custom-badge” 

       style=”background-color: {{ product.metafields.custom.badge_background_color }}; 

              color: {{ product.metafields.custom.badge_text_color }};”>

    {{ product.metafields.custom.badge_text }}

  </div>

{% endif %}

Code Screenshot: 

Save it.

This code checks if a product has badge text. If yes, it shows the badge automatically.

Example:

If you add “Sale” to your metafield, this code displays it. All you needed to do was copy and paste. Easy, right? 

This works for a Shopify sale badge, “New Arrival,” or any text you want. It is one of the cleanest ways to use Shopify product badges without an app.

Step 3 – Show the Badge

Now tell Shopify where to show the badge.

1. Open product-card.liquid (or similar)
   

• Search for “card” or “product”
  

1. Find the product image area, marked by <img> or product-card__image
   
2. Paste this line where you want the badge
   

{% render ‘product-badges’ %}

Code Screenshot: 

Save.

Then open product-template.liquid and paste the same line where you want the badge to appear on product pages.

Example:

Paste it above the image to show “New Arrival” directly on the picture. Save and refresh.

Tip:

Duplicate your theme before editing. That way, you can restore it easily if needed.

This setup helps you add badges to Shopify products quickly and works on any theme.

Step 4 – Style the Badge

Now you’ll style how your badge looks.

Open your CSS file (base.css or theme.css).
Scroll to the bottom and add this code.

.custom-badge {

  position: absolute;

  top: 10px;

  left: 10px;

  padding: 5px 10px;

  font-weight: bold;

  font-size: 14px;

  border-radius: 5px;

  z-index: 10;

  white-space: nowrap;

}

Code Screenshot: 

Save.

Your badges now appear in the top-left corner of each product image.

Example:

A red Shopify sale badge with white text now shows clearly on each product. You can adjust the position by changing the top or left numbers.

That is how you style Shopify product badges without an app. And you didn’t even have to touch your main layout.

Step 5 – Add Badge Details

Now it is time to apply your badge.

1. In Shopify Admin, open Products

1. Choose a product like “Winter Jacket”
   
2. Scroll to Metafields
   
3. Fill in
   
   • Badge Text → Bestseller
     
   • Background → #FFD700
     
   • Text Color → #000000
     
4. Save
   

Refresh your store. You will see a gold Bestseller badge.

You have just made a custom product badges Shopify setup that works beautifully without external tools.

Optional – Use Tags

You can also create badges with tags instead of metafields.

Add a tag named sale to your product. Then paste this code in the same spot as before.

{% if product.tags contains ‘sale’ %}

  <div class=”custom-badge”>Sale</div>

{% endif %}

Code Screenshot: 

Now style it.

.custom-badge {

  background-color: #FF0000;

  color: #FFFFFF;

}

Code Screenshot: 

Example:

Products with the tag “sale” now show a red Sale badge. Remove the tag, and it disappears.

This manual badge setup Shopify method is faster but less flexible. You cannot change colors per product, unlike the Shopify badge, without an app using metafields.

In the next section, we list some common fixes to help you minimize errors. Let us check them out. 

Common Fixes

If badges do not look right, check these.

Badge missing

Make sure metafield names match exactly (like badge_text).

Badge position

Change the top and left values in the CSS.

Color not showing

Use a # before the color code.

After small fixes, your Shopify product badges without the app should display correctly.

Bonus – Add Smart Badges with DiscountRay

You can take this further with Shopify badges from DiscountRay. You do not need any coding. In just 2 clicks, your custom badge is ready.  

Examples: 

• Buy 2, get 15% off
  
• Free shipping for VIPs
  
• Exclusive B2B deal

• Friday Sales

There is a detailed guide on how you can further customize your offers using this personalized discount app.

Final Thoughts

You now know how to create Shopify product badges without an app. You did not need to code or install anything.

You

• Created metafields for text and color
  
• Added a small code snippet
  
• Placed badges on products and collections
  
• Styled them with CSS
  
• Learned a tag method
  
• Saw how DiscountRay adds Shopify dynamic badges

Your store now looks cleaner and faster. Start small. Add one badge and test it. A small badge can make a big difference in how shoppers see your products. We hope you found this article helpful. Share it with other Shopify merchants who want to transform their Shopify store for the better. For more expert tips, check out our other eCommerce blogs. 

FAQs