How to Add Size Chart in Shopify: Complete Guide 2025

Introduction: How to Add Size Chart in Shopify

One of the most common reasons for product returns in ecommerce—especially in fashion—is incorrect sizing. Shoppers can’t try things on like in a physical store, so having an accurate and accessible size chart is a must.

If your Shopify store sells clothing, shoes, or any product that varies in dimension, learning how to add size chart in Shopify can reduce returns and boost customer satisfaction.

In this comprehensive guide, you’ll learn:

• Why Shopify size charts are important
• How to add a size chart on Shopify (multiple methods)
• Best practices for size chart design
• Where to place them for better conversion
• Recommended apps and tools
• Responsive, mobile-friendly solutions

Let’s help your customers choose the perfect fit—every time.

Why You Need a Size Chart on Shopify

Adding a size chart in your Shopify store does more than just provide information—it:

Improves Trust

Customers feel more confident when they know their size.

Reduces Returns

Accurate sizing reduces the chances of “It didn’t fit” returns.

Increases Conversion

Shoppers are more likely to complete a purchase if they’re sure about the size.

Enhances UX

A well-placed size chart improves the buying experience, especially on mobile.

In short: If you’re in fashion, footwear, activewear, or accessories—add a size chart on Shopify now.

3 Ways to Add a Size Chart in Shopify

Option 1: Use Shopify’s Built-in Product Description

This is the easiest and fastest method.

Steps:

1. Go to Shopify Admin → Products.
2. Select the product.
3. In the Description, add your size chart manually using a table or image.
4. Click Save.

You can use the rich text editor to format it as a table or insert a PNG/JPG image of your chart.

Pros:

• Easy to implement
• No coding needed
• Works out of the box

Cons:

• Repetitive for multiple products
• No popup or tabbed UI

Option 2: Add Size Chart as a Custom Page + Link It

This method is more scalable and centralized.

Step-by-Step:

1. Go to Online Store → Pages → Add Page.
2. Title it “Size Chart”.
3. Add your chart using a table, image, or custom HTML.
4. Save and Copy the URL of the new page.

Now, add a “Size Chart” link to your product pages.

How to Add the Link to Product Description:

html

CopyEdit

<a href="/pages/size-chart" target="_blank">View Size Chart</a>

Or style it as a button:

html

CopyEdit

<a href="/pages/size-chart" class="btn btn-size-chart" target="_blank">Size Chart</a>

Pros:

• Centralized management
• Easy to update
• Clean product pages

Cons:

• Opens in new tab (not ideal UX)
• Extra step for customers

Option 3: Add a Size Chart Popup Using Metafields + Theme Customization (Best UX)

Want a popup size chart that shows on click—without leaving the product page? This is the best experience.

Step-by-Step:

1. Create a Metafield for Size Chart

• Go to Settings → Custom data → Products → Add definition
• Name it: Size Chart
• Type: Reference > Page
• Save

2. Assign a Size Chart Page to a Product

• Create a new Page under Online Store → Pages with your size chart content.
• Go to a product, scroll down to Metafields, and select your size chart page.

3. Modify Theme to Display a “Size Chart” Button

Edit your theme (Dawn or any Shopify 2.0 theme):

• Go to Online Store → Themes → Edit Code
• Open main-product.liquid or product-template.liquid
• Add this code where you want the button to appear:

liquid

CopyEdit

{% if product.metafields.custom.size_chart %}

  <a href="{{ product.metafields.custom.size_chart.value.url }}" class="size-chart-link" target="_blank">Size Chart</a>

{% endif %}

You can also use a popup modal using JavaScript for advanced setups.

Pros:

• Dynamic per product
• Popup or inline
• Best UX

Cons:

• Requires some Liquid code
• Needs a compatible theme

Bonus Method: How to Add Size Chart in Shopify App

If you want advanced features like:

• Popup modals
• Product-specific charts
• Tabs or buttons
• Mobile optimization
• Analytics on clicks

…a Shopify size chart app is your best bet.

Top Size Chart Apps on Shopify App Store

App Name	Key Features	Price
Size Chart & Size Guide by Avada	Custom popup, visual editor, size conversion	Free – $9/month
Kiwi Size Chart by StayTuned	Unlimited charts, image/text, AI sizing	Free – $12/month
Clean Size Charts	Mobile-friendly modals, flexible templates	Free – $6/month
BF Size Charts & Size Guide	Drag & drop editor, variant-based charts	Free plan available

Best Practices for Designing a Shopify Size Chart

Whether you’re using a table, image, or app, follow these tips for optimal performance:

Use Standard Measurements

Include:

• Chest, waist, hip (for clothing)
• CM and INCH units
• International size conversions (US / UK / EU)

Make It Scannable

Use columns, grids, or icons—avoid dense paragraphs.

Optimize for Mobile

Make sure the chart is readable and scrollable on small screens.

Add a “How to Measure” Section

Include visual guides on how users should take their own measurements.

Include Country Size Conversions

Useful if you sell globally—add US, EU, AU, and Asian sizes.

Where to Place the Size Chart on Your Shopify Store

The placement of the size chart directly impacts conversions.

Here are the best options:

Placement	UX Impact
[Yes] Next to size selector	5 Star (Ideal)
[Yes] Below Add to Cart	4 Star
[Yes] In Product Tabs (e.g., alongside Description, Reviews)	3 Star
[No] In Footer	1 Star (Low visibility)
[No] In FAQ only	1 Star (Too far from purchase decision)

For best results, position it above the fold or near the size dropdown selector.

How to Add Size Chart in Shopify for Different Products

Not all products use the same sizing system. Here’s how to handle this:

Option 1: Metafields Per Product (Manual)

Assign different size chart pages to different products using metafields.

Option 2: Tag-Based Logic in Theme

Use product tags to dynamically load different charts.

liquid

CopyEdit

{% if product.tags contains 'pants' %}

  {% render 'size-chart-pants' %}

{% elsif product.tags contains 'shoes' %}

  {% render 'size-chart-shoes' %}

{% endif %}

Option 3: Use an App with Conditional Display

Apps like Kiwi or Avada allow assigning charts to:

• Product types
• Collections
• Tags
• Vendors

Shopify Size Chart SEO Tips

If you’re using a standalone size chart page, make it SEO-friendly.

Title:

“Size Chart – [Your Brand/Product Name]”

Meta Description:

Add a compelling explanation with keywords like “how to add a size chart on Shopify”.

Content:

Include measurement instructions, unit conversion, and FAQs.

Don’t forget to link to this page from your product descriptions or tabs.

Common Mistakes to Avoid

Hiding the chart too deep
Users won’t find it.

Using only image charts without alt text
Hurts accessibility and SEO.

Not updating charts for international users
Leads to sizing confusion and returns.

Missing mobile optimization
Over 70% of traffic is mobile—make charts scrollable.

FAQs: How to Add Size Chart in Shopify

How do I add a size chart popup in Shopify?

Use metafields with a compatible theme, or install a size chart popup app like Kiwi or Avada.

Can I show different size charts for different products?

Yes. Use metafields, tags, or apps to assign specific charts based on product type or collection.

Is it better to use an image or table?

Tables are easier for SEO and responsive design. Images work well for branded charts, but add alt text.

What if I use variants for sizes?

You can still add a size chart. In fact, combining size variants with a chart improves clarity.

Final Thoughts: Enhance UX and Reduce Returns With Shopify Size Charts

Now you know how to add size chart in Shopify, you can:

• Help customers choose the right fit
• Reduce returns and chargebacks
• Build trust and increase sales
• Offer better UX across all devices

Whether you go with a basic table or an advanced app, just don’t leave customers guessing. The more confident they are in sizing, the more likely they are to buy—and keep—their purchase.