Size charts

Display a pop-up size chart to help customers find the right choice to purchase

With Pipeline, you can display a size chart page as a popup on any or all your product pages. Pipeline includes an option to select a Shopify Page as a size chart for all your products or use multiple Shopify Pages and customize each product to use a custom size chart page when using metafields.

If the "Form" block isn't available use the "Sizes and remaining" to select the size chart page.

Example of using one Size Chart page on all products

Single size chart for all product pages

This method allows you to instantly add any Shopify page as a size chart popup to all your product pages when using the default product template.

Click on Form to view the theme block settings and select a Shopify Page you've created for the popup size chart.

For best results, create a size chart page in your Shopify Admin which includes a wide range of sizes. Use that page as your size chart page option.

Multiple Size Charts - Custom size chart for individual products

Feature added in Pipeline 6.1

If your store has multiple size charts, Pipeline can use metafields to customize which size chart page is displayed for each of your products. For example, this is ideal when displaying a size chart for Women's products and another for Men's products. See below for how to setup.

Link placement and language support

By default, Pipeline will place the size chart link next to a variant option called Size. If Pipeline doesn't see a variant option labeled Size, the link will be placed below the quantity selector.

If your store uses a different label name or is spelled differently for various languages, you can use the Language Editor to update the value from Size to another value. This will ensure the size chart link is mapped to the variant option you prefer and appears next to that variant option:

The label "Size" can be updated in the Language Editor

Only one variant name option is supported, you cannot add multiple names in this language editor field.

How to setup custom size charts for individual products

Begin by creating as many size chart pages as needed in your Shopify Admin Page editor. If you have an image already created for your size chart, add that to the content section of the page:

Example page when using an image

Example page when using a table using the Page editor

Create a reference metafield

The next step is to define a Product metafield using Page as the Reference type:

Allows you to assign any page to your products

Connect the size chart metafield

After the size chart metafield has been created, simply choose that as your Dynamic data source in the Theme Editor:

Use the Form theme block to configure

Setup products

Your products will now have a Metafields section at the bottom. Use this to select which size chart page should be displayed when a customer is viewing this product.

Choose which size chart to display for each product in the Product setup

This allows you to choose which size chart each individual product will display in the popup.

Men's size chart associated with men's shoes only

Videos about setting up metafields

To learn more about setting up metafields, we recommend viewing our videos located on the Cart upselling:

Cart upselling

Alternate usages

Products without a size variant will display the size-chart link lower down, just above the add to cart button, and also styled as a badge. If any of your products are not using the size variant, you can repurpose this feature to be used as a badge with a link to promotional or brand information:

Badge styled link used