\Want to tailor the look and feel of the SmartSize popup to match your brand in a more advanced manner? You can do that by adding custom CSS styles directly in your Shopify theme settings — no need to touch your theme code.
You don't need to be a programer to achieve this. Anyone can do it!
Step 1: Open your Shopify theme editor
- From your Shopify admin, go to Online Store > Themes.
- Next to your live theme (e.g. Dawn), click Customize.
Step 2: Find the Custom CSS field
- In the theme editor, look at the left-hand panel.
- Click the ⚙️ Theme settings icon at the bottom.
- Scroll down and select Custom CSS.
- You’ll see a text box where you can enter your CSS code.
This will apply styles globally to your store, including the SmartSize popup.
Step 3: Add your CSS to style the SmartSize popup
Let’s say you want to change the popup’s background to light grey. You can target the popup’s main container class: smartsize-modal.
Paste the following CSS in the box:
.smartsize-modal {
background-color: #cccccc;
}Result: When a shopper opens the SmartSize popup, the background will now appear in a soft light grey tone.
Don’t forget to hit Save in the top right corner when you're done!
Pro Tip: Generate CSS code with our own SmartSize GPT
Use our CSS Styling GPT to ask ChatGPT for the relevant CSS code.
Open SmartSize CSS Styling
https://chatgpt.com/g/g-68ed4f14b21c81919b0138725217e034-smartsize-css-styling
SmartSize Popup CSS Classes
You can target and style any of the following classes to match your brand’s look:
| Class Name | Description |
|---|---|
smartsize-modal |
The popup window itself |
smartsize-title |
Title text in the popup |
smartsize-product-name |
Product name displayed inside the popup |
smartsize-tabs |
Tabs for switching between size charts |
smartsize-header |
Header area of the popup |
smartsize-unit-toggle |
Unit switcher (e.g. cm/inch) |
smartsize-table |
Main size chart table |
smartsize-table__header |
Table header row |
smartsize-table-cell |
Individual table cells |
smartsize-image |
Product or measurement image |
smartsize-instructions |
Sizing guidance or instructions text |
smartsize-footer |
Footer area of the popup |
SmartSize size chart button CSS Classes
You can target and style any of the following classes to match your brand’s look:
| Class Name | Description |
|---|---|
smartsize-trigger |
Main button wrapper (used for all triggers) |
smartsize-trigger--floating |
Floating button version (typically hovers at the bottom of the screen) |
smartsize-trigger--inline |
Inline button version (appears inside the product page content) |
smartsize-button__icon |
Icon inside the button |
smartsize-button__label |
Text label inside the button |