# Size chart metafields

Palo Alto provides multiple options for displaying size charts on your product pages. The simplest method is to select and display one page with all your products. This approach works well for stores with a limited product range. For stores with more extensive product options, you can use Shopify's custom data feature with metafields to individually map a particular size chart to a product.&#x20;

### Metafields version

Each product can be configured to use any size chart page you've created. Palo Alto will add a 'Size Guide' link with an icon on your product pages when the current product has a size chart associated with it.

<figure><img src="/files/APOMLFdAMC2dRsebdkIL" alt=""><figcaption></figcaption></figure>

## How to

Palo Alto uses the pages you create in your Shopify Admin and renders them in a size chart drawer for your customers. The steps are simple:

* Create size chart pages using the Pages editor in your Shopify Admin.
* Create a custom metafield.
* Assign a size chart to individual products.

### Step 1 - Pages

The first step is to build your size chart pages in the main **Shopify Admin -> Online Store -> Pages**

<figure><img src="/files/H9SkDSQvgXfaFC9IeoLU" alt=""><figcaption><p><strong>Shopify admin -> Pages</strong></p></figcaption></figure>

* Create as many size-chart pages as necessary for your products.&#x20;

### Step 2 - Metafield

Next, we will create a custom metafield specifically for Palo Alto's size chart feature.&#x20;

* In the **Shopify Admin**, click on the **'Settings'** option at the bottom left:

<figure><img src="/files/ntbe73jBRsh5K2mo01gM" alt=""><figcaption><p><strong>Shopify admin -> Settings</strong></p></figcaption></figure>

* Click on **'Metafields and metaobjects'** and then click on **'Products'**:

<figure><img src="/files/iCyoWQoHSLTnIhQsbKCW" alt=""><figcaption><p><strong>Metafields and metaobjects -> Products</strong></p></figcaption></figure>

* Next, click on the **'Add definition'** button:

<figure><img src="/files/ng7hub6yLeZFSJEDlYLS" alt=""><figcaption><p><strong>Add definition button</strong></p></figcaption></figure>

If this is your first metafield, a different welcome screen may appear, and the same button may appear in a different position and color.&#x20;

### Metafield details

To define the metafield correctly, we will use the following form details:

1. **Name**: We suggest you use '**Size chart'**:

<figure><img src="/files/xJFfMjmc8HMvtLdzMhD1" alt=""><figcaption></figcaption></figure>

2. **Namespace and key:** Must be **changed** to `theme.size_chart`:

<figure><img src="/files/baQ428bWFUWXSAuMOpeK" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Replace the default `custom.size_chart` -> `theme.size_chart`
{% endhint %}

Ensure the **namespace and key** change is correct:

<figure><img src="/files/FL7MlWrLTUgInkJyXKQm" alt=""><figcaption><p><strong>Required change</strong></p></figcaption></figure>

3. **Description**: We suggest you use **'Size chart'** or anything to help you identify the metafield.&#x20;
4. **Select type**: Click the **'Select type'** button and choose **'Page'**. Then choose **'One page'**:

<figure><img src="/files/MesNZWgvMi7WEFebmX5W" alt=""><figcaption><p><strong>Choose Page -> One page</strong></p></figcaption></figure>

5. **Save** your definition.&#x20;

### Completed version

You can review your metafield definition after saving:&#x20;

<figure><img src="/files/RzVF1iPvS5TTzEjeKjnv" alt=""><figcaption><p><strong>Final version</strong></p></figcaption></figure>

### Step 3 - Products

With the size chart metafield created, we can now assign size chart pages to products. To do so, open any product in your store within the **Shopify admin -> Products**.&#x20;

* Choose a product that you'd like to connect to a size chart page:

<figure><img src="/files/I9ageqFImIPo6dH49c4C" alt=""><figcaption></figcaption></figure>

* Scroll to the **bottom** of the product and to the **Metafields** section. Click on the **'Size chart'** field and select the size chart page for this product:

<figure><img src="/files/5hpWFAjjK4UlpEk1I8MG" alt=""><figcaption><p><strong>Choose a size chart page for this product</strong></p></figcaption></figure>

* **Save** the changes.&#x20;

### Result

The '**Size Guide'** link with an icon will appear on that product page:

<figure><img src="/files/iXwpnRdBJ6LvsccJ4eAx" alt=""><figcaption><p><strong>Size Guide link</strong></p></figcaption></figure>

When the shopper clicks on the link, the size chart drawer appears with the page that was selected in the product setup:

<figure><img src="/files/ufzUKQd9GG9yKajEEz5B" alt=""><figcaption></figcaption></figure>

### Edit language

You can edit the default theme content to change the text **'Size Guide'** next to the ruler icon.&#x20;

Click on the ellipsis (three dots) at the top-left of the Theme Editor and choose **'Edit default theme content'**:

<figure><img src="/files/WZWx8bpcESJYRhTskIR8" alt=""><figcaption></figcaption></figure>

In the Content editor, sometimes known as the Language editor, under the **General** tab, modify the text that's under **Size chart -> Button:**

<figure><img src="/files/WT1HbFymToqoTY19Zgo0" alt=""><figcaption></figcaption></figure>

**Save** the changes.&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://palo-alto.presidiocreative.com/products/palo-alto-product-pages/size-chart-metafields.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
