How To Make Sure Product Badges Display Correctly On Every Theme
A badge that looks perfect on one theme can overlap text or vanish on another. Here's how to test badge display across themes and devices.
A badge that looks perfect on your desktop preview can end up overlapping the price on mobile, getting cropped by a collection grid, or simply not showing up at all on a theme with a different product card layout. Most of this isn't a badge problem — it's a testing gap. Badges get configured once, checked on one screen, and never revisited across the full range of layouts a store actually uses.
This guide covers why badges tend to break across themes and devices, and what a reasonable testing process looks like before badges go live store-wide.
Why Badges Break Across Different Themes
Badges fail for structural reasons more often than design reasons — the product card underneath them isn't the same everywhere.
Product Card Layouts Aren't Standardized
Different Shopify themes structure product cards differently — image aspect ratios, corner radius, and available whitespace for an overlay all vary. A badge sized and positioned for one theme's product card can sit awkwardly, overlap the title, or extend past the image boundary on another.
Mobile Breakpoints Change Where Badges Land
A badge positioned in a top corner on desktop can shift position, shrink, or get cut off once the product card resizes for a smaller screen, especially on grid layouts that show more products per row on mobile than expected.
| Layout Scenario | Common Badge Issue | What to Check |
|---|---|---|
| Dense mobile grid (3+ columns) | Badge text too small to read or overlaps price | Minimum badge size at smallest breakpoint |
| Theme with rounded product images | Badge corners misaligned with image edges | Badge shape and corner radius per theme |
| Collection page vs. product page | Badge appears correctly in one context but not the other | Placement settings for each page type separately |
Building a Cross-Theme Testing Process
A short, repeatable checklist catches most display issues before customers ever see them.
Checking the Core Product Card Variants
- Preview badges on your homepage collection grid, a standalone collection page, and an individual product page.
- Check the smallest supported mobile breakpoint, not just a standard phone preview.
- Test on any product with a long title or a secondary variant image to confirm the badge doesn't overlap either.
- If you switch or update your theme, re-check badge placement rather than assuming settings carried over cleanly.
How Lavar Supports Cross-Theme Badge Compatibility
Lavar's badges are built to work across Shopify themes and devices, which reduces how much manual re-checking is needed after a theme change.
Custom placement and sizing controls let you adjust badges per context instead of relying on one fixed configuration to hold up everywhere — useful for stores running seasonal theme changes or a mix of collection layouts.
Where Compatibility Testing Matters Most
- Seasonal theme swaps: re-check badge placement any time you switch to a holiday or campaign theme.
- Multi-collection stores: different collection templates can render the same badge differently.
- Page builder apps: custom-built product pages sometimes use a different card structure than the rest of the theme.
Use Cases for Multi-Theme and Multi-Collection Stores
Cross-theme badge issues show up most for stores that don't run a single, uniform layout across the whole catalog.
Stores That Switch Themes Seasonally
A badge setup that worked fine on last year's theme isn't guaranteed to carry over cleanly to this year's holiday theme without a re-check.
Multi-Collection Stores With Different Layouts
Stores selling across very different product categories sometimes use different collection templates for each, which multiplies the number of layouts a badge needs to work correctly in.
Stores Using Page Builder Apps for Landing Pages
Custom landing pages built outside the standard theme structure are one of the more common places badges quietly stop displaying, since they may not inherit the same product card markup.
Testing Your Badge Setup Before Launch
A short pre-launch pass catches most of what would otherwise surface as scattered customer confusion later.
- View every badge type on both a collection grid and an individual product page.
- Test at your narrowest supported mobile width, not just a mid-size phone.
- Check badge display on any custom or landing page templates separately from standard theme pages.
- Re-test after any theme update, not only after a full theme change.
Final Thoughts
Badge display issues are rarely about the badge design itself — they're about the range of layouts a badge has to work inside, which most stores never fully map out before launch. A short cross-theme testing pass catches the overlap and cropping issues that a single desktop preview won't.
Worth building this check into your process anytime you touch theme settings, not just when badges are first set up.
FAQ
A few questions come up often from merchants troubleshooting badge display issues.
Why Does a Badge Look Fine on Desktop but Not on Mobile?
Product cards resize differently at each breakpoint, so a badge sized for a larger card can overlap text or shrink unreadably on a narrower one.
Do I Need to Re-Check Badges After Every Theme Update?
It's worth a quick check after any update that changes product card structure, even a minor theme version bump.
Why Does a Badge Show on My Product Page but Not My Collection Page?
These are usually separate placement settings — a badge configured for one page type doesn't automatically apply to the other.
Can Custom Landing Pages Break Badge Display?
Yes, especially if the landing page was built with a page builder app that uses a different product card structure than your main theme.
Read More