# Unique size charts

Story can display a custom pop-up size chart for individual products and also not display a link if a size chart is not required. This is the most flexible option when using multiple charts.

![](https://3236268666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJFe8gZiFPB3ohxgaTmnx%2Fuploads%2FhAJqmF2W4jRQwrQ3YAus%2FKapture%202021-12-31%20at%2008.07.15B.gif?alt=media\&token=09b0df17-242e-43d5-90d8-3c0834d4840b)

![Size chart link for Women (click image to zoom)](https://3236268666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJFe8gZiFPB3ohxgaTmnx%2Fuploads%2F8nyheXxoq82sYQwlmszR%2FScreen%20Shot%202021-12-31%20at%207.57.17%20AM.png?alt=media\&token=5f054382-a0f2-478c-9e14-b34026bf8c61) ![Size chart link for Men (click image to zoom)](https://3236268666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJFe8gZiFPB3ohxgaTmnx%2Fuploads%2FRM8l3VKEzjRA2WD5McuA%2FScreen%20Shot%202021-12-31%20at%207.57.08%20AM.png?alt=media\&token=9f3ade5a-f859-4074-a47f-4289fe67a392)

{% hint style="success" %}
Each product can have a different size chart associated with the Shopify Product admin
{% endhint %}

### How to setup

Begin by creating a basic product metafield in your Shopify Settings:

Start in your Shopify Admin -> Settings and choose Metafields from the left panel and then click on **Products** (click images to zoom):

![Create new Product metafield](https://3236268666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJFe8gZiFPB3ohxgaTmnx%2Fuploads%2Frzr7sSUrMqnfFcAPiQmV%2FScreen%20Shot%202021-11-19%20at%207.04.54%20PM%20\(1\).png?alt=media\&token=ded139b8-e606-4af6-9467-7df5631a4956) ![Choose Add definition](https://3236268666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJFe8gZiFPB3ohxgaTmnx%2Fuploads%2FP75rdzL7FZqqdyMgnPmS%2FScreen%20Shot%202021-11-19%20at%207.26.03%20PM%20\(1\).png?alt=media\&token=4279b446-4060-4c41-ae38-1ed389fc302f)

* Provide a **Name** for your metafield. In our example, we'll use **Size Chart**. 
* The default Namespace and key can be used. No modifications are needed. 
* Choose **Reference**, **Page** for the Content type.

![](https://3236268666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJFe8gZiFPB3ohxgaTmnx%2Fuploads%2Fek6w65cXkXJDZq54UI7E%2FScreen%20Shot%202021-12-31%20at%208.17.42%20AM.png?alt=media\&token=f2bbaaf8-7a48-43cf-8503-7e0bf9af46d3)

**Save** the metafield definition.

### Product setup

{% hint style="success" %}
Now that we've created a product reference metafield, we can **easily** choose custom size charts for any of our products that require a size chart displayed.
{% endhint %}

The next step is performed in the Shopify Admin -> Products. Choose a product and scroll to the bottom where you'll find all the metafields. There will be a new Size Chart option where we can choose a unique Page created in the Shopify Pages editor:

![](https://3236268666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJFe8gZiFPB3ohxgaTmnx%2Fuploads%2FubuimXZcJaufN5BTVuAm%2FKapture%202021-12-31%20at%2008.22.42.gif?alt=media\&token=cf96ad22-da30-4bbe-a02c-176fb75ffaaa)

{% hint style="success" %}
Choose a unique size chart page for each product. For example, all Women's watches can use one file and all Men's watches can use another. For products that don't require a size chart, leave blank and no link will appear. 
{% endhint %}

### Theme editor setup

The final step is to configure the Product page settings in Story, using the Theme editor. Click on **Form** under Product page:

![](https://3236268666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJFe8gZiFPB3ohxgaTmnx%2Fuploads%2FX2eQEAbWZe25F0EDgoMA%2FScreen%20Shot%202021-12-31%20at%208.30.43%20AM.png?alt=media\&token=da1f1cb7-53ba-4c06-8d04-48c008250257)

> **Tip**: If you've already assigned a static size chart page for all products, Form won't appear, the title of the size chart file will be displayed. Simply click on that instead.

Next,\
Click on the **Connect dynamic source** icon:

![](https://3236268666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJFe8gZiFPB3ohxgaTmnx%2Fuploads%2FBjSFWhClFwmg2WHIdwZQ%2FScreen%20Shot%202021-12-31%20at%208.33.15%20AM.png?alt=media\&token=b6e7c5a0-19a3-4b02-8b03-dc1cfcdd4da9)

Choose the metafield you created earlier, Size Chart:

![](https://3236268666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJFe8gZiFPB3ohxgaTmnx%2Fuploads%2FrzWaNtoE4VpN0m1vOMbv%2FKapture%202021-12-31%20at%2008.36.21C.gif?alt=media\&token=e3bf68ed-4b3f-4df7-9ac8-2077b94c8b37)

Press the **Connect** button at the bottom to complete and then **Save** your changes. 

{% hint style="success" %}
Products that have a Size Chart file associated with a Size Chart metafield in the product setup will now have a unique and custom link based on the title of the Page. You can update the Page title to modify the link label.
{% endhint %}