How to Add Hat Size Chart Popups in Shopify

Your customer found the hat they love. Now they’re stuck on size selection.

When shoppers have sizing doubts, they do one of two things: abandon the cart or order multiple sizes and keep one. That bracketing cycle eats your margins in return shipping, restocking time, and tied-up inventory.

A Shopify size chart popup solves this right at the point of decision. Customers check measurements in one click, pick their size, and finish checkout without leaving the page.

Best of all, you can build this without touching code. Here is how to set up clean, brand-specific popups in Shopify and keep maintenance effortless as your catalog scales.

Choose your no-code setup path

Start with the tools your store already has before paying for another app subscription.

Your store’s current setup	Recommended path	Why it works
Theme has a popup block with dynamic source support	Shopify pages + product metafields	Cleanest native setup. Zero app fees, fast load speeds, and easy updates.
Theme supports popups, but catalog uses only 1–3 fixed size ranges	Separate product templates	Quickest setup for small, single-brand catalogs.
Catalog spans multiple brands with complex sizing rules	Dedicated size chart app (e.g. Kiwi)	Automates chart assignment across vendors, tags, and collections.

Check your theme documentation first. If your theme supports dynamic sources in popups, the native metafield route gives you total control without slowing down your store. Shopify’s size chart tutorial walks through the basic theme requirements.

Prepare accurate charts before touching Shopify

A slick popup will not save a sale if it displays the wrong measurements. In fact, an inaccurate chart guarantees costly returns.

Pull current sizing specs directly from each manufacturer. For every guide you publish, include:

• Brand and specific model: Never assume all hats from Brand X share the same cut.
• Matching size labels: Ensure the chart labels (S, M, L or 7 1/8, 7 1/4) match your Shopify variant dropdown directly.
• Head circumference in inches and cm: Display both units to eliminate mental math for international shoppers.
• Step-by-step measuring steps: Explain where the tape sits (typically 1 cm above eyebrows and ears).
• Between-size advice: State whether the customer should round up or down if they fall between measurements.

Avoid image screenshots: Never upload an unreadable JPEG of a size chart. Build clean text tables that mobile shoppers can read without pinching and zooming.

Option 1: Native Shopify setup (Pages + Metafields)

This is the cleanest, fastest method. You create your sizing guides as standard Shopify pages, then use a product metafield to link each product to its specific guide.

Step 1: Create your size guide pages

1. Navigate to Online Store → Pages → Add page.
2. Title the page clearly (e.g., Brand A - Fitted Caps or Brand B - Touring Helmets).
3. Use Shopify’s table tool to enter sizes and head measurements. Shopify’s page editor guide covers formatting.
4. Add 2–3 clear sentences on how to measure head circumference.
5. Set page visibility to Visible and save.

Repeat this for each distinct sizing system in your catalog. Because these pages live natively in Shopify, updating them takes seconds.

Step 2: Define your product metafield

Give your products a dedicated field to select their size chart:

1. Go to Settings → Custom data → Products (or Metafields).
2. Click Add definition.
3. Name it Size chart.
4. Set the type to Page (select Single page).
5. Click Save.

Step 3: Connect the popup block in your theme editor

1. Go to Online Store → Themes → Customize.
2. Open your default Product template (or create a dedicated Hats & Helmets template).
3. Under Product information, click Add block and select Pop-up.
4. Set the link label to “Size guide” or “View size chart”.
5. Click the Connect dynamic source icon next to Page.
6. Select your Size chart metafield.
7. Save your theme changes.

Step 4: Assign charts to individual products

Open any hat or helmet in your Shopify admin. Scroll down to Metafields at the bottom of the product page, click Size chart, and select the matching page.

Preview the product on your storefront. Click the link to verify that the popup opens the specific chart for that item. Shopify’s popup tutorial outlines troubleshooting for dynamic sources.

Prevent ghost links: If a product has no chart assigned, some themes still show the “Size guide” button, leading to a blank popup. For one-size-fits-all items (such as beanies or straps), assign a product template without that block.

Why this scales effortlessly

Dozens of products can reference a single chart page. When a manufacturer revises their sizing specs, you update one page and every connected product reflects the update immediately.

For example, 40 fitted caps that share one sizing system all point to one page. A specialized helmet model gets its own distinct reference.

Alternative: Fixed templates for simple catalogs

If your catalog sells only one or two hat brands, you can skip metafields. Simply create 2 product templates, add the popup block, and hard-select the static page in the theme editor.

The Turbo theme documents both this method and the metafield route in Turbo’s popup documentation. Avoid this if you sell more than three brands; managing dozens of duplicate theme templates creates maintenance headaches down the road.

Option 2: Use a size chart app for rule-based matching

If your theme lacks dynamic popup blocks, or your catalog has hundreds of products across dozens of brands, then a dedicated sizing app saves hours of manual work.

Apps like Kiwi Sizing allow you to assign charts automatically using rules based on Vendor, Product Type, Tags, or Collections. Kiwi’s product matching guide details how these rules interact.

When evaluating size chart apps, demand these essentials:

• Clean mobile rendering: Tables must fit small screens without breaking layout.
• Smart matching logic: Support for Match ALL and Match ANY conditions.
• Priority controls: Clear fallback rules when a product matches more than one rule.
• Placement control: The button must sit directly beside the size dropdown, where shoppers look for it.

Watch out for rule overlap: If you set a rule for “All Helmets” and another for “Brand X Helmets”, some apps display two popups. Set strict priority levels in your app settings so shoppers see only one relevant guide.

Map rules to real-world fit, not broad categories

A blanket rule like “show this chart on all hats” leads straight to returns. Fitted caps, snapbacks, and full-face motorcycle helmets follow completely different sizing logic.

Always build your assignment rules around the narrowest common denominator:

Product Group	Assignment Logic	Why This Separation Matters
Brand A fitted caps	Vendor = Brand A AND Product Type = Fitted Cap	Standard numerical sizing (e.g. 7 1/8 to 7 5/8).
Brand A youth caps	Tag = sizing-youth OR Collection = Kids	Different circumference range than adult lines.
High-end motorcycle helmet	Specific Product match	Proprietary shell sizing with distinct cheek pad thicknesses.
One-size snapbacks	No chart assigned (or simple Adjustable note)	Removes distraction when size selection is not required.

Make chart verification part of your new-product intake checklist. When your merchandising team adds a SKU, tagging the correct size chart should be as mandatory as uploading the hero image.

Test the shopper’s journey before you launch

Before announcing your new guides, test them across both mobile and desktop screens.

Audit these critical friction points:

• Location: Is the “Size guide” link right above or beside the size selector? Shoppers should never have to hunt for sizing advice.
• Mobile readability: Can you read every measurement without zooming horizontally?
• Variant alignment: Do chart labels match your variant buttons character-for-character?
• Smooth dismissal: Does tapping outside the modal or hitting Esc close the popup cleanly without resetting selected variants?
• Zero ghost popups: Does every product with a popup link open a populated guide?

A vital note on protective helmets: An online size guide or recommendation supports initial sizing choice, but it cannot replace physical fitting. Remind customers that protective headwear must be tried on physically according to the manufacturer’s instructions before taking it on the road or slope.

The hidden flaw in static charts: Nobody carries a tape measure

Even the cleanest size chart popup leaves one major conversion barrier unresolved.

A chart answers: “Which size matches a 58 cm head?”
It cannot answer: “What is my head size right now?”

Most shoppers browse on mobile devices while commuting, relaxing, or taking a break. They do not have a flexible tailor’s tape in their pocket. When faced with sizing uncertainty, they hesitate, leave the tab open, or buy multiple sizes to bracket the order.

Give shoppers clarity before they buy

TWIWT’s Head Measurement Tool bridges that gap directly on your product pages.

Using a smartphone or laptop camera, the browser-based widget measures head dimensions in seconds and recommends a size against your product’s specific size chart.

• Zero app downloads: Runs as a lightweight embedded widget directly in the shopper’s mobile, tablet, or desktop browser.
• Dual sizing routes: Shoppers who know their measurements can consult your standard chart popup. Those who do not can get a personalized size recommendation via camera.
• Simple store integration: Add one line of JavaScript to your Shopify store and sync your catalog through your existing product feed.

When you remove sizing doubt, customers stop second-guessing their orders. They move from choosing to buying.