How to fully theme your store's size chart popup with custom CSS

If you'd like your SmartSize Size Chart popup to match your store's branding, you can customize its appearance using CSS.

This allows you to change elements such as:

Font family
Text color
Popup background color
Table colors
Header styling
First column styling

Example

The CSS below demonstrates how to:

Use Roboto Mono throughout the popup
Apply a light beige (#f7f2e9) background
Change all text to black
Make the first column match the rest of the table

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

.smartrecom-sizechart-header,
.smartrecom-heading,
.smartrecom-tab-bar,
.smartrecom-table-header,
.smartrecom-table {
  font-family: "Roboto Mono", "Courier New", monospace !important;
  color: #000000 !important;
}

/* Popup background /
.smartrecom-sizechart-header,
.smartrecom-sizechart-body,
.smartrecom-modal-content {
  background: #f7f2e9 !important;
}

/ Table colors /
.smartrecom-sizechart {
  --smartrecom-table-sticky-bg: #f7f2e9;
  --smartrecom-table-text-color: #000000;
  --smartrecom-table-empty-color: #f7f2e9;
}

/ Header row /
.smartrecom-table-header {
  background: #f7f2e9 !important;
  color: #000000 !important;
}

/ Make the first column match the other columns */
.smartrecom-table tbody td:first-child {
  background: #f7f2e9 !important;
  color: #000000 !important;
  text-align: center !important;
}

What Each Section Does

1. Import a Custom Font

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

Imports the Roboto Mono font from Google Fonts so it can be used throughout the popup.

2. Update Typography

.smartrecom-sizechart-header, .smartrecom-heading, .smartrecom-tab-bar, .smartrecom-table-header, .smartrecom-table

Changes the font family and text color for:

Popup title
Section headings
Tab navigation
Table headers
Table content

3. Change the Popup Background

.smartrecom-sizechart-header, .smartrecom-sizechart-body, .smartrecom-modal-content

Sets the background color of the popup to a custom color.

Replace:

#f7f2e9

with any color that matches your brand.

4. Customize Table Colors

.smartrecom-sizechart {   --smartrecom-table-sticky-bg: #f7f2e9;   --smartrecom-table-text-color: #000000;   --smartrecom-table-empty-color: #f7f2e9; }

These CSS variables control the appearance of the size chart table:

--smartrecom-table-sticky-bg — Background of sticky columns and headers
--smartrecom-table-text-color — Text color inside the table
--smartrecom-table-empty-color — Background color for empty cells

5. Style the Header Row

.smartrecom-table-header

Changes the background and text color of the table's header row.

6. Match the First Column

.smartrecom-table tbody td:first-child

By default, the first column may have different styling from the rest of the table.

This rule ensures it:

Uses the same background color
Uses the same text color
Centers the text

Tips

Use your store's brand colors for a consistent shopping experience.
You can replace the Google Font with any web font of your choice.
If you're using a custom font, make sure it's loaded before applying it to the popup.
Always preview your changes on both desktop and mobile before publishing.

Need More Customization?

Since the size chart popup is built with standard HTML and CSS, many visual elements can be customized using CSS selectors. If you're looking to style a specific part of the popup that isn't covered here, feel free to contact our support team—we're happy to help.