Overriding Commerce7 Styles

Throughout the Commerce7 CSS, you'll find variables for styles that we think will be changed most frequently. This will allow you to easily update the general styles without having to dig around and search for specific classes to overwrite. Below is a list of all CSS variables used. You can either update them as needed or copy to your own file and update all at once to ensure that everything is in line with the rest of your website styles.

Variable List

Copy + paste the list of variables to your own CSS file to make changes. Make sure to delete the lines of any variables that you're not overriding.

You can reference more information about each variable, what the default is, and what each is used for at the bottom of the page.

:root {
    --c7-page-width: ;
    --c7-page-width-checkout: ;
    --c7-font-family: ;
    --c7-body-text-color: ;
    --c7-alt-text-color: ;
    --c7-font-size: ;
    --c7-font-size-sub: ;
    --c7-heading-font-family: ;
    --c7-heading-text-color: ;
    --c7-heading-font-weight: ;

    --c7-primary-color: ;
    --c7-primary-color-text: ;
    --c7-primary-color-dark: ;
    --c7-primary-color-focus: ;
    --c7-link-color: ;
    --c7-bg: ;
    --c7-bg-alt: ;
    --c7-border-color: ;
    --c7-border-radius: ;
    --c7-loading-bg: ;
    --c7-modal-border-radius: ;
    --c7-modal-shadow: ;
    --c7-overlay-bg: ;
    --c7-progress-bar: ;
    --c7-pill-bg: ;
    --c7-pill-text-color: ;

    --c7-field-bg: ;
    --c7-field-border-radius: ;
    --c7-field-border-color: ;
    --c7-field-focus-color: ;
    --c7-field-option-selected-color: ;
    --c7-field-option-focus-color: ;
    --c7-field-placeholder: ;

    --c7-primary-button-bg: ;
    --c7-primary-button-bg-hover: ;
    --c7-primary-button-text-color: ;
    --c7-alt-button-bg: ;
    --c7-alt-button-bg-hover: ;
    --c7-alt-button-text-color: ;
    --c7-button-border-radius: ;
    --c7-info-bg: ;
    --c7-error: ;
    --c7-error-bg: ;
    --c7-warning: ;
    --c7-warning-bg: ;
    --c7-success: ;
    --c7-success-bg: ;

    --c7-header-text-color: ;
    --c7-notification: ;
    --c7-cart-count-bg: ;
    --c7-cart-count-bg-focus: ;
    --c7-cart-count-text-color: ;
    --c7-side-cart-shadow: ;
    --c7-dropdown-border-radius: ;
    --c7-dropdown-shadow: ;
    --c7-dropdown-hover: ;

    --c7-block-bg: ;
    --c7-block-border-color: ;
    --c7-block-border-radius: ;
    --c7-block-shadow: ;

Variable Usage


VariableDefault ValueUsage
--c7-font-family'Inter', sans-serif
--c7-alt-text-color#50505ABody text color for content of secondary importance
--c7-font-size16pxBody text size
--c7-font-size-sub14pxBody text size for secondary info (ex. field help messages and field error messages, etc.)
--c7-heading-font-family'Inter', sans-serif
--c7-primary-color#3860D6Reused in other variables for: Selected field options, cart count, primary button color, etc.
--c7-primary-color-text#3251AEReused in other variables for: Links

While you may want this to be the same as your primary color, sometime it needs to be slightly altered for accessibility.
--c7-primary-color-dark#264BBAReused in other variables for: Primary button hover.
--c7-primary-color-focusrgba(56, 96, 214, 0.25)When focussing on items in the primary color such as radio buttons
--c7-bg#FFFMain background color (ex. For body of Checkout, Profile, Cart, etc.)
--c7-bg-alt#F7F8FASecondary background (ex. right-hand side of Checkout)

Background colour for Checkout breadcrumbs
--c7-border-radius4pxGeneral border radius (ex. bordered sections of content, alerts, etc.)

Separate border radius variable for items such as modals and fields
--c7-loading-bgrgba(255, 255, 255, 0.5)Loading spinner
--c7-modal-border-radius8pxModal window border radius
--c7-modal-shadow0 2px 20px 0 rgba(0, 0, 0, 0.1)Modal window box shadow
--c7-overlay-bgrgba(0, 0, 0, 0.1)Content overlay color when modal is open
--c7-progress-barvar(--c7-primary-color)Highlight color for completed progress


VariableDefault Value
--c7-field-focus-colorrgba(0, 0, 0, 0.07)
--c7-field-dropdown-shadow2px 2px 10px 0 rgb(0 0 0 / 8%)


VariableExample Value


VariableExample ValueUsage
--c7-info-bg#F1F1F4 (Light grey)- Background colour for info alert
--c7-error#CA0505 (Red)- Border colour for field on validation error
- Error text below field on validation error
- Icon colour for error alert
--c7-error-bg#FFEBEB (Light red)- Background for error alert
--c7-warning#FBA213 (Orange)- Icon colour for warning alert
--c7-warning-bg#FFF6E5 (Light orange)- Background for warning alert
--c7-success#016047 (Green)- Icon colour for success alert
--c7-success-bg#E8FCF7 (Light green)- Background for success alert


VariableDefault ValueUsage
--c7-header-text-color#232324Login / cart widget text color
--c7-notification#CA0505 (Red)Account widget - Logged in notification marker
--c7-cart-count-bgvar(--c7-primary-color)Cart widget - Item count background
--c7-cart-count-bg-focusvar(--c7-primary-color-focus)Cart widget - border around circle when focusing
--c7-cart-count-text-color#FFFCart widget - text colour
--c7-side-cart-shadow0 0 15px 5px rgb(0 0 0 / 10%)
--c7-dropdown-border-radius8pxAccount widget - Logged in dropdown menu
--c7-dropdown-shadow0 1px 7px 0 rgb(0 0 0 / 15%)Account widget - shadow
--c7-dropdown-hover#E6E8EDAccount widget - When hovering on a menu item

Account Blocks

VariableDefault ValueUsage
--c7-block-bgvar(--c7-bg)Blocks of content displayed in the Profile (Dashboard, Shipping Addresses, etc.) and on the Checkout "Review" step.
--c7-block-shadow0px 1px 3px 0px rgba(222, 222, 227, 0.3)