Tired of Size Chart App Headaches? Community Reveals Best Practices & A Killer Custom Solution
Hey everyone, I've been diving deep into the Shopify community forums again, and a recent discussion really caught my eye – one that I know hits home for so many of you running apparel stores. Our fellow merchant, Rubidium, kicked off a thread asking for help finding that elusive 'perfect' size chart app. They were looking for something with a clean design, support for multiple charts, automatic English/French translation, and crucially, auto-assignment for new products (because who has time to manually update hundreds of SKUs?). What's more, they'd already tried several apps, one even breaking their store, and were fed up with AI-generated suggestions that just didn't deliver.
Beyond the App: Essential Sizing Strategies
Before we even got to specific apps or code, there was some absolute gold dropped right at the start by JimFromTshirtgang, an apparel production pro. And honestly, this advice is critical, no matter which technical path you choose. Jim laid out some fundamental truths about reducing returns, which is ultimately what a good size chart is all about:
- Publish Garment Measurements, Not Body Measurements: This is huge! Customers can easily measure a shirt they already own, but guessing their body measurements for an online purchase is a recipe for 'too small' returns. Give them chest width laid flat, body length, and sleeve length.
- Use the Mill's Spec Sheet: Don't rely on generic charts. Each blank style (Gildan, Bella+Canvas, Next Level) has its own measurements and tolerances. If you carry three brands, you genuinely need three charts.
- State the Tolerance: A simple note like “Measurements are plus or minus half an inch” manages expectations and pre-empts complaints. It’s the honest truth of garment production.
- Organize for Automation: For auto-apply to work, your product organization needs to be solid. Tag or collection your products by blank style (e.g., “BC3001”) rather than just “tees.” This allows an app or custom rule to map the correct chart automatically.
- Handle Translations Manually for Numbers: If you're selling to Canadian or French customers, remember that auto-translate layers often leave numbers in inches. Build both centimeter and inch columns directly into your charts.
The App Dilemma & The Case for Custom Code
Rubidium's frustration was palpable: tried apps, one broke the store, and none quite hit all the marks – clean design, multiple charts, auto-apply for constant new arrivals, and a size recommender. This is a big ask, and it’s why many app suggestions (like Kiwi Size Chart & Recommender mentioned by Ellie-BOGOS and oscprofessional, or MP Size Chart & Size Guide by Custom-Cursor) came with a common caveat: “verify translation.” Maximus3 even questioned if Rubidium was “wanting too much” from an off-the-shelf solution, especially when it came to a smart recommender.
It’s no wonder then that community members like Moeed and OptiAdvancedTech quickly steered the conversation towards a custom-coded solution. After all, if apps are breaking your store or just not fitting the bill, a bespoke approach can give you total control. Moeed highlighted the benefits: no app conflicts, no monthly fees, and the ability to hit all four requirements precisely – chart data in metafields, rule-based logic for auto-apply, true French translation, and a frontend styled perfectly to match your store.
Building Your Own Smart Size Chart: A Step-by-Step Guide
And here’s where the community really shone! Ajaycodewiz, clearly a coding wizard, didn't just suggest custom code – they provided a detailed, step-by-step implementation. This isn't just theory; it's actionable code you can use to build a robust size chart system right into your Shopify store using Metaobjects. This solution covers multiple charts, auto-assignment, a size recommender, and multi-language support using Shopify's native Translate & Adapt app. It’s designed to work seamlessly with themes like Dawn.
The Result: Auto-Assign, Multi-Chart, and a Smart Recommender
Here's a peek at what this custom solution can achieve:
It smartly auto-applies charts based on product type or tags. Plus, the recommender reads your existing table to suggest sizes. Here’s an example:
How to Implement This Custom Size Chart
Step 1: Create the Chart Type (Metaobject)
Go to your Shopify Admin > Settings > Custom data > Metaobjects > Add definition. Name it Size chart and add these four fields:
- Heading, single line text
- Table, multi-line text
- Note, single line text
- Recommender, multi-line text
Leave the Translations toggle on.
Step 2: Add Entries for Each Product Type
Create a new entry for each unique product type (e.g., “T-Shirt,” “Hoodie”). In the “Table” field, use this format (first line for headers, then pipe-separated cells for rows):
Size | Chest (cm) | Waist (cm) | Length (cm)
XS | 82-87 | 66-71 | 66
S | 88-93 | 72-77 | 68
M | 94-99 | 78-83 | 70
L | 100-105 | 84-89 | 72
XL | 106-113 | 90-97 | 74
XXL | 114-121 | 98-105 | 76
The “Recommender” field is optional and holds three lines for its button and result labels:
Find my size
Your size:
Closest size:
Crucially, set the entry’s Handle to the product type, lowercased with dashes. For example, a product Type “T-Shirt” means the handle should be t-shirt. This handle is your automatic assignment mechanism.
Step 3: Paste the Code Snippet
Navigate to Online Store > Themes. Click the ... next to your live theme and select “Edit code.”
In the “snippets” folder, click “Add a new snippet,” name it size-chart, paste the following code, and Save.
{%- comment -%}
Auto size chart + size recommender. snippets/size-chart.liquid
Use: {% render 'size-chart' %} (Custom Liquid block on the product template)
Which chart shows is worked out at render time. Nothing is set per product.
First match wins:
1. product.metafields.custom.size_chart (optional manual override)
2. a Size chart entry whose handle = the product TYPE, handleized
3. a Size chart entry whose handle = any product TAG, handleized
4. a Size chart entry with the handle "default"
No match, no button. Nothing to clean up.
Every visible string comes from the metaobject or from Liquid's own
translation files, so Translate & Adapt handles English/French for free.
{%- endcomment -%}
{%- liquid
assign chart = product.metafields.custom.size_chart.value
if chart == blank
assign type_handle = product.type | handleize
if type_handle != blank
assign chart = metaobjects.size_chart[type_handle]
endif
endif
if chart == blank
for tag in product.tags
assign tag_handle = tag | handleize
assign candidate = metaobjects.size_chart[tag_handle]
if candidate != blank
assign chart = candidate
break
endif
endfor
endif
if chart == blank
assign chart = metaobjects.size_chart.default
endif
-%}
{%- if chart != blank and chart.table != blank -%}
{%- assign rows = chart.table.value | strip | split: '
' -%}
{%- assign head = rows | first | split: '|' -%}
{%- assign uid = 'sc-' | append: product.id -%}
{%- comment -%}
The recommender's own wording. Optional: leave the field empty and the
English defaults below are used. Filling it in keeps every visible string
inside the metaobject, so Translate & Adapt covers the whole widget
rather than just the table.
{%- endcomment -%}
{%- assign labels = chart.recommender.value | strip | split: '
' -%}
{%- assign lbl_go = labels[0] | default: 'Find my size' -%}
{%- assign lbl_hit = labels[1] | default: 'Your size:' -%}
{%- assign lbl_near = labels[2] | default: 'Closest size:' -%}
{{ chart.heading }}
{%- for cell in head -%}
{{ cell | strip }}
{%- endfor -%}
{%- for row in rows offset: 1 -%}
{%- assign cells = row | split: '|' -%}
{%- if cells.size > 0 -%}
{%- for cell in cells -%}
{{ cell | strip }}
{%- endfor -%}
{%- endif -%}
{%- endfor -%}
{%- if chart.note != blank -%}
{{ chart.note }}
{%- endif -%}
{%- endif -%}
Step 4: Put it on the Product Page
In your Theme editor, open a product template (e.g., Default product). Add a “Custom Liquid” block and paste this one line:
{% render 'size-chart' %}
Drag this block to where you want the size chart button to appear, typically under the variant picker.
Step 5: Handle French Translations
Install the free Shopify app “Translate & Adapt.” Open your “Size chart” metaobject entries within this app and use “More actions, Localize.”
You’ll see your English content in one column and an empty French column next to it. Translate the heading, column headers, the note, and the three recommender lines. The size letters (XS, S, M) and numbers remain as they are. This is a one-time translation job per chart!
A few extra notes from ajaycodewiz:
- If a product’s type has no matching chart, no button appears, which is the expected behavior.
- The system falls back to product tags automatically if no chart matches the product type. You can also create a “default” entry with the handle
default. - You can still override a single product by manually pointing its
custom.size_chartmetafield to a different entry.
So, what’s the big takeaway from this fantastic community discussion? Whether you go with a carefully vetted app – making sure to double-check those translation features – or decide to roll up your sleeves with a custom solution like ajaycodewiz generously shared, the foundation of success lies in clear, accurate garment data and smart product organization. It’s about empowering your customers to make confident purchasing decisions, which ultimately means fewer returns and happier shoppers. A huge shout-out to everyone in the thread for sharing such valuable insights!