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.

<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>

Change the background color of the size chart

To top
<style>
scr-modal {
background: black;
}
<style>

Change the color of the size chart link text. Replace the color with the color you want

To top
<style>
div .scr-open-size-chart {
color: #000000 !important;
}
</style>

Change the font size of the size chart link text

To top
<style>
div .scr-open-size-chart {
font-size: 18px !important;
}
</style>

Center size chart link and icon on the product page

To top
<style>
div .best-fit-size-chart {
text-align: center !important;
}
</style>

Change the size of the size chart icon

To top
<style>
div .scr-open-size-chart::before {
height: 17px !important;
width: 20px !important;
}
</style>

Change the font size of the size chart table text for mobile devices

To top
<style>
@media (max-width: 500px) {
.scr table td {
font-size: 12px !important;
}
}
</style>

Change the width of the size chart (normally 700px)

To top
<style>
.scr-modal {
max-width: 700px !important;
}
</style>

Center size chart data in the size chart

To top
<style>
.scr.basic table td {
text-align: center !important;
}
</style>

Change the size chart and icon to white (dark themes)

To top
<style>
div .scr-open-size-chart::before {
filter: invert(1);
}
</style>
<style>
div .scr-open-size-chart {
color: #ffffff !important;
}
</style>

Change the size chart gridline color

To top
<style>
.scr-modal table td {
border: 1px solid #c5c5c5 !important;
}
</style>

Add size chart to a custom location in your product page layout

To top
<div class="best-fit-size-chart"></div>

If you add this code a second time, it will create a second link.

Black background and white text for the size chart

To top

<style>
.scr-modal {
background: black !important;
}
</style>

<style>
.scr-modal .scr-close:before, .scr-modal .scr-close:after {
background-color: white !important;
}
</style>

<style>
.scr h2{
color: #ccc !important;
}
</style>

<style>
.scr .top-description p, .scr .bottom-description p {
color: #ccc !important;
}
</style>

<style>
/* change the font and border style of the whole table, white text, center */
.scr-modal table td {
border: 1px solid #999 !important;
}
/* make the first row black with white, centered text */
.scr-modal table tr:first-child td {
background: black !important;
color: #ccc !important;
text-align: center;
}
/* give the rows a black background and center the text, white text, center */
.scr-modal table tr:nth-child(n+2) td {
background: black !important;
color: #ccc !important;
text-align: center !important;
}
</style>

Change styling for different sized screens

To top

Add this code after the <style> tag and before the rest of the code

@media (max-width: 480px) {
@media (min-width: 749px) and (max-width: 1003px) {

For example

<style>
@media (max-width: 480px) {
div .best-fit-size-chart {
text-align: center !important;
}
}
</stye>
Was this article helpful?
Dislike 0

Pin It on Pinterest