# Size charts

Broadcast includes a feature to display a custom size chart for any product you sell or a single size chart for all products when using the default product template:

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2F1VgqRT0WNPtH42P8Hac9%2Fnew-demo-size-chart.gif?alt=media&#x26;token=e9fd4837-f306-43bf-9306-a13835ec2356" alt=""><figcaption></figcaption></figure>

### Adding size charts to your store

For stores that <mark style="background-color:yellow;">require multiple size charts</mark>, Broadcast offers the ability to associate each product with a unique and specific size chart. For example, an apparel shop can have separate size charts for women's and men's products. Each product can be linked to help the customer find the right size chart.&#x20;

Other stores might only need one size chart for all their products. The setup for this kind of situation is very straightforward.

For multiple size charts, Broadcast uses product metafields to assign each product to a specific size chart. We'll walk you through the necessary setup steps below.&#x20;

{% hint style="success" %}
Broadcast uses product metafields to display a unique Size chart on each product page. This allows you to create multiple size charts and assign them to different products in your store.&#x20;
{% endhint %}

## How to set up

To start, you'll need to create your size chart pages. Broadcast will utilize Shopify's built-in Pages feature to display the size charts. If you already have an image of your size charts, you can simply upload it to a Shopify page.&#x20;

### Step 1: Create your size chart pages

Begin outside of the Theme Customizer, in the main Shopify Admin. Navigate to:

Sales channels > Online store > Pages

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2F8wztvSFNNtpTttlvEiNd%2Fsize%20chart%20online%20store%20pages.jpg?alt=media&#x26;token=7c24f36d-1f0a-4c4f-bd5e-b78024383930" alt=""><figcaption></figcaption></figure>

* Choose the "Add page" button to create a new page.&#x20;
* If you have an image already created for your size chart, add that to the content section of the page, or build a size chart page using the Shopify Rich Editor:

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FqVQRVRBHAkPd4p4nc5PW%2Fsample-page.jpg?alt=media&#x26;token=8ebe8606-4090-4b53-8e8a-910f14cc684a" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FdACq3WaSEMwPwYo0g2DG%2Fpage-with-image.jpg?alt=media&#x26;token=7d8b48af-f93b-4a6c-b826-0229c311f239" alt=""><figcaption><p>Example page with image</p></figcaption></figure>

### Step 2: Create a reference metafield

(Easy) The next step is to define a Product metafield using Page as the reference type. Here's a quick video on how to create the Size Chart metafield:

{% embed url="<https://www.loom.com/share/bae6b0096c74480fa79fb858945b8e32?sid=c6d58c0a-f92c-47f6-8fe7-d6e87c0932a7>" %}

#### Metafield reference from video

| Metafield details |                     |              |
| ----------------- | ------------------- | ------------ |
| Metafield type    | Product             |              |
| Name              | Size Chart          |              |
| Namespace and key | `custom.size_chart` |              |
| Description       | Size Chart          |              |
| Type              | **Page**            | **One page** |

#### Screenshot

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2F1TxXY4Ny5YAnzdeb7zLu%2Fsize-chart-metafield.jpg?alt=media&#x26;token=09472817-c59b-4600-b60e-18d4bef4599d" alt=""><figcaption></figcaption></figure>

### Step 3: Set up 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;

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FCX55IHoBUt8HQHArERdU%2Fproduct-metafield.jpg?alt=media&#x26;token=b6986f91-7f5c-480c-bc2c-a9f471c5fbd6" alt=""><figcaption></figcaption></figure>

* Choose the size chart page from Step 1 to associate with this product:

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2F356j4mfBT6s8OTA3JJzV%2Fproduct-setup-example.gif?alt=media&#x26;token=67bffceb-d941-4037-915c-4db8765e1eef" alt=""><figcaption><p><strong>Choose a Size Chart Page for each individual product</strong></p></figcaption></figure>

{% hint style="success" %}
**Complete for all products**\
Ensure that you select a size chart page for each of your products. If the metafield is left blank, no size chart will be displayed.&#x20;
{% endhint %}

### Step 4: Theme Customizer, connect the metafield

Next, we can use the Theme Customizer to activate the Size Chart metafield. There's one quick step to tell Broadcast to use the metafield you created in Step 2.&#x20;

* Select your Product template, such as "Default product", in the Theme Customizer.
* On the left sidebar, under Template, expand "Product pages" and then choose "<mark style="background-color:yellow;">**Variant picker**</mark>"
* Use the dynamic data icon <img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FyhIh1XDbPyZ0NunBm2Uw%2Fdata-icon.jpg?alt=media&#x26;token=da9845d8-c130-4bb5-81cf-36bef681c227" alt="" data-size="line"> to select your Size Chart metafield.&#x20;

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FTkAksheKAjiHmyrtPWiE%2Fconnect%20to%20metafield.jpg?alt=media&#x26;token=80bcc098-3b30-426a-b205-829438769d15" alt=""><figcaption></figcaption></figure>

#### Video for Step 4

Here's a short video on the above steps:

{% embed url="<https://www.loom.com/share/019f7fb87c6e4c4cbd78d75e0778578e?sid=a4c6950c-7edd-48b0-86b1-652921ee1590>" %}

Your theme will now use unique size charts that you created in Step 1 and mapped to individual products in Step 3.&#x20;

### Final notes

If you're not seeing the link for a size chart, make sure that the product you're viewing has a size chart page linked under the Metafields section. See Step 3.&#x20;

If all steps are correct and you're still not seeing the link, exit the Theme Customizer and re-enter. Sometimes, the Shopify platform requires that step to force a refresh.&#x20;

***

## How to use one chart for all products

If your store requires only **one** size chart for all product pages, you can skip steps 2 and 3 and simply choose the page in the Theme Customizer under Product pages > Variant picker.&#x20;

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2F14oAfCTZMl1Zx9nj4abJ%2Fsingle-size-chart-arrows.jpg?alt=media&#x26;token=f3061de4-43c2-4ba0-8d96-3fa348590eaf" alt=""><figcaption><p>One size chart for <strong>all</strong> products</p></figcaption></figure>

**Tip**: You can use multiple product templates and assign one chart to each template. Then assign groups of products to each of the product templates.&#x20;
