Collection Badges
Show personalized size recommendations directly on collection pages and product listings — so customers see their size before they even click into a product.
Collection badges are included for every store at no extra cost. Badges require saved measurements — they only appear after a customer has entered their measurements in the widget at least once.
How Badges Work
When a customer enters their measurements on any product page, SizeMind saves them locally in the browser. On subsequent visits to collection pages, SizeMind automatically shows a small badge on each product card with the recommended size (e.g., "Your size: M").
Badges only appear when both conditions are met:
- The customer has saved measurements in their browser
- The product has a matching size chart (via product mapping)
If either condition is not met, no badge is shown — the product card looks completely normal with no empty or loading states.
Badge Types
SizeMind includes two ways to show badges:
SizeMind Badges (Global) — app embed
The easiest option and the one we recommend. It is an app embed, so you switch it on once in the Theme Editor and it shows badges on product listings anywhere on the site — collection pages, featured products on the homepage, related products, recently viewed sections, and so on.
SizeMind Badges — section block
A block you add to a specific template, such as your collection page(e.g., /collections/dresses), if you only want badges in that place.
Setup
Open Theme Editor
Go to Online Store → Themes → Customize.
Turn On the Badges
Click App embeds in the left sidebar, find "SizeMind Badges (Global)" and toggle it on.
Prefer to limit badges to one template? Instead, open that template (e.g., Collections → Default collection), click "+ Add block" or "+ Add section" and add "SizeMind Badges" under the Apps section.
Configure Settings
Click the badge embed or block to configure language, colors, icons, and badge style (see settings below).
Save Changes
Click "Save". Badges will appear for customers who have saved measurements.
Badge Settings
Language
Select the same language as your main widget. The badge text (e.g., "Your size:") will match.
Result Text
The text shown before the size on the badge. Default is "Your size:" but you can customize it (e.g., "Size:", "Your fit:").
Result Icon
Choose an emoji icon shown on the badge. Options include 👗, 👕, ✅, 🎯, ⭐, ✨, 💯, 🏷️, or no icon. You can also enter a custom emoji.
Badge Colors
- Badge Background: Background color of the size badge (default: dark navy)
- Badge Text: Text color of the size badge (default: white)
Badge Roundness
Control the border radius of the badge (0–20px). Default is 8px for slightly rounded corners.
How It Works Technically
When a collection page loads, the badge script:
- Checks if the customer has saved measurements in localStorage
- If not, does nothing (no badges shown)
- Finds all product cards on the page and extracts product handles
- Sends a single batch API request to get recommendations for all products
- Displays a badge on each product that has a matching size chart and recommendation
- Products without a size chart or recommendation show no badge
Badges use a single batch API call for all visible products, so they load quickly even on pages with many products. The API request only happens once per page load.
Theme Compatibility
Badges automatically detect product cards across most Shopify themes by looking for common CSS classes and data attributes. Supported themes include Dawn, Refresh, Studio, and most third-party OS 2.0 themes.
If badges don't appear on your theme's product cards, contact support with your theme name and we'll add compatibility.
Troubleshooting
Badges Not Showing
- Check the embed is on: In the Theme Editor, open App embeds and make sure "SizeMind Badges (Global)" is toggled on (or that the "SizeMind Badges" block is on the template).
- Enter measurements first: Visit a product page and enter measurements in the widget. Badges only appear after measurements are saved.
- Check product mappings: Products need a size chart mapping to show a badge.
- Hard refresh: Clear browser cache with Ctrl/Cmd + Shift + R.
Badges Show on Wrong Position
Badge positioning depends on your theme's product card structure. By default, badges appear at the bottom-left of the product image. If positioning looks off, contact support for theme-specific adjustments.