How to Add Size Charts to Hat and Helmet Product Pages

A shopper lands on your best-selling helmet or fitted cap. They love the design, they have their payment card ready, but they hit the size selector.

Suddenly, they freeze between “M” and “L.”

What happens next hits your bottom line. Either they abandon the cart entirely, flood your support inbox with “Does this run small?”, or worse: they order both sizes and return the one that doesn’t fit. That means double the shipping costs, double the warehouse handling, and inventory tied up in transit.

The fix starts right next to that dropdown: giving shoppers immediate sizing clarity before they click away.

Whether your store runs on Shopify or WooCommerce, here is how to set up product-specific size charts, eliminate sizing friction, and turn hesitation into confident sales.

Start with the chart for the product you sell

The fastest way to generate returns is to slap a generic “Helmet Size Chart” across your entire catalog.

Sizing is never universal. A Medium in a Bell helmet covers 55–59 cm, while a Shoei Medium covers 57–58 cm. A fitted cap in US size 7¼ can mean 57.7 cm in one brand and 58 cm in another. When sizing information is vague and shoppers guess, merchants pay for the return.

Every product-specific guide must include:

• The brand and exact model or range (never a blanket site-wide chart).
• Size labels matching your selector (such as S/M/L, numbered hat sizes, or metric cm).
• Head circumference ranges clearly labeled in both centimeters and inches.
• Manufacturer measuring instructions and fit guidance for measurements between sizes.

For fitted hats, retain the manufacturer’s regional size labels. For adjustable hats, include the supported circumference range when available.

For helmets, include relevant model-specific fit guidance. A circumference measurement supports size selection; shoppers should still follow the manufacturer’s fitting instructions and check the helmet’s physical fit once it arrives. SHOEI safety instructions

Rule of thumb: Reuse a chart only when the manufacturer’s measurements are genuinely identical.

Choose your setup

Your store needs…	Start with…
A few charts and a straightforward product layout	Your theme’s built-in size-guide or modal popup option
Different guides across multiple brands and products	A size-chart app or plugin with dynamic assignment rules
A position or layout your theme cannot support natively	A custom code adjustment to your product template
A way for shoppers to measure their head without a tape	An embedded camera-based head measurement widget

Check your current theme first. Many modern themes already include a modal or drawer block ready to configure without extra software.

How to add size charts in Shopify

Option 1: Use a theme popup and product metafield

A product metafield stores information for an individual product without adding a monthly app subscription. Shopify documents a native setup that connects each product to its own size-guide page.

For a compatible Online Store 2.0 theme:

1. Create the guide page: Go to Online Store → Pages and build a clean page containing your sizing table and measuring directions.
2. Define a product metafield: Navigate to Settings → Custom Data → Products. Create a field named “Size chart” with the Page reference type.
3. Add a pop-up block: In the Theme Editor, open your default product template and insert a Pop-up block inside the Product information section.
4. Connect the dynamic source: Click the dynamic-source icon on the pop-up content setting and link it to your new “Size chart” metafield.
5. Assign the guide per product: In your Shopify admin, open each product, select its corresponding guide page in the metafield box, and save.

Watch for empty popups: Shopify notes that the link can remain visible when a product’s page reference is blank. Clicking an empty popup frustrates shoppers. Use a separate template for accessories without charts, or have a developer add a simple conditional check ({% if product.metafields.custom.size_chart != blank %}). Shopify’s popup size-chart tutorial

Place the link immediately above or beside the size selector where your theme allows. Every pixel of distance between the selector and the guide increases drop-off.

Option 2: Use a dedicated size-chart app

An app becomes necessary when managing manual metafields across hundreds of multi-brand SKUs takes more time than selling.

For example, Kiwi Size Chart & Recommender offers collection- and tag-based chart assignments, automatic unit conversion, and modal display options.

Before choosing an app, check whether it can:

• Assign different charts automatically based on product vendor, collection, or tag.
• Anchor the guide directly beside your size selector.
• Render responsive, readable tables on mobile screens without awkward horizontal scrolling.
• Support both metric and imperial units within your selected pricing tier.

After installation, follow the app’s storefront activation steps. Creating a chart in the dashboard does not finish the job: open a live product page and confirm that shoppers can easily tap and read it.

How to add size charts in WooCommerce

Option 1: Use your theme or product template

For a small catalog, you can display an inline table in a dedicated product tab or an accordion section below the purchasing controls.

If you use a block theme, customize the layout through Appearance → Editor → Templates → WooCommerce → Single Product. WooCommerce allows you to rearrange the blocks that display product details and purchase options. WooCommerce product-template documentation

Watch for shared template traps: Adding a fixed-size table directly into a shared Single Product template forces that specific chart onto every product using the template. For multi-brand headwear, keep templates generic and inject sizing via product tabs, custom fields, or an assignment plugin.

Option 2: Use a size-chart plugin

The Size Chart for WooCommerce extension provides reusable tables, category/tag assignment rules, and flexible button placement.

Setup follows this sequence:

1. Install and activate the extension.
2. Open the Chart Manager and create a new chart.
3. Enter head circumference ranges and clear measuring steps.
4. Assign the chart to the relevant products, categories, or tags.
5. Choose the display format (modal popup or extra product tab) and button position.
6. Preview an assigned product on your live storefront.

Available button positions typically include locations after the price, short description, or add-to-cart area. Test which placement brings the guide closest to your size attribute dropdown.

If your theme restricts button positioning, verify template compatibility before committing to a paid plugin.

Put the guide beside the size selector

A customer deciding on a size should never have to search your footer or scroll past customer reviews to find measurements.

Use a direct, familiar trigger label:

Size guide (or Size & measuring guide if measuring instructions are included).

Choose the display format that protects your purchasing flow:

• Modal popup (Recommended): Keeps your product page uncluttered and leaves room for clear tables and diagrams without pushing the “Add to Cart” button off the screen.
• Expandable section / Accordion: Works well when shoppers can reveal measurements directly below the selector.
• Inline table: Best reserved for compact charts that fit cleanly beside buying options without adding visual clutter.

When using a popup, ensure the close button is prominent and thumb-friendly. Never refresh or reset the page on close, preserve the customer’s selected variant so they can buy immediately.

Show centimeters and inches clearly

Label measurements explicitly: Head circumference (cm) or Head circumference (in). “Size” alone does not tell shoppers what the number represents.

If an international shopper has to open a new browser tab to convert units, there is a high chance they will never return to complete the order.

Two setups work best:

• Display cm and inches in adjacent columns.
• Offer an interactive cm / in toggle switch.

For conversion, divide centimetres by 2.54 to get inches (e.g. 58 cm is approximately 22.8 inches).

Always keep the manufacturer’s original ranges as your baseline. Check converted boundaries carefully so rounding does not introduce confusing gaps or overlapping numbers.

Hat size numbers require distinct labels: US hat size 7¼ is a sizing designation, not a head circumference of 7¼ inches. Display the actual head measurement alongside hat size numbers to eliminate confusion.

Assign charts by sizing rules

Assigning charts by broad category is a shortcut that often backfires. In headwear, different brands within the same category rarely share the same fit.

Product group	Assignment approach
Colour variants of one fitted hat model	Share the chart if measurements are identical
Adult and youth helmets from one brand	Assign separate charts by shell size range
Multiple brands in a “Cycling helmets” category	Map charts by brand and specific model line
An outlier model with an aggressive race fit	Give that model its own product-level override

Check your software’s assignment priority: confirm whether a product-level rule overrides a category rule.

Review fallback behavior as well. If no rule matches, showing an unrelated default chart will misguide buyers. Displaying no chart is safer than displaying the wrong one.

Check the whole flow on a phone

Over 70% of headwear browsing happens on mobile devices. Open a live product page on your phone and walk through the buyer’s journey:

1. Locate the guide: Is the link immediately visible beside the size selector without scrolling past the fold?
2. Open and inspect: Can you read every column comfortably without pinching or zooming?
3. Switch units: Does the unit toggle work smoothly on a touchscreen?
4. Close the guide: Does your selected variant remain active when you return to the page?
5. Test variant switches: Change a color or style and confirm the guide updates or remains accessible.
6. Check checkout friction: Ensure sticky bottom bars, cookie notices, and live chat widgets do not obscure the guide or its close button.

Avoid image screenshots: Never upload an image of a spreadsheet as your size chart. On mobile screens, screenshots become blurry, unreadable, and impossible to zoom cleanly. Always use live HTML or text-based tables.

When your customer still has no tape measure

You have built the perfect size chart. The popup is responsive, the units are clear, and product assignments are accurate.

Yet customers still hesitate. They still message support. They still order two sizes and return one.

Why?

Because nobody carries a soft tailor’s tape measure in their pocket.

When an online shopper is browsing helmets or hats on their phone, prompting them to locate a flexible measuring tape or find a piece of string and a ruler halts the purchase process. Most will guess. Many will guess wrong. Others will simply abandon the cart.

This is where TWIWT’s Head Measurement Tool removes the friction.

Instead of guessing or searching for a tape measure, shoppers use their smartphone or laptop camera directly in their browser. In seconds, the embedded widget measures their head circumference and maps it directly to the product-specific size chart you have configured—recommending the right size instantly.

How it supports your store:

• Move shoppers from choosing to buying: Eliminates sizing guesswork and gives customers the clarity to purchase right on the product page.
• Respects your multi-brand sizing rules: Maps directly to your specific brands, models, and custom size charts.
• Zero-risk fallback: Shoppers who prefer manual measurement, or decline camera access, continue using your standard size chart without interruption.
• Frictionless setup: Integrates smoothly on Shopify through the TWIWT Head Measurement app, or on WooCommerce and custom storefronts via a single line of JavaScript.
• Honest expectations: For helmets, the result remains a size recommendation based on head circumference. It provides a confident starting point while reminding shoppers to follow manufacturer fitting guidelines and perform a physical fit check.