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.
Size chart settings
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>
