LogoLogo
  • πŸ› οΈWelcome to Smartrr help docs
  • Links
    • Changelog
    • API Docs
  • Getting Started
    • Implementation
      • πŸͺ„Installing Smartrr on a Shopify 2.0 theme (Automatic Install)
      • πŸ—ΊοΈInstalling Smartrr on a custom Shopify theme (Guided Install)
      • πŸ§Ÿβ€β™‚οΈInstalling Smartrr on a headless store
      • πŸ’»Adding Smartrr to a custom page (Shopify Liquid)
    • Onboarding
      • ⛑️Basic onboarding process
      • 🧀Smartrr team led onboarding
      • πŸ’΅Plans
      • πŸ’³Migrating subscriptions from payment processors
  • Support
    • Subscription Setup
      • πŸ“‡Subscription Programs
      • βš“Subscription anchor dates
      • πŸ—“οΈMaximum/minimum (finite) subscription plans
      • πŸ“§Email subscription notifications (Customer Notifications)
      • πŸ“²SMS subscription notifications (via Twilio)
      • πŸ›οΈSubscription discount codes
      • πŸ’ΈPrepaid subscriptions
      • πŸͺœSequential Flow Builder?
      • πŸ“¦Shipping methods
      • ❔Subscriptions when an item is unavailable
      • πŸ’²Buy-now-pay-later payment methods for subscriptions
      • 🏁Checkout Extensions
    • Admin Portal
      • πŸ”Adjusting customers’ subscriptions
      • πŸ“‡Adjusting customers' information
      • πŸ€Έβ€β™‚οΈ"View as customer" feature
      • πŸ•’Event log
      • πŸ“ŠAdvanced Analytics reporting
      • πŸ–ŒοΈCustomer account portal theming
      • πŸ”€Translations
      • πŸ’»Available actions for customers in account portal
      • 🎨CSS overrides
      • πŸ” Adjusting typography with CSS overrides
      • πŸ“£Marketing Banners
      • πŸ’­Retention
      • 🧺Bundles
      • 🎁Loyalty
      • πŸ”Passwordless login
      • πŸ’ŸCreator upsells
      • 🎞️Instagram feed
    • Customer Account Portal
      • πŸšͺAccessing the Customer Account Portal
      • πŸ”„Creating an account
      • πŸ”œViewing next orders
      • πŸ“Manage subscriptions
      • πŸ—ƒοΈOrder history
      • πŸ“§Updating email address
    • Transactions
      • 🀝Subscription transactions
      • 🚫Failed payments
      • πŸ“†Billing schedule
    • Integrations
      • 🌐Available integrations with Smartrr
      • πŸ“±Attentive x Smartrr Integration
      • πŸ“±Blueprint x Smartrr Integration
      • πŸ“¬Gorgias x Smartrr Integration
      • πŸ“©Klaviyo x Smartrr Integration
      • 🦁Loyalty Lion x Smartrr Integration
      • πŸ“±Postscript x Smartrr Integration
      • πŸ”Recharge x Smartrr Integration
      • 🟩Shopify Flow x Smartrr Integration
      • πŸͺWebhooks
    • Shopify Questions
      • πŸ’²Will updating product prices in Shopify reflect in Smartrr?
    • Developer Documentation
      • Bundles: Developer Documentation
    • Troubleshooting
      • ⏸️Why did my customer's subscription automatically pause?
      • πŸ“žWhy is my customer's shipping address invalid? (Phone number formatting)
      • πŸ†˜Can’t find the answer to your question?
    • RSS Feed
      • πŸ“³Smartrr’s changelog: Stay up-to-date with Slack
Powered by GitBook
On this page
  • CSS Override Examples
  • Typography Examples
  • Badge Examples
  • Page Margin
  • Quantity Indicators
  • Lines
  • Next Order / Subscription Tabs
  • Prevent Navigation from Overlapping Portal Header

Was this helpful?

Export as PDF
  1. Support
  2. Admin Portal

CSS overrides

Developers can override in-app theme settings with our override tool.

PreviousAvailable actions for customers in account portalNextAdjusting typography with CSS overrides

Last updated 1 year ago

Was this helpful?

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

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

Below is the full list of CSS variables that manipulated. ⬇️ to examples of how to use these CSS overrides to further customize your shop's customer portal.

🎨
Jump