How to Create a Size Chart

How to Create a Size Chart

What is G: Size Chart & Size Guide?

G: Size Chart & Size Guide is a Shopify app that lets merchants create and display size charts directly on product pages — so shoppers can find their correct size before adding to cart, without needing to contact the store for advice.

G: Size Chart and Size Guide

It's designed for any store where sizing matters:

  1. Fashion (tops, bottoms, dresses, underwear, swimsuits, dresses, skirts, blazers, etc)
  2. Footwear (EU, US, UK, cm sizing)
  3. Pet accessories (clothing, harness, collars, leashes)
  4. Jewellery (necklace, bracelet, rings)
  5. and more. 
Problem
Impact
Shoppers don't know their size → hesitate to buy
High cart abandonment, lost revenue
Shoppers pick the wrong size → returns & exchanges
Extra logistics costs and customer service load
Merchants lack a sizing tool → explain sizes manually
High CS ticket volume, slow resolution times

Step-by-step to Create a Size Chart

1. Choose a Creation Method

From the Size Charts page, click + Create size chart. You'll be prompted to choose how you want to build your chart:



 📄 From a Template

✏️ Blank (From Scratch)

Pick a pre-built template for your product category (Men's, Women's, Kids', Jewelry, Footwear, Pet Accessories). Includes a sample size table, measurement guide image, and how-to-measure instructions, ready to customize.

Start with an empty canvas and add your own content blocks manually. Best if you have unique sizing data or a specific layout in mind.


Using a Template
  1. Select a product type (e.g., Men's Fashion), then choose a sub-template (e.g., Men's Tops, Men's Bottoms).
  2. Preview the template to see the included table, measurement image, and tips.
  3. Click Use this template to open the editor with pre-filled content.

Info
Note: Template & Blank mode share the same setting pattern. The content is fully editable; you can change the size data, swap the image, or rewrite the text to match your brand.

2. Build Your Size Chart Content

The editor has two panels: Size chart editor (left) and Preview (right). All changes appear in the preview in real time.
For the editor, there are two tabs that you will mainly work on:
  1. Content tab is used to edit the content of the size chart.
  2. Settings tab is used to configure the display conditions for the size chart button and size chart popup.

3. Configure Size Chart Content

Popup Tabs
Your size chart is organised into tabs displayed inside the popup. By default you'll have one tab named Size Chart.
  1. Click + Add tab to add more tabs (e.g., Measurement Guide, Brand Size Chart).
  2. Rename a tab: Click directly on the tab name in the left panel to edit it.
  3. Each tab holds its own set of content blocks.

Content Blocks
Inside each tab, you can add three types of blocks using the buttons at the bottom of the panel:

Block
Use for
Actions
Text
Descriptions, instructions, fit tips, headings
✏️ Edit   🗑️ Remove
Table
Size data (chest, waist, hips, etc.)
✏️ Edit   🗑️ Remove
Image
Measurement diagrams, branded size charts
✏️ Edit   🗑️ Remove

Click the ✏️ pen icon to edit a block, or the 🗑️ trash icon to delete it. Drag the ⠿ handle on the left to reorder blocks.

*We currently offer the three block types, with more coming in future updates. If you need a specific block type, feel free to submit a request via in-app chat.

Text Block Options
  1. Full rich-text editor with formatting toolbar: Bold, Italic, Underline, Strikethrough, alignment, lists, and code.
  2. Heading styles: Normal text, Heading 1 through Heading 6; click the T▾ dropdown to change.
  3. Colours control via the A▾ dropdown.

Image Block Options
  1. Alignment: Left, Centre, or Right.
  2. Width: Drag the slider to set image width (up to 100% of the popup).
  3. Rounded corners: Adjust corner radius in pixels.

Table Block Options
Click the ✏️ pen icon on a Table block to access the table editor:

Editing cells
  1. Click any cell to type directly. Click the ⋯ menu above a column or the ⋮ menu beside a row to add/delete rows or columns.
  2. Click a column or row header to rename it.
  3. Click + at the bottom or right edge of the table to add new rows/columns.

Import size data
  1. Click ↑ Import in the table editor to open the Import Table dialogue.
  2. Upload a CSV file or an image of an existing size chart.
  3. If you upload an image, click Analyze & Extract Table with AI, the app will read the table from the image and populate the cells automatically.
  4. Download the sample CSV for the correct format.

Country Size Column
  1. Check Enable Country Size Column to add a country-specific size column (e.g., US, UK, EU sizes).
  2. Search for and select a country in the search field. Shoppers visiting from that country will see their local size labels alongside your base sizes.
  3. The table content is fully customizable; click directly on any text you want to edit, including the Country Size Column.


Unit Conversion
  1. Check Enable under Convert Unit to let customers switch between measurement units.
  2. Set the Base Unit (the unit your table data is in, e.g., Inch) and the Converted Unit (e.g., Centimeter).
  3. To exclude a specific column or row from conversion (e.g., a "Size" label column), add an asterisk * after its title.

  1. Use fraction (optional): Display converted values as fractions. Choose the fraction step: 1/2, 1/3, 1/4, 1/6, 1/8, 1/12, 1/16, or 1/32.

Info
Tip: If you're selling in multiple markets, using the Country Size Column and Unit Conversion together gives customers the clearest sizing experience in their local standard.

3. Configure Size Chart Settings

Click the Settings tab at the top of the left panel to configure targeting and behaviour for this size chart.

Overview
  1. Size Chart Name: Internal name visible only to you (not shown to shoppers).
  2. Priority: When multiple size charts match the same product, the one with the higher number wins. Use this to control which chart takes precedence.
  3. Status: Set to Active to display the chart on your store, or Draft to hide it.

Targeting 
Apply to Products
Choose which products this size chart appears on:

Option
Description
All Products
The size chart shows on every product page in your store
Specific Product
Search and select individual products targeted
Custom Segment
Define targeting rules using one or more conditions (see below). Use the 🗑️ trash icon to remove a rule, or +Add rule to combine multiple conditions. 


Custom Segment Rules
When using Custom Segment, click + Add rule to filter products by:
  1. Product by tag — match products with specific tags
  2. Products by type — match by product type
  3. Products by vendor — match by brand or vendor name
  4. Products by collection — match products in specific collections

You can add multiple rules. All conditions are applied together (AND logic). Click the 🗑️ trash icon to remove any rule.

Target by Countries
  1. All Countries: The size chart is shown to all visitors regardless of location.
  2. Specific Countries: The chart is shown only to visitors from selected countries. Choose whether the condition IS (show to) or IS NOT (hide from) the selected countries, then search and select countries.

4. Set Display Position

*By default, you can configure the position of the size chart button and the pop-up in the Style Config page. If you'd like to use a custom position for this specific size chart, enable Custom Position. The settings configured here will override the global settings defined in the Style Config page.

Scroll down in the Settings tab to the Position section. Check Custom Position to override the default position set in Style Config for this specific size chart.

Type
What it does
Inline
A size chart link ot button placed inline within the product page content (near the add to cart button ot variant selector).
Floating
A persistent tab/button that floats on the edge of the browser window, always visible as the shopper scrolls.
Both

Show both an inline button and a floating tab simultaneously. 

Floating Button Settings
  1. Vertical Alignment: Top, Middle, or Bottom — where on the side of the screen the tab sits.
  2. Horizontal Alignment: Left or Right — which side of the screen.

Inline Button Settings
  1. 2 Mode:
    1. 1) Predefined: automatically places the button at a common location based on your theme, including Above Variant Picker, Below Variant Picker, Above Add to Cart, and In Size Option Label.

    1. 2) Manual CSS Selector: specify exactly where to insert the button using a CSS selector (advanced).
      1. Position: Below, Above, or Inside the selected element.
      2. Selector: The CSS selector of the target element (e.g., form[action*="/cart/add"] button[name="add"]). Click Reselect to re-pick the element. If you need help, use the Contact us link and the team will set it up for you.

Popup Display Style
Choose how the size chart popup opens when clicked:

Style
Description
Center
Classic centre modal overlay.
Full Width
Popup spans the full width of the screen.
Right Drawer
Slides in from the right side.
Left Drawer
Slides in from the left side. 


5. Save Your Size Chart

  1. Review your content in the Preview panel. Switch between desktop and mobile preview using the icons in the top-right of the preview area.
  2. When you're satisfied, click Save in the top-right corner of the screen.
  3. Your size chart will now appear on your store for the targeted products and countries, in the position you've configured.

Idea
Tip: Make sure App Embed is enabled in your theme settings (the dashboard will show a green ON badge if it is). Without App Embed enabled, size charts won't display automatically on your product pages.
Notes
Note: If you created a size chart from Blank, the workflow is identical; you just start with empty blocks instead of pre-filled template content. Add Text, Table, and Image blocks manually and fill in your own sizing data.