π¨CSS overrides
Developers can override in-app theme settings with our override tool.
Last updated: May 14, 2025
Custom code placed in the CSS Overrides box in Theming will override any global or product settings.

CSS override rules will be scoped to the following selectors:
#smartrr_account
#smartrr_wrapper
#smartrr_toast_container
#smartrr_inner
#smartrr_header
Below is the full list of CSS variables that manipulated. β¬οΈ Jump to examples of how to use these CSS overrides to further customize your shop's customer portal.
header
customer-name
customer-email
customer-since
marketing-banner
inner
year-select
delivery-address-input
delivery-address-row
address-wrapper
current-address-1
address-1
current-address-2
address-2
settings-grid
addon
addon-wrapper
addon-selected
item-product-container
item-product-image
next-order-price
addon-no-products
subscription-grid
upcoming-deliveries
your-subscriptions-wrapper
edit-item-quantity-container
product-name
product-variant-name
manage-order-buttons
modal-center-text
modal-center-text-title
modal-center-text-subtitle
edit-subscription-apply-discount
ship-to
date-picker
list-item
list-item-selected
list-item-disabled
list-item-prepaid
upcoming-order-card
CSS Override Examples
Typography Examples
/* Headings */
h1, h2, h3, h4, h5{
font-family: "Lota Grotesque";
}
/* Body */
p{
font-family: 'Lota Grotesque';
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 20px;
color: #2B2D70;
}
/* Captions */
[class*="caption"] {
font-family: 'Lota Grotesque';
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 16px;
color: #2B2D70;
}
/* "Customer since" text */
[class*="customer-since"]{
font-family: 'Lota Grotesque';
font-style: normal;
font-weight: 600;
font-size: 10px;
line-height: 13px;
text-transform: uppercase;
color: #2B2D70;
}
/* "Primary button text */
[class*="primary-button"]{
font-family: 'Lota Grotesque';
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 20px;
color: #2B2D70;
}
/* "Secondary button text */
[class*="secondary-button"]{
font-family: 'Lota Grotesque';
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 20px;
color: #2B2D70;
}
Badge Examples
/* Captions within badges */
[class*="caption1"], [class*="info-badge"]{
font-family: 'Lota Grotesque';
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 16px;
color: #2B2D70;
}
/* Icon color */
[class*="info-badge"] svg{
stroke: #2B2D70;
}
Page Margin
/* Desktop portal top margin */
[class*="customer-header"]{
margin-top: 160px;
}
/* Mobile portal top margin */
@media screen and (max-width: 600px) {
[class*="customer-header"]{
margin-top: 100px;
}
}
Quantity Indicators
/* Quantity indicators */
[class*="quantity-container"]{
background-color: #2B2D70;
button{
padding:0px;
}
}
Lines
/* Lines */
hr{
background-color: #2B2D70;
border-width: 0px;
height: 1px;
}
Next Order / Subscription Tabs
/* Styling unselected tab*/
[class*="tab-wrapper"] [class*="tab-button"]{
background-color:rgb(0 0 0 / 30%);
/* Add space between the tabs - Optional */
:first-child{
margin-right: 10px;
}
/* Change color of Icon*/
svg {
stroke: #fff;
}
}
/* Styling selected tab*/
[class*="tab-wrapper"] [class*="selected"]{
background-color:#000 !important;
}
/* Hiding active indicator bar*/
.MuiTabs-indicator{
display:none;
}
Prevent Navigation from Overlapping Portal Header
.smartrr-portal-header{
padding-top: 150px; // Adjust value to fit navigation height
}
Last updated
Was this helpful?