> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/help-and-faqs/how-do-i-add-a-size-chart.md).

# How do I add a size chart?

### What you are seeing <a href="#what-you-are-seeing" id="what-you-are-seeing"></a>

Customers ask which size to order, or they order the wrong one and return it. You want a size guide next to the size options on the product page, and you would rather not install another app for it.

### How the theme handles it <a href="#how-the-theme-handles-it" id="how-the-theme-handles-it"></a>

Vélare has a built in size chart that attaches to a product option. You store the chart itself in a metafield, then tell the variant picker which option name is the size one. From then on the chart appears automatically on every product that uses that option name, with no per product work.

That last part is the point: set it up once and a catalogue of hundreds of products is covered.

### Step 1: Create the size chart metafield <a href="#step-1-metafield" id="step-1-metafield"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Shopify admin > Settings > Custom data > Products**.
2. Click **Add definition**.
3. Create the definition for the size chart.
4. Click **Save**.
5. Go to **Online Store > Pages** and create a page containing your size chart.
6. Add the size chart as a table, image, or formatted text, then click **Save**.
7. Go to **Shopify admin > Products** and open the product you want to edit.
8. Scroll down to the **Metafields** area and select the size chart page in the **Size chart** field.
9. Click **Save**.
   {% endhint %}

*Result:* the product now has a size chart page linked in its **Size chart** metafield, ready for the theme to display.

### Step 2: Tell the variant picker which option is the size <a href="#step-2-size-trigger" id="step-2-size-trigger"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. Open your **Product page** template.
3. Go to **Product information > Variant picker > Size trigger**.
4. Enter the option name you use for sizing, for example `Size`.
5. Click **Save**.
   {% endhint %}

*Result:* the size chart link appears next to the size options on every product page that uses that option name.

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

{% hint style="info" %}
The value in **Size trigger** has to match the option name on your products exactly. If some products call it `Size` and others `Shoe size`, the chart only appears on the ones that match.
{% endhint %}

### When to contact support <a href="#when-to-contact-support" id="when-to-contact-support"></a>

Contact support if the chart does not appear after both steps are done, if it appears on the wrong products, or if the chart opens but the table inside it is empty or badly formatted.

Send this with your first message:

* Your store URL, and the URL of a product page where the chart should appear.
* The exact option name on that product, and the exact value you typed into **Size trigger**.
* A screenshot of the metafield definition, and a screenshot of the product page.
* Theme name and version: **Vélare 1.0.0**, shown under the theme name in **Online Store > Themes**.
* A [staff account](/velare/help-and-faqs/staff-account.md) for the support team.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Metafields](/velare/buy-and-install/create-required-metafields/metafields.md): the other product metafields the theme reads
* [Product information](/velare/customize-your-pages/product-page/page-template-sections/product-information.md): the section that holds the variant picker
* [Staff account](/velare/help-and-faqs/staff-account.md): how to give the support team access to your store


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/help-and-faqs/how-do-i-add-a-size-chart.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
