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

# Size charts

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.&#x20;

{% hint style="info" %}
If the "Form" block isn't available use the "Sizes and remaining" to select the size chart page.
{% endhint %}

![Example of using one Size Chart page on all products](https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LovEU3LvzkJzFkXarYD%2F-MjBBLTzJpUbIx3cB21g%2F-MjBCrwnwO2Y2KyYdrbu%2FSep-09-2021%2013-19-27.gif?alt=media\&token=1c0e1b24-373e-42ca-b7d5-b3e1946101e9)

### 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.&#x20;

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

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.&#x20;

### 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.&#x20;

### 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.&#x20;

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](https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LovEU3LvzkJzFkXarYD%2F-MkNlw3DUUCeYiygY_o_%2F-MkNnATAYwfSDUnwpa3s%2Fsize-chart-language.jpg?alt=media\&token=146d711d-1683-4be8-a732-b751d5afc1d1)

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

## 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](https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LovEU3LvzkJzFkXarYD%2F-MjBTVRLZMZmquh4kVly%2F-MjBXenTRGJfNGMuWUrw%2FScreen%20Shot%202021-09-09%20at%202.48.29%20PM.png?alt=media\&token=13ddcbf7-5c94-4b39-a7c2-c34a429e189f)

![Example page when using a table using the Page editor](https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LovEU3LvzkJzFkXarYD%2F-MjBDxShH6vwPEYxdQhZ%2F-MjBJMSAgTxqDS_TqbON%2FScreen%2520Shot%25202021-08-25%2520at%25205.25.22%2520PM.png?alt=media\&token=e400331b-8908-431f-a8da-b646aa7c1aa3)

### 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](https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LovEU3LvzkJzFkXarYD%2F-MjBDxShH6vwPEYxdQhZ%2F-MjBKAgNdUzI9XI6riE3%2FScreen%2520Shot%25202021-08-25%2520at%25207.10.48%2520PM.png?alt=media\&token=6d5a8879-b81e-4fb1-b635-0ef4534c4826)

### 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](https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LovEU3LvzkJzFkXarYD%2F-MjBMEMfXtZT7zIoX6V_%2F-MjBNcqEJxvwTJfd6jC8%2FSep-09-2021%2014-06-23.gif?alt=media\&token=7144f8ee-8c6d-41b3-9362-b1137b7f173d)

### 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.&#x20;

![Choose which size chart to display for each product in the Product setup](https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LovEU3LvzkJzFkXarYD%2F-MjBMEMfXtZT7zIoX6V_%2F-MjBQNxCwPKGsxXl2C2I%2FScreen%20Shot%202021-09-09%20at%202.18.17%20PM.png?alt=media\&token=9fa823e2-69d1-49f8-b815-64f6efc7b9dd)

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

![Men's size chart associated with men's shoes only](https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LovEU3LvzkJzFkXarYD%2F-MjBTVRLZMZmquh4kVly%2F-MjBXO24sYRvpkSnNK1O%2FSep-09-2021%2014-46-48.gif?alt=media\&token=103e4b39-037b-4d7d-977d-af92cffe89a6)

### Videos about setting up metafields

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

{% content-ref url="../../upsell/upselling/cart" %}
[cart](../../upsell/upselling/cart)
{% endcontent-ref %}



## Alternate usages&#x20;

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](https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LovEU3LvzkJzFkXarYD%2F-MeWzXYI1MZNTXKckolL%2F-MeXLQyVUWgkvEEuiwyh%2Falternate.gif?alt=media\&token=32d464af-d1c9-4c79-be66-1aae3853690a)

##
