Many shoppers love the look of a product but hesitate before purchasing because they’re unsure about sizing. That pause often leads to abandoned carts or costly returns when items don’t fit as expected. For apparel, footwear, or accessories, unclear sizing is one of the top reasons behind returns in e-commerce. 

The good news? You can resolve this issue with a clear, interactive chart that guides buyers to the correct choice. By placing a well-designed size chart in Shopify product pages, you build trust, reduce uncertainty, and improve conversions without relying on third-party apps.

In this blog, you’ll learn how to add size chart in Shopify product pages using Shopify’s built-in tools. We’ll cover step-by-step instructions, explain how to make charts interactive with collapsible sections and metafields, and share best practices to keep the experience user-friendly across desktop and mobile.

Why Interactive Size Charts Matter

A static image of a chart can work, but it doesn’t always engage customers in the way you want. Shoppers today expect quick access, mobile responsiveness, and clear navigation while browsing product pages. Interactive charts, such as collapsible tabs, pop-ups, or metafield-driven displays, provide a smoother experience.

Key reasons to add an interactive chart include:

• Lower return rates: Fit issues are one of the most common reasons for returns in the fashion e-commerce sector.
• Higher conversion rates: Customers are more likely to make a purchase when sizing guidance is just one click away.
• Time saved on support: You’ll field fewer questions about “What size should I order?”
• Better customer loyalty: Clear communication builds long-term trust.

Methods to Create a Size Chart Without Apps

Shopify gives you native tools to build and display size charts interactively. You don’t need third-party apps if you’re comfortable using the Online Store 2.0 editor, metafields, and basic theme customization. Below are the main approaches.

Create a Size Chart Page

The first step is to create a dedicated page that contains your size chart.

Steps to follow:

From your Shopify admin, go to Online Store → Pages → Add Page.

Title it “Size Chart.”

Add your chart content as either:

An HTML table (recommended for SEO and accessibility).

An image (upload via the content editor).

Publish the page.

Pro tips:

Use both inches and centimeters to support customers in the US and globally.

Keep the table simple with columns like Chest, Waist, Length, etc.

Add short notes like “Runs slightly small—consider sizing up.”

This page becomes the foundation you’ll link to or embed in interactive blocks.

Add the Chart with a Collapsible Tab

Most Online Store 2.0 themes allow collapsible sections on product pages. These work perfectly for size charts.

Steps:

Go to Online Store → Themes → Customize.

Select your product template.

Add a Collapsible Tab block.

Title it “Size Guide” or “View Size Chart.”

Paste the chart content directly or link to the chart page you created.

Benefits:

Customers can open or close the chart as needed, keeping pages clean.

Tabs save space on mobile while still making sizing easy to access.

You can reuse the same tab across multiple product templates.

Use a Popup for Better Engagement

Pop-ups are often preferred because they keep customers on the same page. Instead of redirecting, the chart appears in a window overlay.

Steps (if your theme supports popups):

In the theme editor, choose the product template.

Insert a Popup block or button near the size selector.

Link it to your size chart page or paste the chart HTML directly.

Advantages:

Shoppers don’t leave the product page.

More interactive and visually engaging.

Easy to style and brand to match your store.

Use Product Metafields for Different Charts

If you sell multiple product categories (such as shirts, shoes, and jackets), you may need unique charts. Shopify’s metafields let you assign different size charts to individual products.

Steps:

In Shopify admin, go to Settings → Custom Data → Products.

Add a metafield definition, e.g., size_chart.

For each product, paste the chart HTML or select the appropriate chart page.

In the theme editor, connect a block to the metafield so the correct chart displays automatically.

Why this works well:

Great for large catalogs with varied sizing systems.

Avoids showing irrelevant charts on products.

Scales easily as you add more SKUs.

Add Custom Liquid for Full Control

If you’re comfortable editing theme code, custom Liquid gives you maximum flexibility.

Basic setup:

In your theme files, create a new section, such as size-chart.liquid.

Insert your HTML chart and add conditional logic by product type, tag, or vendor.

Add the section to main-product.liquid next to the size selector.

This is more technical but lets you fully control placement, styling, and interactivity.

Best Practices for Interactive Size Charts

No matter which method you choose, here are some best practices to follow:

Positioning matters: Place the chart near the size selector, not hidden at the bottom.

Keep it simple: Customers want quick reference, not lengthy explanations.

Show both inches and centimeters: Many US shoppers use inches, but offering cm helps international buyers.

Add fit tips: Short notes like “True to size” or “Model is 5’9” wearing Medium.”

Make it mobile-friendly: Use collapsible tabs or popups for smaller screens.

Use visuals: Diagrams showing how to measure bust, waist, or inseam increase clarity.

Stay consistent: Use the same formatting across all products for professionalism.

SEO Benefits of Size Charts

Adding a size chart isn’t just about usability, it can also improve your SEO if set up correctly.

Use HTML tables instead of images so Google can index the data.

Add keywords naturally in titles, like “Men’s T-Shirt Size Chart.”

Include alt text for any chart images (e.g., “women’s dress size chart in inches and cm”).

Internally link from collection or product descriptions to the chart page.

Over time, this can capture traffic from shoppers searching specifically for sizing guides related to your brand.

Conclusion

An interactive size chart is one of the simplest yet most effective ways to boost confidence and sales in your Shopify store. By utilizing Shopify’s built-in tools, including pages, theme editor, metafields, and optional Liquid edits, you can create a professional, responsive sizing guide without relying on third-party apps. This keeps your store lightweight and gives you complete control over the buying experience.

For a deeper look at examples and step-by-step guidance, explore this practical resource: the size chart in Shopify. Adding this feature doesn’t just help with sizing; it strengthens trust, reduces returns, and sets your store apart.

Read More: Leveraging Modular Equipment Design in Scaling Manufacturing Operations