> For the complete documentation index, see [llms.txt](https://crocode.gitbook.io/elemento-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://crocode.gitbook.io/elemento-docs/size-guide.md).

# Size guide

This feature allows you to add a **Size Guide** that opens in a modal window when customers click a **"Size Guide"** button near the size variant selector. This enhances the user experience and reduces returns due to sizing issues.

<figure><img src="/files/6mw0YGtEgYRmkMP3o8V8" alt=""><figcaption></figcaption></figure>

***

### Step 1: Create the Size Guide Page

1. Go to your **Shopify Admin** → **Online Store** → **Pages**.
2. Click **Add Page**.
3. Title it something like `Size Guide`.
4. In the content area, insert either:

   * A **table** with your size data,
   * Or an **image** containing a sizing chart.

   **To insert custom HTML code:**

&#x20;         In the content editor toolbar, click the **“Show HTML”** icon (it looks like `<>`).\
&#x20;         Paste your HTML code directly into the editor or from our [example](/elemento-docs/size-guide-table.md).

5. Click **Save**.

***

### Step 2: Assign the Page in the Theme Editor

Now link this page to the product section where the size guide should appear.

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

You can use **any** of the following sections:

#### Option 1: On the Product Page

1. Open the **Theme Editor** (Customize).
2. Navigate to a **product page**.
3. Select the **Product information** section.
4. In the **Size guide page** setting, choose the page you created (e.g., `Size Guide`).

#### Option 2: Featured Product Section

1. Navigate to any section using **Featured Product**.
2. Locate the **Size guide page** setting.
3. Select your `Size Guide` page.

#### Option 3: Quick View Modal

1. In the **Quick View** section settings (if implemented), find **Size guide page**.
2. Choose your previously created size guide.

***

### Best Practices

* You can create multiple size guide pages if needed (e.g., Men’s, Women’s, Kids’) and assign them dynamically via **metafields** or custom logic if implemented.
* You can use [our sizing table template](/elemento-docs/size-guide-table.md) to save time and keep a consistent theme style.

### Optional: Use Metafields for Dynamic Size Guides

If you have multiple product types with different size guides (e.g., Men’s, Women’s, Shoes), you can use **product** [**metafields**](https://help.shopify.com/en/manual/custom-data/metafields/metafield-definitions) to assign a different guide per product.

#### How to Set It Up

1. In your **Shopify Admin**, go to\
   **Settings** → **Custom data** → **Products**.
2. Click **Add definition** and create a metafield:
   * **Name**: `Size guide`
   * **Namespace and key**: `custom.size_guide`
   * **Type**: `Page`
3. Save the definition.
4. Go to a product and assign a page to the new `Size guide` metafield.

#### Shopify Documentation

&#x20;[Add custom product metafields](https://help.shopify.com/en/manual/custom-data/metafields/metafield-definitions)

***

### How It Works

* After selecting a **Size Guide page** and saving:
  * If a product has a variant named `"Size"`, the standard **“Size”** label is replaced with a **“Size Guide”** button.
  * When users click the **Size Guide** button, a **modal window** opens displaying the content of your selected page.
  * If a metafield is assigned to the product, it overrides the manually set guide in the section.

This works both with **tables** and **images** inside the selected page.