Everything you need to set up and customize the Size Chart block — from creating your size chart page in Shopify to displaying it in a pop-up modal on your product pages.
A size chart is a reference guide that helps your customers find the right fit by listing measurements for each available size. Size charts are especially important for clothing, footwear, and accessories — they reduce guesswork, build buyer confidence, and help cut down on returns.
In the Boardwalk theme, the Size Chart block adds a clickable link with a ruler icon to your product page. When a customer clicks the link, a pop-up modal opens displaying the contents of a Shopify page you choose. This means you can include tables, images, measuring instructions, or any other content you'd normally put on a page — and it all appears in a clean overlay without navigating away from the product.
Follow these steps to add a size chart to any product page in your Shopify store using the Boardwalk theme.
In your Shopify admin, go to
Online Store → Pages and click
Add page. Give your page a title (e.g.,
"Size Chart" or "Fit Guide") and add your sizing content
in the page editor. You can use tables, images, text, or
any combination. When you're finished, click
Save.
Note: This page is created in the Shopify admin under Online Store → Pages — not in the Theme Editor. The Size Chart block pulls content from this page and displays it inside the pop-up modal.
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize. Use the page
selector dropdown at the top center of the editor to
navigate to a product page.
In the Theme Editor sidebar, find the product content area and click Add block. Choose Size Chart from the block list. The block will appear as a text link with a ruler icon.
Click the Size Chart block in the sidebar to open its settings. Use the Page picker to select the page you created in Step 1. The page title will be used as the modal heading, and the page content will appear inside the modal body.
Important: The block will not display on your storefront until you select a page. If no page is assigned, the size chart link is hidden automatically.
By default, the link reads "Size chart." You can change this to anything you like — for example, "Fit guide," "Measurements," or "Sizing help" — by editing the Link text field in the block settings.
Click Save in the Theme Editor. Preview your product page and click the size chart link to verify that the modal opens and displays your content correctly.
These settings are available when you click the Size Chart block in the Theme Editor sidebar.
Select the Shopify page that contains your size chart or fit guide content. The page title becomes the modal heading, and the full page content is displayed inside the modal body. If no page is selected, the block will not appear on the storefront.
The text displayed on the clickable link next to the ruler icon. Change this to match your brand voice or the type of content being shown (e.g., "Fit guide," "Sizing help," or "Measurements").
The Size Chart block includes features that work automatically — no apps or custom code needed.
The size chart opens in a centered pop-up overlay on top of the product page. Customers can view sizing information without being taken to a different page, keeping them focused on the product they're shopping for.
If your size chart page has a lot of content — such as multiple tables or detailed measuring instructions — the modal body scrolls independently, so customers can browse through everything without the modal becoming too tall for the screen.
On mobile devices, the modal expands to fill nearly the full screen for easy reading. On tablets and desktops, it appears as a centered panel with a comfortable reading width that adjusts at larger screen sizes.
Tables inside the modal are automatically styled to span the full width with clean borders and readable spacing. Header cells appear bold and column text is left-aligned, so your size data is easy to scan.
The modal can be closed by pressing the Escape key or clicking the close button. When the modal opens, focus is moved to the close button. When the modal is closed, focus returns to the size chart link so keyboard users don't lose their place on the page.
A semi-transparent dark overlay appears behind the modal, dimming the rest of the page. Clicking the overlay closes the modal, giving customers an easy and intuitive way to return to the product page.
The modal slides up and fades in when opened, creating a polished transition that feels natural and keeps the browsing experience smooth.
The modal background, text, and borders automatically use your theme's color scheme settings. This means the size chart will match the look and feel of the rest of your store without any extra styling.
The Size Chart block requires some setup in the Shopify admin before it will work as expected in your theme.
The Size Chart block displays content from a Shopify page. You must create this page first in Online Store → Pages before setting up the block. Without a linked page, the block will not appear on your storefront.
If your size chart includes measurement data, use the table tool in the Shopify page editor to create your chart. Tables inside the modal are automatically formatted with full-width styling, clean borders, and readable spacing.
You can include images on your size chart page (such as measurement diagrams or fit illustrations). Images inside the modal are automatically scaled to fit the available width.
The Size Chart block is designed for use on product pages. It works best when placed inside a product content group near your variant options or product description so customers can easily check sizing before adding an item to their cart.
A well-organized size chart can make a real difference in reducing returns and helping customers feel confident about their purchase. Here are some suggestions for getting the most out of the Size Chart block.
Include both measurement systems. If you sell internationally, add columns for both inches and centimeters so all customers can easily find their size.
Add measuring instructions. A short paragraph or diagram explaining how to measure (chest, waist, hips, inseam, etc.) helps customers get accurate measurements before they compare to your chart.
Keep it specific. If different product categories have different sizing (e.g., tops vs. bottoms), consider creating separate size chart pages and using a different Size Chart block for each product template.
Use clear headers. Label your table columns clearly (e.g., "Size," "Chest (in)," "Chest (cm)") so the data is easy to scan at a glance.