Widget Setup Guide
Add the SizeMind size finder to your Shopify store theme. No coding required – it's all done through the Theme Editor.
Adding the Widget to Your Theme
Open Theme Editor
Go to Online Store → Themes → Customize in your Shopify admin. Alternatively, click "Open Theme Editor" from SizeMind's Settings page.
Navigate to Product Template
Click the page dropdown at the top center and select:
Products → Default product
If you have multiple product templates, you'll need to add the widget to each one where you want it to appear.
Add the App Block
In the left sidebar, find the Product information section. Click "+ Add block" and scroll to find "SizeMind Size Recommender"under the Apps section.
Position the Widget
Drag the block to your preferred position. We recommend placing it:
- Near the "Add to cart" button
- Below the size/variant selector
- Above the product description
Configure Settings
Click on the SizeMind block to access its settings (see below).
Save Changes
Click "Save" in the top right corner.
Widget Settings
Language
The widget supports 5 languages. Select the language that matches your store:
| Code | Language | Widget Text Example |
|---|---|---|
en | English | "Find your size" |
es | Spanish | "Encuentra tu talla" |
de | German | "Finde deine Größe" |
sr | Serbian | "Pronađi svoju veličinu" |
hr | Croatian | "Pronađi svoju veličinu" |
The language setting in Theme Editor controls the widget's text. The preview in SizeMind's Settings page always shows English.
Widget Features
Size Table Tab
The widget always includes a size table showing all available sizes and their measurements. This helps customers who prefer to check manually without entering their measurements.
How to Measure Tab
Built-in measurement guide with tips for accurately measuring:
- Chest/Bust
- Waist
- Hips
Personalized Recommendations
When customers enter their measurements, they receive:
- Recommended size with confidence indicator
- Alternative size when between sizes (if enabled)
- Measurement breakdown showing how each measurement fits
Fit Preference
Customers can choose their preferred fit:
- Tight: More fitted, choose smaller when between sizes
- Regular: Standard fit
- Loose: More relaxed, choose larger when between sizes
Saved Measurements
Customer measurements are saved locally in their browser. Returning visitors get instant recommendations without re-entering data.
Measurements are stored only in the customer's browser (localStorage). This is clearly communicated in the widget to build trust.
Customization Options
Widget Title
You can customize the widget's title in SizeMind → Settings. Default is "Find your size" but you could change it to:
- "What's my size?"
- "Size Finder"
- "Get your perfect fit"
Primary Color
Set your brand's primary color to customize button and accent colors in the widget. Go to SizeMind → Settings → Primary Color.
Troubleshooting
Widget Not Appearing
- Check mapping: Verify the product has a size chart mapping. Products without mappings won't show the widget.
- Check template: Make sure you added the widget to the correct product template (some themes have multiple templates).
- Check app embeds: Go to Theme Editor → App embeds and ensure SizeMind is enabled.
- Hard refresh: Clear browser cache with Ctrl/Cmd + Shift + R.
Widget Shows Wrong Size Chart
Check your product mappings. If a product matches multiple mappings, the highest priority one wins:
- Specific Product (highest)
- Collection
- Tag
- Product Type (lowest)
Measurements Not Saving
Saved measurements require localStorage. If not working:
- Customer may be in private/incognito mode
- Browser may have localStorage disabled
- Some aggressive privacy settings block localStorage
Theme Compatibility
SizeMind works with all Online Store 2.0 themes (Dawn, Refresh, Studio, etc.). For older "vintage" themes, contact support for manual integration options.