# Size chart

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 **->** Choose **Default product**.
4. From the side menu, select **Product information**. Click **+ Add block** and select **"Size chart"** block, or click the **Search** bar to enter a search term.

<table><thead><tr><th width="237">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Text size</td><td><p>Font size of text:</p><ul><li><strong>Default</strong></li><li><strong>XX-Small</strong></li><li><strong>X-Small</strong></li><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li><li><strong>X-Large</strong></li><li><strong>XX-Large</strong></li><li><strong>XXX-Large</strong></li></ul></td></tr></tbody></table>

#### Popup block

<table><thead><tr><th width="237">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Using different size chart for product by following</td><td><p>Select size chart style the dropdown menu:</p><ul><li><strong>Product type</strong></li><li><strong>Product vendor</strong></li><li><strong>Metafield</strong></li><li><strong>Custom image</strong></li></ul></td></tr><tr><td>Image type</td><td><p>Select image type the dropdown menu:</p><ul><li><strong>Use image with PNG format</strong></li><li><strong>Use image with JPG format</strong></li></ul><p><em><mark style="color:red;">When you choose:</mark><mark style="color:red;"> </mark><mark style="color:red;"><strong>Product type</strong></mark><mark style="color:red;"> </mark><mark style="color:red;">or</mark><mark style="color:red;"> </mark><mark style="color:red;"><strong>Product vendor</strong></mark></em></p></td></tr><tr><td>Image</td><td>Set up an image <br><em><mark style="color:red;">When you choose:</mark><mark style="color:red;"> </mark><mark style="color:red;"><strong>Custom image</strong></mark></em></td></tr></tbody></table>

#### Color

<table><thead><tr><th width="237">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Color scheme</td><td>Select a color scheme to set the text and background colors for the section</td></tr></tbody></table>

#### Block padding

<table><thead><tr><th width="235">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determines the height of the top inner space of the block. Can be from <strong>0px</strong> to <strong>50px</strong>, increasing arithmetically of <strong>1px</strong> (pixel).</td></tr><tr><td>Bottom padding</td><td>Determines the height of the top inner space of the block. Can be from <strong>0px</strong> to <strong>50px</strong>, increasing arithmetically of <strong>1px</strong> (pixel).</td></tr></tbody></table>

***

## Using Different Size Chart For Product By Following as Metafield. <mark style="color:red;">H</mark><mark style="color:red;">**ow to add new Metafields?**</mark> <a href="#how-to-add-new-metafields" id="how-to-add-new-metafields"></a>

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

<figure><img src="https://vividmethods.gitbook.io/~gitbook/image?url=https%3A%2F%2F900895096-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FtGfLQO4ndHL3YaS7dw50%252Fuploads%252F03EmPlHczdQixvc4fZRl%252FSize%2520chart%2520-%25201.jpg%3Falt%3Dmedia%26token%3Dd254e3cd-e060-46dd-a2c9-b8ba7f34cb2d&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=f6287848&#x26;sv=1" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://vividmethods.gitbook.io/~gitbook/image?url=https%3A%2F%2F900895096-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FtGfLQO4ndHL3YaS7dw50%252Fuploads%252FpzgcnFszDU7ZensdWPA3%252FSize%2520chart%2520-%25202.gif%3Falt%3Dmedia%26token%3Db6ef4e22-dbdd-4f70-affc-887103e18cab&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=209c93b1&#x26;sv=1" alt=""><figcaption></figcaption></figure>

## <mark style="color:red;">How to insert content for Product Metafields?</mark> <a href="#how-to-insert-content-for-product-metafields" id="how-to-insert-content-for-product-metafields"></a>

{% 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). \
\
You can use Bulk Editor to edit multiple products.
{% endhint %}

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.

<figure><img src="https://vividmethods.gitbook.io/~gitbook/image?url=https%3A%2F%2F900895096-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FtGfLQO4ndHL3YaS7dw50%252Fuploads%252F8CX5uSd8709LrEw2NxVF%252FSize%2520chart%2520-%25203.gif%3Falt%3Dmedia%26token%3D1730601f-afce-4423-a6b0-34fc4273983e&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=85ac6098&#x26;sv=1" alt=""><figcaption></figcaption></figure>