size chart in Shopify

June 26, 2025

How to Easily Add a Size Chart in Shopify

Learn how to add a size chart in Shopify using built-in tools, apps, and templates to reduce returns and help customers find the right fit.

A customer finds a product they love. The images are convincing, the reviews are solid, and the price is right. But the one thing holding them back? Uncertainty about the size.

It’s a hesitation that costs stores more than just a sale. According to a study, 55% of customers cited size as the number one reason shoppers returned a product. That single gap in clarity leads to more refunds, lower customer satisfaction, and lost repeat business.

For Shopify merchants, the solution is simple but often overlooked: an accurate, accessible size chart that’s tailored to your products and easy to find. Whether you sell apparel, footwear, or accessories, giving shoppers the confidence to choose the right fit can reduce returns and increase conversions.

This guide explains step-by-step instructions on how to add a size chart in Shopify using built-in tools, apps, or code.

What Is a Size Chart in Shopify?

A size chart in Shopify is a product-specific guide that helps customers choose the right fit. It usually includes measurements, fit notes, or visual guides, and appears on the product page as a pop-up, tab, image, or embedded table.

These charts are most common in apparel, footwear, lingerie, and accessories, but they’re equally important for any product where sizing or fit affects buying decisions.

Example:

Source

This live example shows a typical size chart popup from a Shopify product page. It combines a body measurement diagram with detailed tables for chest, waist, hip, and inseam displayed in both inches and centimeters. Clear formatting like this helps customers understand where to measure and which size to select.

Before you add one to your store, it’s worth taking a moment to decide what kind of chart your customers actually need and how you’ll organize it across different products or collections.

Preparing to Add a Size Chart in Shopify

Before you dive into adding a size chart, a little prep goes a long way, especially if your store carries multiple product types or sizing systems. Here’s what to get ready:

1. Decide on a Size Chart Structure

Will one chart cover your entire store, or do you need different ones by product type (e.g., shirts vs. shoes) or vendor? Planning this upfront helps avoid rework later.

2. Collect the Right Measurements

Include all relevant dimensions, such as chest, waist, hip, inseam, and sleeve length for clothing or foot length and width for shoes. If you sell internationally, use both inches and centimeters.

3. Add Fit Notes or Model References

To reduce uncertainty, include tips like “Fits true to size” or “Model is 5'9" and wears size M.” These give shoppers helpful context beyond the numbers.

4. Choose a Format

Decide whether your chart will be:

A simple HTML table
A visual image with labels
A dynamic pop-up via the app
A tabbed section or embedded block

5. Plan Where It Will Appear

The most effective size charts are easy to find. Common placements include:

Beside or below the size dropdown
Inside a product tab (e.g., “Size Guide”)
As a pop-up triggered by a link

Having all of this ready ensures that whichever method you choose, you can set it up quickly and correctly.

Once you’ve gathered your sizing information and decided on your chart structure, the next step is to choose how you’ll add it to your Shopify store, using built-in features, apps, or custom setup options.

How to Add a Size Chart in Shopify

Shopify gives you multiple ways to add a size chart, whether you prefer to work with built-in tools, install an app, or customize your theme code. Here’s how each method works and when to use it.

1. Use Shopify’s Inbuilt Features (Create a Size Chart Page)

For stores with a single sizing standard or a smaller catalog, Shopify’s built-in page editor is the simplest way to add a size chart—no apps or code required.

Steps:

From your Shopify admin, go to Online Store → Pages → Add Page.
Name your page “Size Chart” or “Size Guide.”
Add your chart using one of two formats:
- Insert a Table: A text-based table helps display clear measurement breakdowns and may improve visibility on search engines like Google.
- Upload an Image: A visual chart can be easier to scan and more engaging, which is ideal for branded designs or model references.
Click Save when you’re done.

Once your size chart page is ready, you can link it directly within each product description, or dynamically display it using metafields or blocks if your theme supports it.

This method is best for merchants who want a single, reusable chart that’s easy to manage across multiple products.

2. Use a Shopify App to Automate and Customize Your Size Chart

If your store has multiple product types and varying size systems or if you want more control over how your chart appears, using a Shopify app is the most efficient route.

You can install and configure most size chart apps directly from your Shopify admin. Many offer drag-and-drop editors, so you can customize the chart’s layout, colors, and fonts without touching code.

Common features offered by size chart apps:

Assign different charts to products, collections, or vendors
Display the chart as a popup, tab, or inline section
Support for both table and image formats
Automatic updates if product data or dimensions change
Multimedia support, including how-to videos showing measurement tips

This approach works best for merchants who want to scale efficiently and offer a tailored sizing experience.

Use Custom Code or Liquid Templates for Full Control

If your store needs a highly tailored setup or your theme doesn’t support app blocks, Shopify’s Liquid code gives you full control over how and where your size chart appears. This method is flexible but works best if you’re comfortable editing theme files or working with a developer.

When to Use This Method:

You need different charts for different product types or vendors.
You want to embed a reusable size chart section across all product pages.
You need layout customizations, or logic apps can’t handle it.
Your store is built on a custom theme with limited app compatibility.

How It Works (Overview):

Create a custom section in your theme (e.g., name it size-chart.liquid).
Use conditional logic like:

{% if product.type == 'Shirts' %}
{% section 'size-chart-shirts' %}
{% endif %}

Insert your table, image, or custom layout inside the section file.
Open your product template file (e.g., main-product.liquid) and include your logic.
Save changes and test across products to confirm display behavior.

This method is powerful, but best used if you have access to a developer or theme support. Any changes or updates will require editing your theme files, so it’s not ideal for stores that frequently change sizing rules or layouts.

After you’ve created your size chart using the method that fits your store, the final step is deciding where and how it should appear on your product pages to maximize visibility and usability.

Integrating the Size Chart on Product Pages

After creating your size chart, it’s important to integrate it on the product page next to the size selection, where your customers need it most.

Here are the most effective ways to display your chart, starting with the most current and widely supported method:

1. Add Size Chart to Product Page Template (Using Shopify Theme Editor)

If you're using the Dawn theme or any Online Store 2.0-compatible theme, Shopify’s built-in theme editor makes it easy to add a size chart—no code or apps needed.

Steps:

Go to Online Store → Themes → Customize.
In the left panel, select Products → Default product.
Under Product Information, click Add block and choose:

Option A: Collapsible Row

Add a Collapsible row, and drag it below the buy buttons.
Set the heading to “Size Chart.”
Set Row content from a page or connect a metafield.

Option B: Pop-up Block

Add a Pop-up block instead.
Set the heading (e.g., “View Size Guide”) and link it to the Size Chart page.

This is the most recommended method for stores using Shopify’s latest themes.

Example: Fashion Nova’s Popup Size Chart

Fashion Nova uses a clean pop-up overlay that appears when shoppers click “Size Guide” near the size selector. It includes toggles for inches or centimeters, detailed body measurements, and a clear layout optimized for mobile and desktop.

Source

2. Display via Metafields for Dynamic Charts

If your catalog includes products with different sizing systems, use Shopify’s product metafields to assign a unique size chart to each product dynamically.

How it works:

Go to Settings → Custom Data → Products and add a new metafield (e.g., “Size Chart Page”).
Enter the page URL or chart content per product.
In the theme editor, connect that metafield to a collapsible row or a popup block.

Metafields let you manage size chart content centrally, without editing each product manually.

3. Add a Size Chart Popup (Using an App)

Apps are a great option if you want:

Automated chart assignments
Responsive popups
Advanced display logic
Style customizations beyond theme limits

Most size chart apps offer pop-up blocks or widgets that appear near the size selector. They work well for larger catalogs or international stores needing complex sizing rules.

4. Link to a Dedicated Size Chart Page

You can link to a standalone size guide page in the product description for simple setups.

Example:
“View our Size Chart to find your perfect fit.”

This method is easy to set up but less dynamic. To scale it, use meta fields to assign and display the right link per product.

Once your size chart is visible on the product page, the next priority is making sure it’s useful. The following best practices will help ensure your chart is clear, accurate, and easy for customers to act on.

Best Practices for an Effective Size Chart

A size chart only works if customers actually use it and trust what it tells them. Whether you're using a table, image, or app, these best practices will help your chart reduce returns and improve conversions.

Use Clear, Specific Measurements

Avoid vague labels like “Small / Medium / Large” without context.
Include exact dimensions for each size, e.g., Chest: 38" / 96.5 cm.
Provide both inches and centimeters to support international buyers.

Match the Chart to the Product Type

Don’t use a one-size-fits-all chart across clothing, shoes, and accessories.
Create different charts for shirts, pants, outerwear, etc., based on fit and shape.
Use metafields or tags to show the right chart on each product page dynamically.

Include Fit Notes and Model References

Add context like “Fits true to size” or “Slim fit – size up for a relaxed fit.”
If possible, mention model stats (e.g., “Model is 5’9” wearing size M”) to help with sizing decisions.

Make It Mobile-Friendly

Avoid wide tables that require horizontal scrolling.
Use stacked layouts, collapsible rows, or pop-up modals for better mobile access.

Keep It Visible

Place your size chart near the size selector or add-to-cart button.
Use popups or collapsible blocks, not links buried in the product description.

Use Visuals Where Helpful

Include diagrams or illustrations to show where and how to measure.
Visual aids reduce guesswork and build buyer confidence, especially for technical or custom-fit items.

Add Size Charts with Variant Descriptions King

If you want to display size charts directly on your Shopify product pages, in tabs, accordions, or custom sections, Variant Descriptions King is built for the job.

This app lets you show unique size chart content by variant, organize it neatly in collapsible sections, and reduce customer confusion without writing a single line of code. It works with all modern Shopify themes and integrates directly into your product layout.

Install Variant Descriptions King and make sure every shopper sees the size details they need to buy with confidence.

FAQs

1. How do I add a size chart in Shopify without using code?

You can add a size chart using Shopify’s theme editor. Use a collapsible row or a popup block on the product page and link it to a size chart page or metafield.

2. Can I show different size charts for different products in Shopify?

Yes, by using product metafields or a size chart app, you can assign unique charts to each product or product type dynamically.

3. What’s the best way for mobile users to place a size chart in Shopify?

Use a pop-up or collapsible section placed directly below the size selector. These formats are mobile-friendly and reduce page clutter.

4. Are there Shopify apps that help manage size charts?

Yes, apps like Variant Descriptions King let you add size charts in product tabs or accordions, with variant-level control and theme compatibility.

5. Should I use a table or an image for my Shopify size chart?

Both work tables are easier to index for SEO, while images provide clearer visuals. For best results, use a table with visual guides or combine both.