How can I change the look of my size chart?

Here are some code snippets to help you change the look of your size chart.

You can place this code below {% include ‘sizeChartsRelentless’ %} in your theme.liquid file.

This code will place the size chart below the size option

<style>
div .scr-open-size-chart {
margin-top: 0 !important;
}
</style>
<script>
if (sizeChartsRelentless) {
sizeChartsRelentless.done = function () {
$('[option-name="Size"]').after($('.best-fit-size-chart'));
};
}
</script>
<style>
/* change the font and border style of the whole table */
.scr-modal table td {
font-family: Arial;
border: 1px solid black;
}
/* make the first row black with white, centered text */
.scr-modal table tr:first-child td {
background: black;
color: white;
text-align: center;
}
/* give the rows after the first row a white background and center the text */
.scr-modal table tr:nth-child(n+2) td {
background: white;
text-align: center;
}
</style>
Was this article helpful?
Dislike 0

Pin It on Pinterest