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 available on the Professional plan only. 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 all three conditions are met:
- The customer has saved measurements in their browser
- The store is on the Professional plan
- The product has a matching size chart (via product mapping)
If any 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 badge blocks, each for a different use case:
Collection Badges
Designed for collection pages (e.g., /collections/dresses). Add this block to your collection template in the Theme Editor.
Global Badges
Designed for product listings anywhere on the site — featured products on the homepage, related products on product pages, recently viewed sections, etc. Add this block to the templates where you want badges to appear.
Setup
Open Theme Editor
Go to Online Store → Themes → Customize.
Navigate to the Correct Template
For collection badges: select Collections → Default collection.
For global badges: select the template where you want them (e.g., Home page, Product page for related products).
Add the Badge Block
Click "+ Add block" or "+ Add section" and look for "SizeMind Collection Badges" or "SizeMind Global Badges" under the Apps section.
Configure Settings
Click the badge 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 your plan: Badges require the Professional plan. Verify in SizeMind → Billing.
- 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.