Would you like to display a size chart directly in a page in your store? Great! this is something that SmartSize won't be able to do out of the box, but don't worry, we have got your covered. Follow the instructions below and see the magic for yourself!

You do not need any html or css coding skills, you just need access to ChatGPT (free version works perfect)

You can see a live example in this page (password: smart)

https://smartsizestore.myshopify.com/pages/size-chart

Step 1

Open chat GPT

Copy paste the following prompt (simply replace the table in red with your own table)

(start of prompt)

The following table is in centimeters:

SIZE	Neck	Chest	Sleeve	Waist	UK Size**	EU Size**	Australia Size**
XS	13 - 13.5	33 - 34	31 - 32	27 - 28	33 - 34	42 - 44	14 - 14.5
S	14 - 14.5	35 - 37	32 - 33	29 - 31	35 - 37	44 - 46	14.5 - 15
M	15 - 15.5	38 - 40	33 - 34	32 - 34	38 - 40	48 - 50	15.5 - 16
L	16 - 16.5	42 - 44	34 - 35	36 - 38	42 - 44	52 - 54	16.5 - 17
XL	17 - 17.5	46 - 48	35 - 36	40 - 42	46 - 48	56 - 58	17.5 - 18
2XL	18 - 18.5	50 - 52	36 - 37	44 - 46	50 - 52	60 - 62	18.5 - 19
3XL	19 - 19.5	54 - 56	37 - 38	48 - 50	54 - 56	64 - 66	19.5 - 20

Please create two separate html tables, one in centimeters and the other converted to inches. Make sure that you use the same structure and ids as in this code:

<!-- CM Size Chart -->
<table id="size-chart-cm" class="size-chart">
<thead>
<tr>
<th>SIZE</th>
<th>Neck (cm)</th>
<th>Chest (cm)</th>
<th>Sleeve (cm)</th>
<th>Waist (cm)</th>
<th>UK Size</th>
<th>EU Size</th>
<th>Australia Size</th>
</tr>
</thead>
<tbody>
<tr><td>XS</td><td>13 - 13.5</td><td>33 - 34</td><td>31 - 32</td><td>27 - 28</td><td>33 - 34</td><td>42 - 44</td><td>14 - 14.5</td></tr>
<tr><td>S</td><td>14 - 14.5</td><td>35 - 37</td><td>32 - 33</td><td>29 - 31</td><td>35 - 37</td><td>44 - 46</td><td>14.5 - 15</td></tr>
<tr><td>M</td><td>15 - 15.5</td><td>38 - 40</td><td>33 - 34</td><td>32 - 34</td><td>38 - 40</td><td>48 - 50</td><td>15.5 - 16</td></tr>
<tr><td>L</td><td>16 - 16.5</td><td>42 - 44</td><td>34 - 35</td><td>36 - 38</td><td>42 - 44</td><td>52 - 54</td><td>16.5 - 17</td></tr>
<tr><td>XL</td><td>17 - 17.5</td><td>46 - 48</td><td>35 - 36</td><td>40 - 42</td><td>46 - 48</td><td>56 - 58</td><td>17.5 - 18</td></tr>
<tr><td>2XL</td><td>18 - 18.5</td><td>50 - 52</td><td>36 - 37</td><td>44 - 46</td><td>50 - 52</td><td>60 - 62</td><td>18.5 - 19</td></tr>
<tr><td>3XL</td><td>19 - 19.5</td><td>54 - 56</td><td>37 - 38</td><td>48 - 50</td><td>54 - 56</td><td>64 - 66</td><td>19.5 - 20</td></tr>
</tbody>
</table>

<!-- Inches Size Chart -->
<table id="size-chart-inches" class="size-chart active-chart">
<thead>
<tr>
<th>SIZE</th>
<th>Neck (in)</th>
<th>Chest (in)</th>
<th>Sleeve (in)</th>
<th>Waist (in)</th>
<th>UK Size</th>
<th>EU Size</th>
<th>Australia Size</th>
</tr>
</thead>
<tbody>
<tr><td>XS</td><td>5.1 - 5.3</td><td>13 - 13.4</td><td>12.2 - 12.6</td><td>10.6 - 11</td><td>33 - 34</td><td>42 - 44</td><td>14 - 14.5</td></tr>
<tr><td>S</td><td>5.5 - 5.7</td><td>13.8 - 14.6</td><td>12.6 - 13</td><td>11.4 - 12.2</td><td>35 - 37</td><td>44 - 46</td><td>14.5 - 15</td></tr>
<tr><td>M</td><td>5.9 - 6.1</td><td>15 - 15.7</td><td>13 - 13.4</td><td>12.6 - 13.4</td><td>38 - 40</td><td>48 - 50</td><td>15.5 - 16</td></tr>
<tr><td>L</td><td>6.3 - 6.5</td><td>16.5 - 17.3</td><td>13.4 - 13.8</td><td>14.2 - 15</td><td>42 - 44</td><td>52 - 54</td><td>16.5 - 17</td></tr>
<tr><td>XL</td><td>6.7 - 6.9</td><td>18.1 - 18.9</td><td>13.8 - 14.2</td><td>15.7 - 16.5</td><td>46 - 48</td><td>56 - 58</td><td>17.5 - 18</td></tr>
<tr><td>2XL</td><td>7.1 - 7.3</td><td>19.7 - 20.5</td><td>14.2 - 14.6</td><td>17.3 - 18.1</td><td>50 - 52</td><td>60 - 62</td><td>18.5 - 19</td></tr>
<tr><td>3XL</td><td>7.5 - 7.7</td><td>21.3 - 22</td><td>14.6 - 15</td><td>18.9 - 19.7</td><td>54 - 56</td><td>64 - 66</td><td>19.5 - 20</td></tr>
</tbody>
</table>

(end of prompt)

Step 2

Copy the answer from ChatGPT

Step 3

Paste the answer from ChatGPT into the code below:

<div class="size-chart-container">
<div class="size-chart-toggle">
<button id="inches-btn" class="active">Inches</button>
<button id="cm-btn">CM</button>
</div>




((PASTE THE ANSWER FROM CHATGPT HERE))


</div>

<style>
.size-chart-container {
margin: 20px auto;
max-width: 800px;
text-align: center;
}

.size-chart-toggle {
margin-bottom: 15px;
}

.size-chart-toggle button {
padding: 10px 20px;
margin: 0 5px;
border: none;
cursor: pointer;
background-color: #ddd;
font-weight: bold;
border-radius: 4px;
}

.size-chart-toggle button.active {
background-color: #333;
color: #fff;
}

.size-chart {
width: 100%;
border-collapse: collapse;
display: none;
margin: 0 auto;
}

.size-chart.active-chart {
display: table;
}

.size-chart th, .size-chart td {
border: 1px solid #ddd;
padding: 8px;
}

.size-chart th {
background-color: #f4f4f4;
font-weight: bold;
}

.size-chart tr:nth-child(even) {
background-color: #f9f9f9;
}

.size-chart tr:hover {
background-color: #f1f1f1;
}
</style>

<script>
document.getElementById('inches-btn').addEventListener('click', function() {
document.getElementById('size-chart-inches').classList.add('active-chart');
document.getElementById('size-chart-cm').classList.remove('active-chart');
this.classList.add('active');
document.getElementById('cm-btn').classList.remove('active');
});

document.getElementById('cm-btn').addEventListener('click', function() {
document.getElementById('size-chart-cm').classList.add('active-chart');
document.getElementById('size-chart-inches').classList.remove('active-chart');
this.classList.add('active');
document.getElementById('inches-btn').classList.remove('active');
});
</script>