Add a Custom Product Badge in Shopify – No Code Needed

Tired of hunting for an app or wrestling with liquid just to show a “Sale” tag on your products? You can add a custom product badge in Shopify without touching a single line of code, and it takes only a few minutes. Follow this step‑by‑step guide and get instant, lightweight badges that boost conversions.

Why Most Badge Apps Slow You Down

Many store owners reach for a badge app because it promises “instant labels.” The reality? Extra JavaScript, slower page loads, and higher subscription costs. Those performance hits can hurt mobile scores and turn shoppers away—especially when the badge itself is the only reason for the extra weight.

The No‑Code Trick: Use Shopify Meta Fields

Shopify’s built‑in product meta fields let you store custom text for each product. Pair that with a tiny liquid snippet, and you’ve got a fully functional badge system—no app, no extra scripts.

1️⃣ Create a Meta Field for the Badge

1. In Shopify admin, go to Products and open any product.
2. Scroll to Meta fields (enable it via Settings > Meta fields > Products if it’s hidden).
3. Click Add definition, choose Text, and name it badge_text (or any name you prefer).
4. Save the definition, then return to the product and fill the field with the text you want displayed—e.g., “Sale”, “New Arrival”, “Limited Stock”.

2️⃣ Insert the Liquid Snippet

1. Navigate to Online Store > Themes, click Actions > Edit code on your current theme.
2. Locate the file that renders product cards—commonly product-card.liquid or featured-product.liquid.
3. Right before the closing tag of the product card, paste this snippet:

{% if product.metafields.custom.badge_text != blank %}
  <div class="product-badge">{{ product.metafields.custom.badge_text }}</div>
{% endif %}

If your namespace differs, adjust custom.badge_text accordingly.

3️⃣ Style the Badge with CSS

Open your main stylesheet (theme.scss.liquid, theme.css, or similar) and add:

.product-badge {
  background-color: #ff4500;
  color: white;
  padding: 2px 6px;
  font-size: 0.8em;
  border-radius: 3px;
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
}

Feel free to tweak colors, size, or position to match your brand’s vibe. Save the file and preview a product page—you should now see a crisp badge perched over the product image.

Quick Benefits Checklist

• Zero extra apps → lower monthly costs.
• No additional JavaScript → faster page load.
• Editable per product → change badge text in seconds.
• Fully customizable with CSS → keep branding consistent.

Wrap‑Up: Deploy in Minutes

Give it a try on a single product today. If it looks good, roll the same meta field and liquid snippet out across your catalog. This tiny tweak can make listings pop without slowing your site or draining your budget.

Enjoy the boost, and for more no‑code Shopify hacks, subscribe to Shopify Simple Blog. Share this guide with fellow store owners who are fed up with costly badge apps—sometimes the simplest solution is the best.