# Size chart

## Setup metafield for Size chart

<figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FIoKdyCnbK0wxaGGVn2pz%2Fimage.png?alt=media&#x26;token=8e52e7a7-f90c-46e3-ba9d-01674188c6c2" alt=""><figcaption></figcaption></figure>

### 1. Create Size chart metafield

{% hint style="info" %}
Step:

1. Login to your Shopify store, click to **Settings**&#x20;
2. Click to **Custom data** and select **Products**&#x20;
3. Add Metafield for **Size chart**
   * Name: **Size chart**
   * Namespace and key: **bls.size\_chart**
   * Content type: **Multi-line text**
     {% endhint %}

<figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FneghGGwzAyCx1NlMFogi%2Fimage.png?alt=media&#x26;token=2f3711d0-dae6-4250-a2bc-5a45c6add9a7" alt=""><figcaption></figcaption></figure>

### 2. Add Size chart metafield to products

To set up a size chart metafield on **Shopify admin**, select a product from the **Products** section and customize the metafield according to your desired specifications.

<figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FoUVlzStxxQVBjly74117%2FScreenshot%202023-12-19%20154843.png?alt=media&#x26;token=fd3f10d2-3fda-4a24-b9f9-9550eef495b5" alt=""><figcaption></figcaption></figure>

## Size chart settings

<figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2Fe6uh7D2xCyKFAdu33kSG%2FScreenshot%202023-12-19%20155638.png?alt=media&#x26;token=d33a7f41-e3e0-440e-843e-c2bb6c9492a7" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2Fl2btvzyei5qJSV8JcAw8%2Fscreencapture-admin-shopify-store-dtian-umino-themes-138530488577-editor-2023-12-19-15_58_51.jpg?alt=media&#x26;token=5da3dc5a-b073-46b3-84c9-35f8461d09ae" alt=""><figcaption></figcaption></figure>

* **Use Size chart**: There are three options for you: **None**, **All Products** and **Product has size**
* **Size Chart Type:** There are three types for you to choose: **Image** or **HTML** or **Content**.
* **HTML Size Chart:** This option allows you to choose a page that you created in Shopify backend
* **Image Size Chart:** This option allows you to upload an image for the size chart option.
* **Content Size Chart:** This option allows you to add size guide content here

#### **Html code**

```
<h4 class="fs-18">Sizes for this Product.</h4>
<p class="mb-20">This is an approximate conversion table to help you find your size. Measure around the fullest part, place the tape close under the arms and make sure the tape is flat across the back (Unit: centimeter).</p>
<div class="table-responsive mb-20" style="overflow-y: auto;">
<table class="sizeguide_table" style="margin-left: auto; margin-right: auto; font-size: 14px;" width="100%">
<thead>
<tr>
<th class="fw-500 heading-color">Size</th>
<th class="fw-500 heading-color">US</th>
<th class="fw-500 heading-color">Bust</th>
<th class="fw-500 heading-color">Body Waist</th>
<th class="fw-500 heading-color">Fullest Hip</th>
</tr>
</thead>
<tbody>
<tr>
<td>XS</td>
<td>2</td>
<td>32</td>
<td>24 - 25</td>
<td>33 - 34</td>
</tr>
<tr>
<td>S</td>
<td>4</td>
<td>34 - 35</td>
<td>26 - 27</td>
<td>35 - 36</td>
</tr>
<tr>
<td>M</td>
<td>6</td>
<td>36 - 37</td>
<td>28 - 29</td>
<td>37 - 38</td>
</tr>
<tr>
<td>L</td>
<td>8</td>
<td>38 - 39</td>
<td>30 - 31</td>
<td>39 - 40</td>
</tr>
<tr>
<td>XL</td>
<td>10</td>
<td>40 - 42</td>
<td>32 - 33</td>
<td>41 - 42</td>
</tr>
<tr>
<td>XXL</td>
<td>12</td>
<td>40 - 41</td>
<td>34 - 3</td>
<td>43 - 44</td>
</tr>
</tbody>
</table>
</div>
<div class="row align-items-center">
<div class="col-md-7">
<h4 class="fs-18">How to Measure.</h4>
<h5 class="mb-5 fs-16">1. Bust</h5>
<p>Measure at the fullest part of your chest, keeping the tape parallel to the floor.</p>
<h5 class="mb-5 fs-16">2. Body Waist</h5>
<p>Measure at the smallest part of your waist. This is usually below the rib cage and above the hip bone.</p>
<h5 class="mb-5 fs-16">3. Fullest Hip</h5>
<p class="m-0">Measure at the fullest part of your seat, keeping the tape parallel to the floor.</p>
</div>
<div class="col-md-5"><img src="https://cdn.shopify.com/s/files/1/0665/6580/0183/files/size-g_600x600.jpg?v=1667383798" alt="size-g"></div>
</div>
```
