How can I change the look of my size chart (CSS)?

You are here:
In this article

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

How to add code to your theme.liquid file

To top

How to edit code in your theme.liquid file

You can place this code after the <head> tag in your theme.liquid file.

General styling

To top

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

<style>
/* Change the width of the size chart */
.scr-modal {
max-width: 700px !important;
}
</style>

Siz chart popup window styling

To top

Change the background color of the size chart

<style>
/* Change the background color of the size chart */
.scr-modal {
background: black !important;
}
</style>

Change the font of all the text in the size chart

<style>
/* Change the font of the size chart data */
.scr table td {
font-family: 'Futura', Arial, Helvetica, sans-serif !important;
}
</style>

Change the font of the description

<style>
/* Change the font of the description */
.scr span {
font-family: 'Futura', Arial, Helvetica, sans-serif !important;
}
</style>

Size Chart link and icon styling

To top

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

<style>
/* Change the color of the size chart link text */
div .scr-open-size-chart {
color: #000000 !important;
}
</style>

Reduce the space above the size chart icon and link

<style>
/* Reduce the  space above the size chart icon and link */
div button.scr-open-size-chart {
margin-top: 0px !important;
padding-top: 0px !important;
}
</style>

Change the font size of the size chart link text

<style>
/* Change the font size of the size chart link text */
div .scr-open-size-chart {
font-size: 18px !important;
}
</style>

Center size chart link and icon on the product page

<style>
/* center size chart link and icon on the product page */
div .best-fit-size-chart {
text-align: center !important;
}
</style>

Change the size of the size chart icon

<style>
/* Change the size of the size chart icon */
div .scr-open-size-chart::before {
height: 17px !important;
width: 20px !important;
}
</style>

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

<style>
/* Change the size chart and icon to white (dark themes) */
div .scr-open-size-chart::before {
filter: invert(1);
}
</style>
<style>
div .scr-open-size-chart {
color: #ffffff !important;
}
</style>

Size Chart table styling

To top

Center size chart data in the size chart

<style>
/* Center size chart data in the size chart */
.scr.basic table td {
text-align: center !important;
}
</style>

Remove vertical lines on the size chart

<style>
/* Remove vertical lines on the size chart */
.scr.basic table tr td {
border-left: 0 !important;
border-right: 0 !important;
}
</style>

Make the size chart columns equal width

<style>
/* Make the size chart columns equal width */
.scr table {
table-layout: fixed !important;
}
</style>

Change the size chart gridline color

<style>
/* Change the size chart gridline color */
.scr-modal table td {
border: 1px solid #c5c5c5 !important;
}
</style>

Bold text for first column of size chart table

<style>
/* Bold text for first column of size chart table*/
.scr.basic table tr td:first-child {
font-weight: bold !important;
}
</style>

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

<style>
/* Change the font size of the size chart table text for mobile devices */
@media (max-width: 500px) {
.scr table td {
font-size: 12px !important;
}
}
</style>

Other styling

<style>
/* change the font and border style of the whole table */
.scr-modal table td {
font-family: Arial !important;
border: 1px solid black !important;
}
/* make the first row black with white, centered text */
.scr-modal table tr:first-child td {
background: black !important;
color: white !important;
text-align: center !important;
}
/* 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 !important;
text-align: center !important;
}
</style>

Black background and white text for the size chart

<style>
/* Black background and white text for the size chart */
.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

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

Pin It on Pinterest