> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/piano-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webibazaar.gitbook.io/piano-documentation/product-page/creating-a-size-chart-page.md).

# Creating a Size Chart Page

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

Before assigning a page to the **Size Chart** setting, you must first create a Shopify page containing your size chart information. This page can include measurement tables, fitting instructions, and additional sizing notes, which will be displayed in the Size Chart popup.

## Create a Size Chart Page

{% stepper %}
{% step %}
From your **Shopify Admin**, go to **Online Store → Pages**.

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2F0HIRsZgCRTdbmNAA1OH1%2Fpages.png?alt=media&amp;token=9a646d2b-aeaf-45b1-a123-47a073352253" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Click **Add page**.

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FIIATqKCBtT8aKC8k1C5q%2FAdd%20page.png?alt=media&amp;token=39040afd-189a-43a2-846e-4d73ab7b3761" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Enter a page title.

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FJha6Hl4o6sjmB7kA4D2G%2Fsize%20chart%20title.png?alt=media&amp;token=acf9bc95-9d50-4a99-a71d-1d928f391632" alt=""><figcaption></figcaption></figure>

**Example:**

```
Size Chart
```

{% endstep %}

{% step %}
In the **Content** editor, add your size chart information, such as:

* Measurement table
* Body measurement guide
* How to measure instructions
* Fit recommendations
* Additional sizing notes

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FEeujd08Hl7KnA6LzeTLd%2Fsize%20chart%20content.png?alt=media&amp;token=c37b8321-a022-4c5a-9cba-b97fc6bb2d7a" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Ensure the page visibility is set to **Visible**.

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FNVtzJDOnUxSsWQZKLODR%2Fset%20visible.png?alt=media&amp;token=74f1e9c8-61f2-4d3c-9e1b-8b25408fb0d7" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Click **Save**.

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2Fh8w4DEjyqitvnY07fXXp%2FSave.png?alt=media&amp;token=1239a7fe-214f-4e25-a076-797100762d31" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

> **Tip:** Include clear measurement tables and easy-to-follow instructions to help customers choose the correct size with confidence.

## Add the Size Chart to the Variant Picker

After creating the page:

1. Go to **Online Store → Themes**.
2. Click **Customize** on your theme.
3. Open the **Default Product** template.
4. Select the **Variant Picker** block.
5. Scroll down to the **Size Chart** settings.
6. Configure the following:

| Setting        | Description                                                                                       |
| -------------- | ------------------------------------------------------------------------------------------------- |
| **Link Label** | Enter the text that customers will click, such as **Size Chart** or **Size Guide**.               |
| **Image**      | Upload a size chart illustration or measurement guide image that appears at the top of the popup. |
| **Page**       | Select the **Size Chart** page you created in Shopify Admin.                                      |

7. Click **Save**.

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2F2oENECyqH1bJf46mTizv%2Fsize%20chart.png?alt=media&amp;token=d298b3f5-4f6d-4c1d-b05b-6dc5dde6b1d3" alt=""><figcaption></figcaption></figure>