# Size Chart

![](https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2Fb39AeBnpz5hGBIe7x8EN%2F141.jpg?alt=media\&token=81006810-c76b-442d-b7c1-c245aed8b8c3)

{% hint style="info" %}
Ella offers 5 ways to show the Size chart:

* [By Product Type](#by-product-type)
* [By Product Vendor](#by-product-vendor)
* [By Metafield](#by-metafield)
* [By Custom Image](#by-custom-image)
* [By Custom Page](#by-custom-page)
{% endhint %}

## By Product Type

1. From your Shopify admin, go to **Online Store** -> **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Choose **Products** from the dropdown window.
4. On **Product information** -> add **Perks** block (if not already added).
5. On **Perks** block scroll down to **Size chart** and choose **Size chart type** as **Product type.**

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FuCn2ce4BeTIz0zsr3i5I%2Fimage.png?alt=media&#x26;token=3b8fa535-2244-4063-9124-846f2401ef85" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Upload image with the same name as the product-type-sizechart. You need to go to Settings --> Files upload images here.

Naming convention: lower cap and use "-" to replace white space. For example: with the product type "Loremous Comodous" the image name will be loremous-comodous-sizechart.jpg or loremous-comodous-sizechart.png
{% endhint %}

## By Product Vendor

1. From your Shopify admin, go to **Online Store** -> **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Choose **Products** from the dropdown window.
4. Click **Product information** -> add **Perks** block (if not already added).
5. On **Perks** block scroll down to **Size chart** and choose **Size chart type** as **Product vendor.**

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2F07N0tE4zsiC9CDOy5XMv%2Fimage.png?alt=media&#x26;token=b4e1bd22-c908-4225-ae11-03d476241336" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Upload image with the same name as the product-vendor-sizechart.

To get the image URL, please upload the image in **Content** **->** **Files**. Then copy the link. You can refer to [this link](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/file-uploads).

Naming convention: lower cap and use "-" to replace white space. For example: with the product vendor "Loremous Comodous" the image name will be loremous-comodous-sizechart.jpg or loremous-comodous-sizechart.png
{% endhint %}

## By Metafield

1. From your Shopify admin, go to **Online Store** -> **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Choose **Products** from the dropdown window.
4. Click **Product information** -> add **Perks** block (if not already added).
5. On **Perks** block scroll down to **Size chart** and choose **Size chart type** as **Product metafield.**

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FZchPQhoxmWiBEqNPvKAF%2Fimage.png?alt=media&#x26;token=3548000f-bd8c-41c6-a55e-4db9831a2d0c" alt=""><figcaption></figcaption></figure>

### H**ow to add new Metafields?**

1. From your Shopify admin, go to **Settings** -> **Custom data**.
2. Click **Products → Add Definition.**

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FPTqNndRguDzb15QPCqT0%2Fmeta-field.jpg?alt=media&#x26;token=904657ee-9381-4d21-a258-56b1c8d7c2bb" alt=""><figcaption></figcaption></figure>

3. Please enter correct **Namespace and Key** as we noted below.

```
Name: Size Chart
Namespace and key: c_f.size_chart
Select content type: Text
```

![](https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FFkwxlfBWyvydJWzVAX3G%2Fsizechart-3.gif?alt=media\&token=a81dd1e5-7f11-4e52-83e9-e21179a28d87)

### How to insert content for Product Metafields?

1. From your Shopify admin, go to **Products -> All products**.
2. Find and choose the product that you want to edit.
3. In the **Metafields**, please insert image url in the "**Size Chart**" field.

![](https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FRbKaPyuVBj6qVOLXSf6u%2Fsizechart-4.gif?alt=media\&token=12c081f1-625c-41bb-af9a-0d21a75ae194)

{% hint style="info" %}
To get the image URL, please upload the image in **Content** **->** **Files**. Then copy the link. You can refer to [this link](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/file-uploads).
{% endhint %}

{% hint style="info" %}
You can use [Bulk Editor](broken-reference) to edit multiple products.
{% endhint %}

## By Custom Image

1. From your Shopify admin, go to **Online Store** -> **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Choose **Products** from the dropdown window.
4. Click **Product information** -> add **Perks** block (if not already added).
5. On **Perks** block scroll down to **Size chart** and choose **Size chart type** as **Custom image** to apply the size chart for all product&#x73;**.**
6. Upload the size chart image for all products.

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FtyjdS5p2swtLTRuNBLbI%2Fimage.png?alt=media&#x26;token=3474b300-40ea-4834-b4eb-49722e314164" alt=""><figcaption></figcaption></figure>

## By Custom Page

1. From your Shopify admin, go to **Online Store** -> **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Choose **Products** from the dropdown window.
4. Click **Product information** -> add **Perks** block (if not already added).
5. On **Perks** block scroll down to **Size chart** and choose **Size chart type** as **Custom page.**
6. At "**Custom page**" select the page that you want to display its content on the size chart popup.

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FOUy1cpFgQ6pMzrylhsdy%2Fimage.png?alt=media&#x26;token=476967d1-902f-44c2-9ac0-226b7ba83db3" alt=""><figcaption></figcaption></figure>
