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

Prevent Navigation from Overlapping Portal Header

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