Macgi
Adding a size chart in Shopify can be done in four practical ways: a simple page linked from the product, a product metafield or metaobject shown by the theme, a pop-up or collapsible row, or a dedicated size-chart app. The right choice depends on how many product types you sell, how much control you want over placement, and how often you need to update charts.
Before you build the chart, make sure the measurements are reliable. A size chart is only useful if the numbers match the garment. If you are creating your first chart from scratch, start with a flat garment measurement guide or a dress size chart template based on bust, waist, hip and length.
Then think about placement. The best size chart is visible before the shopper selects a size, usually near the size selector or “Add to cart” button. If they have to search, many shoppers will guess and move on.
Method 1: Create a size chart page and link it on the product page
This is the simplest method and works on any Shopify theme.
Step 1: Create the page
From your Shopify admin, go to Online Store > Pages > Add page. Name it “Size Guide” or “Size Chart.” Add a table using the rich text editor or switch to HTML view and insert an HTML table. For example, a simple women’s dress chart might look like this:
<table>
<thead>
<tr>
<th>Size</th>
<th>Bust</th>
<th>Waist</th>
<th>Hip</th>
<th>Length</th>
</tr>
</thead>
<tbody>
<tr>
<td>S</td>
<td>84 cm</td>
<td>66 cm</td>
<td>91 cm</td>
<td>88 cm</td>
</tr>
<tr>
<td>M</td>
<td>88 cm</td>
<td>70 cm</td>
<td>95 cm</td>
<td>90 cm</td>
</tr>
</tbody>
</table>Use clear unit labels such as “cm” or “in” and never mix them in the same chart.
Step 2: Publish the page and copy the URL
Save and publish. Then copy the page URL from the page list or the view page link.
Step 3: Link it from the product
Go to Products, open a product, and add a short text link near the top of the description. For example:
Need help with sizing? Open the size guide
Replace # with the page URL.
If your theme has a collapsible row or text block on the product page, you can add the link there instead. In the theme editor, open the product template, find the block where you want the link, and add a text or custom liquid block with the same link.
When this is enough
A single page works well when you sell one product type, such as dresses or t-shirts, and the measurements are the same across products. It also works as a quick fix while you set up a more advanced method later.
If you run a WooCommerce store, you can do the same by adding a page and linking it in the product description. Haravan and Sapo sellers can also add an HTML table to a page or directly in the product description.
Photo: Thirdman / Pexels
Method 2: Use a product metafield or metaobject for per-product charts
If different products have different measurements, or you want to update a chart once and have it appear on many products, Shopify’s built-in custom data features are more scalable.
Product metafield: one chart per product
Step 1: Create the metafield definition
In Shopify admin, go to Settings > Custom data. Depending on your Shopify version, this may be called Metafields. Choose Products > Add definition.
Give it a name like “Size chart.” For the type, choose File if you want to upload a size chart image or PDF, or Text or Rich text if you want to paste an HTML table.
Step 2: Fill in the metafield on each product
Open a product, scroll to the Metafields section at the bottom, and add the chart content for that product.
Step 3: Show it in the theme
In the theme editor, open the product template. Add a block that supports dynamic sources, such as a Collapsible row, Text, or Custom liquid. Connect the block to your “Size chart” metafield. The exact names depend on your theme, but look for the dynamic source picker icon when editing the block.
Metaobject: one chart per product type
A metaobject works better when many products share the same chart. For example, all “Women’s Dresses” use the dress chart, all “Men’s Jeans” use the jeans chart.
Step 1: Create a metaobject definition
Go to Settings > Custom data > Metaobjects > Add definition. Name it “Size chart” and add a field for the chart content, such as Rich text or File.
Step 2: Create size chart entries
Create one entry for “Dress size chart,” another for “Pants size chart,” and so on.
Step 3: Link products to the right chart
Create a product metafield with type Metaobject and choose the “Size chart” definition. Then, on each product, select the relevant size chart entry.
Step 4: Display it in the theme
In the product template, add a block connected to the linked metaobject’s content field using dynamic sources.
The big advantage of metaobjects is synchronization: change the “Dress size chart” entry once, and every linked dress product updates automatically. This avoids the common mistake of having four different versions of the same dress chart across the site.
Photo: Onur Kaya / Pexels
Method 3: Show the size chart in a pop-up or collapsible row
A pop-up or expanding row keeps the product page clean while still placing the chart one tap away.
Collapsible row
Many Shopify themes include a Collapsible row block by default. It shows a heading such as “Size guide” and expands when tapped. You can add one in the theme editor, place it below the variant picker or add to cart button, and paste the chart content inside. This is usually the safest mobile-friendly option because the content expands in the normal page flow.
Pop-up or modal
A true pop-up requires either a theme that supports modals or a small amount of custom code. If you are comfortable editing theme files, you can add a button or text link in the product section and a modal container in the same section. The button opens the modal, the close button or backdrop click closes it.
If you are not comfortable with code, a size-chart app is the easier path.
Mobile display rules
Whatever method you choose, test on a real phone:
- The chart should not overflow horizontally.
- If the chart is an image, it should scale to fit the screen width.
- The close or expand control should be easy to tap with a thumb.
- The size chart should open without leaving the product page when possible, because returning from a separate page can cause shoppers to lose their selected variant.
A common mistake is using a wide HTML table with fixed cell widths. On mobile, a 6-column table can become unreadable. If you must use a table, wrap it in a container with overflow-x: auto or reduce the columns to the most important measurements.
Method 4: Install a size-chart app
If you want more control without touching theme code, use a size-chart app from the Shopify App Store.
Step 1: Search and choose
From your Shopify admin, go to Settings > Apps and sales channels > Shopify App Store, or search for “size chart” in the app store. Look for an app that lets you:
- Create multiple charts.
- Assign charts by product type, tag, collection, or vendor.
- Display the chart as a link, popup, or collapsible row.
- Show the chart on mobile correctly.
- Edit charts in one place without changing each product.
Step 2: Install and set up
Install the app, create your first size chart, then set the display position. Most apps provide a settings page where you can choose “product page” and a position such as “below variants” or “next to Add to cart.”
Step 3: Assign charts
Assign the chart to specific products or collections. If you have separate dress, top, and pants charts, create conditions such as “Product type = Dress” so the right chart appears automatically.
A note on other platforms
WooCommerce has size-chart plugins that work similarly. Haravan and Sapo shops can often use an app from their own app marketplaces or add an HTML table directly in the product description. Check the current app pricing and features before committing, as plans and fees change.
Make size charts easy to maintain and keep them in sync
The most practical size chart system is not the fanciest one; it is the one you update everywhere at the same time.
Use one master chart per product type
Avoid creating a unique chart for every product unless the measurements really change. Instead, create one chart per product type: dresses, tops, bottoms, skirts, kids, and so on. This makes updates manageable and keeps the customer experience consistent.
Keep a master source
Store the approved numbers in a Google Sheet or internal document. When you change a factory measurement, update the master sheet first, then copy the change into Shopify.
If you use a metaobject, update the metaobject entry. If you use an app, update the app template. If you use a page, update the page HTML. If you use product metafields, use the bulk editor or CSV import to update many products at once. Shopify’s bulk editor lets you edit metafields across multiple selected products.
Avoid conflicting numbers
Inconsistent charts cause returns. For example, if the dress chart says size M bust is 88 cm but the product description says 90 cm, the shopper cannot know which one is correct. Set a rule: product description, photos, and size chart must match. Do a quick audit on your bestsellers once a month.
Use clear labels and instructions
A chart alone is not enough. Add one short line before the chart:
“Measure the garment flat and compare with a similar item you own” or “Measure your body and check the bust, waist and hip columns.”
Good wording tells the shopper how to use the chart. Bad wording just says “Size guide” with no context.
If your chart uses body measurements, say so. If it uses garment measurements, say that. Mixing the two is a common mistake and leads to the wrong size choice.
A practical next step
Even with a clear size chart, some shoppers still struggle to imagine how the item will look on their own body. For those shoppers, visual confidence matters more than numbers. A virtual try-on button next to “Add to cart” can let them upload a full-body photo and see themselves wearing the product before deciding. If you want to add that layer without rebuilding your product pages, try Macgi’s widget in the free beta.
FAQ
Can I use one size chart for all products?
Yes, if all products share the same measurements. For most clothing shops, it is better to create one chart per product type, such as dresses, tops, and pants, because the fit varies.
Do I need to put the size chart in a pop-up?
No. A collapsible row, a separate page linked from the product, or a visible table in the product description can all work. A pop-up is useful when you want to keep the page clean, but it should be easy to open and close on mobile.
How do I add a size chart to a specific product without an app?
Create a product metafield for the size chart content, fill it in for that product, and add a theme block connected to the metafield. Or add the chart directly into the product description as an HTML table.
What if my theme cannot show a metafield?
You can still use a size-chart app, or add the chart as an image or HTML table in the product description. You can also add a size guide page and link to it from the description.
How often should I update size charts?
Update them whenever you change supplier, re-measure a garment, or notice that a particular style runs small or large. A monthly audit of your bestsellers can catch mismatched numbers early.
