Beyond Size Chart
Create clean Shopify size guides from supplier charts.
Use manual tables, images, supplier HTML, and Google Sheets image URLs to create responsive size chart popups for Shopify product pages.
Quick start
Get your first size chart live
Follow these steps to create, assign, and display a size guide on your product page.
Create a size chart
Go to Create and choose image upload, HTML import, or manual table creation.
Review and edit the table
Check every extracted cell, rename columns, choose the unit, and save the chart as draft or active.
Assign it to a product
Assign the chart to one or more Shopify products so the correct guide appears on the storefront.
Add the app block
Open the Shopify theme editor and add the Beyond Size Chart app block to your product template.
Create
Create charts from images, HTML, or manual data
Beyond Size Chart supports multiple ways to create product size guides.
Upload image
Upload a supplier screenshot or size chart image. The app reads the chart and creates an editable table for review.
Paste HTML
Paste supplier HTML table code and turn it into a clean Shopify-ready size chart.
Create manually
Start with a simple editable table and add your own rows, columns, sizes, and measurements.
Capabilities
What the app can do
Beyond Size Chart covers the full workflow from chart creation to storefront display and product assignment.
Manual chart builder
Create tables from scratch, add or remove rows and columns, edit every cell, choose units, and save as draft or active.
Image-to-chart extraction
Upload supported image files and extract readable size chart data into an editable table before publishing.
HTML-to-chart extraction
Paste supplier HTML tables and clean them into editable size guides without rebuilding the structure manually.
Google Sheets workflow
Connect Google, choose a spreadsheet, map columns, read direct image URLs or =IMAGE("url") formulas, and review imported rows.
Product matching
Match supplier rows to Shopify products using SKU, title, handle, or product URL, then review match confidence before assigning.
Storefront popup
Display assigned charts through a responsive product page popup with mobile table scrolling and optional cm/inch toggle.
Design presets
Use Minimal Modal, Split Layout Guide, or Bottom Sheet styles, then adjust colors, fonts, radius, notes, icons, and table appearance.
Find your size quiz
Offer a no-measurement fit quiz that starts from the shopper’s usual size and uses product sizes plus fit preferences.
Review-safe importing
Rows with missing images, unreadable files, or in-cell images without retrievable URLs are marked for review instead of blocking the full import.
Integration
Import size charts from Google Sheets
Connect Google Sheets, select a supplier spreadsheet, map columns, and create assigned size charts in bulk.
Connect your Google account
Grant access to your spreadsheets, then select the supplier file you want to scan.
Review before publishing
Imported charts are reviewed first so incorrect supplier data does not go live automatically.
| Column | Recommended content | Required |
|---|---|---|
| SKU | Product SKU or supplier SKU used to match Shopify variants. | Recommended |
| Title | Product title used as a security check when matching products. | Optional |
| Product URL / Handle | Shopify product URL or handle for stronger product matching. | Optional |
| Size chart | Direct image URL or =IMAGE("url") formula. |
Required for import |
Supported image sources
Direct PNG, JPEG, GIF, and WebP image URLs are supported. =IMAGE("url") formulas are supported when the URL is retrievable.
Manual review fallback
Inserted in-cell images that do not expose a file URL can be kept in the import review flow so merchants can upload the image manually.
Appearance
Customize the storefront popup
Control the look and feel of your size guide button, popup, table, notes, icons, fonts, and quiz.
Layout presets
Choose between Minimal Modal, Split Layout Guide, and Bottom Sheet popup styles.
Fonts and colors
Select a font, accent color, button style, popup surface, and modal radius.
Icons and notes
Add optional icons, measurement guidance, and tinted customer notes below your chart.
Find your size
Add an optional fit quiz
Help shoppers choose a size with a simple quiz that uses product sizes and general fit questions.
Quiz options
Show the quiz button inside the size chart, show the quiz once after the size chart button is clicked, or use both options.
Recommended size
The quiz starts with the shopper’s usual size and adjusts based on fit preference, body shape, and size habits.
| Step | Question | Answer type |
|---|---|---|
| 1 | What size do you usually wear? | Product sizes or fallback sizes |
| 2 | Do you always wear this size? | Smaller / Yes / Larger |
| 3 | What do you think is most like you? | Slim / Average / Curvy |
| 4 | How tall are you? | Height slider |
| 5 | How would you describe your chest? | Slim / Average / Broad |
| 6 | What fit would you prefer? | Slim / Regular / Loose |
Assignments
Control which chart appears on each product
Assign charts manually or from import results so each product page displays the correct size guide.
Manual assignments
Open a chart, select products, and save the assignment. One chart can be reused across multiple products when the sizing is the same.
Import assignments
Google Sheets rows can keep their matched product target during review, so approved charts can be assigned faster.
Theme setup
Add the size guide to your product page
Use the Shopify theme editor to place the Beyond Size Chart app block on your product page template.
Open the Shopify theme editor
Go to your current theme and open the product page template.
Add the app block
Add the Beyond Size Chart app block where you want the size guide link to appear.
Save and preview
Save your theme and preview a product with an assigned active size chart.
For manual placement, you can add a snippet to your product template:
{% if product.metafields.beyond_size_chart.active_chart %}
<a href="#" class="bsc-size-guide-link">Size guide</a>
{% endif %}
Troubleshooting
Common issues
Use these checks if the size guide does not appear or an import does not work as expected.
| Issue | Likely cause | Fix |
|---|---|---|
| Size guide does not show | No active chart assigned or app block missing. | Assign an active chart and add the app block to the product template. |
| Wrong chart appears | The product has an incorrect or outdated assignment. | Open Charts, edit the assignment, and save again. |
| Google Sheet row skipped | No matching product or no readable size chart image URL. | Check SKU/title mapping and use a direct image URL or =IMAGE("url"). |
| Quiz does not select size | The theme’s variant selector may not expose a standard size input. | Use the recommendation result and let the shopper select the size manually. |
FAQ
Frequently asked questions
Can I create a chart without AI?
Yes. You can create size charts manually or paste HTML tables without using image extraction.
Can one chart be assigned to multiple products?
Yes. You can assign a chart to one or multiple products depending on your setup.
Will the popup work on mobile?
Yes. The popup is responsive and tables can scroll horizontally on smaller screens when needed.
Does the Google Sheets import publish charts automatically?
For safety, imported charts should be reviewed first and can be saved as drafts before being activated.
What happens if the supplier image cannot be read?
The row is marked for review or skipped. One failed row will not stop the full import.