1 of 1

What are CSS overrides?

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;
}

.smartrr-portal-header{
  padding-top: 150px; // Adjust value to fit navigation height
}

What are CSS overrides?

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;
}

.smartrr-portal-header{
  padding-top: 150px; // Adjust value to fit navigation height
}

What are CSS overrides?

CSS Override Examples

Typography Examples

Badge Examples

Page Margin

Quantity Indicators

Lines

Next Order / Subscription Tabs

Prevent Navigation from Overlapping Portal Header

What are CSS overrides?

CSS Override Examples

Typography Examples

Badge Examples

Page Margin

Quantity Indicators

Lines

Next Order / Subscription Tabs

Prevent Navigation from Overlapping Portal Header