Developers can override in-app theme settings with our override tool.
Last updated: April 10, 2024
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
}