Shopify Themes

Custom product badges are the small overlay labels you see on product cards — “SALE”, “NEW”, “BESTSELLER”, “PRE-ORDER”, or anything brand-specific like “ECO-FRIENDLY”, “MADE IN ITALY”, or “LIMITED RUN”. This guide walks through every way to add them in your Fuel Themes Shopify theme, from no-code theme settings to fully custom developer-driven badges.

The right approach depends on whether your badge content is rule-based (driven by a price, pre-order status, or date) or tag-driven (you tag products and the theme matches).

Where Badges Appear

Your theme renders badges in two places:

1. Product cards — collection pages, search results, related products, featured product sections
2. Product page — directly on the main product image

The badge system is unified across both locations. Configure once, render everywhere.

Method 1 — Built-in Theme Badges (No Code)

Every Fuel Themes Shopify theme ships with a built-in badge system controlled from the theme editor. This covers the most common badge types out of the box.

Steps:

1. Open your store admin → Online Store → Themes → Customize
2. In the left sidebar, click Theme settings (the gear icon at the bottom)
3. Open the Product cards or Badges section
4. Configure the badge types that ship with your theme:

• Sale badge — appears automatically on any product with a compare_at_price greater than the current price. Customize the label (e.g. “SALE”, “-20%”, “DEAL”)
• Sold out badge — appears when inventory is zero and “Hide out of stock products” is off
• Pre-order badge — appears on products that have a pre-order metafield set, signalling that shoppers can order now and the item will ship when restocked or released. See Pre-order using metafields for the full setup walkthrough — the same metafield drives the pre-order button on the product page

1. Click Save

These badges respect your theme’s color scheme and typography automatically. No code or extra setup needed.

Method 2 — Tag-Driven Custom Badges

For badges beyond the built-in types — “Bestseller”, “Eco-friendly”, “Limited Edition”, “Staff Pick” — use the tag-driven approach. You tag a product in the Shopify admin and the theme renders a matching badge.

Setup:

1. Open your store admin → Online Store → Themes → Customize
2. Go to Theme settings → Product cards
3. Find the Custom badges section and add a new badge:

• Tag name — exact tag to match (case-sensitive). Example: bestseller
• Display label — what shoppers see on the card. Example: “BESTSELLER”
• Color — background color for the badge

1. Save the theme settings.

Tag your products:

1. Go to Products → select a product
2. In the Tags field on the right sidebar, add the matching tag (e.g. bestseller)
3. Save the product

The badge now renders on that product’s card and product page automatically. Repeat the tag step for every product that should display the badge.

Pro tip: create a Smart Collection filtered by the badge tag to manage which products carry the badge in bulk. When you remove a tag, the badge disappears immediately — no theme republish needed.

Method 3 — Code-Based Custom Badges (Developer)

If you need a badge driven by logic the theme settings don’t support (e.g. “Free shipping over $50” displayed only on items above a price threshold, or a vendor-specific badge auto-applied per supplier), you can write Liquid code directly.

Example: add a “Free Shipping” badge to all products priced above $50.

In the theme’s snippets/product-card-badges.liquid (or equivalent file in your theme — check the For Developers docs section for your specific theme):

{% if product.price >= 5000 %}
  <span class="product-badge product-badge--free-shipping">Free Shipping</span>
{% endif %}

Note: Shopify prices are stored in cents. 5000 = $50.00.

For a vendor-based badge:

{% if product.vendor == 'Patagonia' %}
  <span class="product-badge product-badge--vendor">Certified Eco</span>
{% endif %}

Style the badge in assets/custom.css:

.product-badge--free-shipping {
  background: #2ecc71;
  color: #fff;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 3px;
}

Important: code-based badges are at risk of being overwritten in theme updates. We strongly recommend documenting your customizations and using GitHub integration. See How to Update Your Shopify Theme Without Losing Customizations for the safe-update workflow.

Styling Your Badges

All badge methods use the same CSS classes, so styling stays consistent across rule-based and tag-driven badges.

Theme settings → Colors → Badges controls:

• Badge background color
• Badge text color
• Badge border color (if your theme exposes this)

Per-badge colors (Method 2) override the global color so you can have a green “Eco” badge alongside a red “Sale” badge.

Position — badges render top-left of the product image by default. To move them, override the badge container in your theme’s CSS:

.product-card__badges {
  top: auto;
  bottom: 10px;
  left: auto;
  right: 10px;
}

Common Pitfalls

• Badge isn’t showing up — clear the theme cache (in customizer, click Save, then refresh the storefront with Cmd+Shift+R / Ctrl+F5). If still missing, verify the tag spelling matches exactly (tags are case-sensitive).
• Multiple badges stacking awkwardly — most themes show a maximum of 2-3 badges per product card to avoid visual clutter. Adjust the limit in Theme settings → Badges → Max badges per product.
• Sale badge missing on a discounted product — confirm the product’s variant has a compare_at_price higher than price. The theme reads this comparison, not your manual sale tag.
• Badge color changed after update — theme update may have reset color tokens. Re-check Theme settings → Colors → Badges after every theme update.

Frequently Asked Questions

Can I show different badges on different collection pages?

Yes, but it requires code-based customization (Method 3). Add a Liquid conditional in the product card snippet that checks the current collection (e.g. {% if collection.handle == 'sale' %}) and renders a different badge label.

How many custom badges can I add?

The built-in theme settings expose 6-10 custom badge slots depending on the theme. For more, use code-based badges (Method 3).

Will my badges survive a theme update?

Theme settings and tag-driven badges survive theme updates — they’re stored in your store’s data, not in the theme code. Code-based badges (Method 3) are at risk and need to be re-applied after a major update unless you use GitHub integration.

Can I add icons or images to badges?

Not by default — built-in and tag-driven badges are text-only. For badges with icons or images, you need code-based badges (Method 3): embed an inline SVG sprite directly in the badge snippet, or load an icon image from your theme assets.

Why are my badges visible in preview but not on the live store?

You’re previewing an unpublished theme. Either publish it, or test with a Shopify preview link from Online Store → Themes → Preview which renders the unpublished theme with live data.

Can I A/B test badge colors or copy?

Yes — install a Shopify A/B testing app (Intelligems, Convert.com, Visually) and target the badge container. Or, for a code-based test: split products into two collections and use a Liquid conditional to render different badge variants. Track conversion lift in Shopify Analytics.

Do badges affect SEO?

Badges are styling overlays; the underlying product page content is unaffected. Search engines see the product schema (price, availability, name, images) regardless of badge styling. Badges improve on-site CTR (more clicks from collection page to product page), which Google can pick up as a positive engagement signal indirectly.

Where to Go From Here

• See your theme’s specific badge settings in your For Developers documentation section
• Need help implementing a custom badge? Open a support ticket from your theme’s documentation page
• Browse our Shopify themes catalog — every theme on the page ships with the built-in badge system covered in Method 1 plus tag-driven custom badges from Method 2