TL;DR: Build a custom product badge by editing your product card and product template Liquid files, wrapping your badge markup in a condition that checks product tags, inventory, or metafields. Add scoped CSS in your theme’s stylesheet to style the badge, then test it across collections and product pages before publishing.
Step 1: Decide What Your Badge Should Say
Before touching code, define the badge logic. Common triggers include a “Sale” tag, low inventory (for example, fewer than 5 units), a “New” tag, or a custom metafield like product.metafields.custom.badge. Pick one trigger to start so your first implementation stays simple and testable.
If you want to dig deeper, check out our guide on Synthetic Biology: Scaling Sustainable Materials.
Step 2: Locate the Right Liquid Files
In your Shopify admin, go to Online Store > Themes > Edit code. Open the snippets folder and find your product card snippet (often product-card.liquid or card-product.liquid), plus sections/main-product.liquid for the product page. These are where the badge markup belongs.
Step 3: Add the Badge Markup
Inside the product card, typically right after the product image wrapper, insert a conditional block. For a sale badge, wrap a span in {% if product.compare_at_price > product.price %}. For a tag-based badge, use {% if product.tags contains 'New' %}. Close every {% endif %} carefully, and give the span a class like product-badge so you can style it.
Step 4: Style the Badge With CSS
Open your theme’s main CSS file (often base.css or theme.css). Style .product-badge with absolute positioning inside a relatively positioned card, a contrasting background, padding, a small border radius, and a readable font size. Keep the badge in a consistent corner so it never overlaps the product title or price.
Step 5: Test and Refine
Preview your theme and check a product that qualifies, one that doesn’t, and one with multiple triggers. Confirm the badge appears only when expected, looks correct on mobile, and doesn’t break the card layout. Duplicate your theme before editing so you can roll back instantly if something goes wrong.
Tips
Use assign to store badge text in a variable when you have multiple conditions, keeping markup clean. Prefer metafields over tags for merchant-editable badges. Add aria-hidden="true" only if the badge text duplicates nearby content; otherwise keep it accessible to screen readers.
FAQ
Q: Can I add multiple badges to one product?
A: Yes. Stack separate conditional blocks and position them with CSS, but limit yourself to two badges so the card stays uncluttered.
Q: Will my badge survive a theme update?
A: Not automatically. Theme updates can overwrite edited files, so keep a copy of your snippet changes or move the logic into a custom snippet you re-add after updating.
Q: Do I need to edit both the product card and product page?
A: Only if you want the badge in both places. The card snippet controls collection grids, while main-product.liquid controls the individual product page.
Leave a Reply