> For the complete documentation index, see [llms.txt](https://story.groupthought.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://story.groupthought.com/products/product-pages/unique-size-charts.md).

# 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.

![](/files/n80rz0zWjwQA7nIgAfqY)

![Size chart link for Women (click image to zoom)](/files/yILYxXYbwpfzGbDIgFjJ) ![Size chart link for Men (click image to zoom)](/files/hyBKYb3ASYQiIDKKCJsE)

{% 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](/files/9eYZ4UmTQwvrwaAFzvp8) ![Choose Add definition](/files/zDUnbkrm2OX78aXvNO5Z)

* 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.

![](/files/O6E8Qn03UZk0X4WqjOb7)

**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:

![](/files/89WjEER2IiaLqCHyCBnX)

{% 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:

![](/files/Xmt4miVo54SeldMDoM9P)

> **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:

![](/files/x9Ko8BRHteCHV4RLEQOx)

Choose the metafield you created earlier, Size Chart:

![](/files/Ikn8rnv3lpk8JJ1EnOhu)

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 %}