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

General

Variable	Default Value	Usage
--c7-page-width	1300px
--c7-page-width-checkout	1500px
--c7-font-family	'Inter', sans-serif
--c7-body-text-color	#232324
--c7-alt-text-color	#50505A	Body text color for content of secondary importance
--c7-font-size	16px	Body text size
--c7-font-size-sub	14px	Body text size for secondary info (ex. field help messages and field error messages, etc.)
--c7-heading-font-family	'Inter', sans-serif
--c7-heading-text-color	#000
--c7-heading-font-weight	bold
--c7-primary-color	#3860D6	Reused in other variables for: Selected field options, cart count, primary button color, etc.
--c7-primary-color-text	#3251AE	Reused 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	#264BBA	Reused in other variables for: Primary button hover.
--c7-primary-color-focus	rgba(56, 96, 214, 0.25)	When focussing on items in the primary color such as radio buttons
--c7-link-color	var(--c7-primary-color-text)
--c7-bg	#FFF	Main background color (ex. For body of Checkout, Profile, Cart, etc.)
--c7-bg-alt	#F7F8FA	Secondary background (ex. right-hand side of Checkout) Background colour for Checkout breadcrumbs
--c7-border-color	#E3E3E8
--c7-border-radius	4px	General border radius (ex. bordered sections of content, alerts, etc.) Separate border radius variable for items such as modals and fields
--c7-loading-bg	rgba(255, 255, 255, 0.5)	Loading spinner
--c7-modal-border-radius	8px	Modal window border radius
--c7-modal-shadow	0 2px 20px 0 rgba(0, 0, 0, 0.1)	Modal window box shadow
--c7-overlay-bg	rgba(0, 0, 0, 0.1)	Content overlay color when modal is open
--c7-progress-bar	var(--c7-primary-color)	Highlight color for completed progress
--c7-pill-bg	#F3F6FF	#F3F6FF
--c7-pill-text-color	var(--c7-primary-color-text)	#3251AE

Forms

Variable	Default Value
--c7-field-bg	#FFF
--c7-field-border-radius	4px
--c7-field-border-color	#B2B2B8
--c7-field-focus-color	rgba(0, 0, 0, 0.07)
--c7-field-option-selected-color	var(--c7-primary-color)
--c7-field-option-focus-color	var(--c7-primary-color-focus)
--c7-field-placeholder	#B2B2B8
--c7-field-dropdown-shadow	2px 2px 10px 0 rgb(0 0 0 / 8%)

Buttons

Variable	Example Value
--c7-primary-button-bg	var(--c7-primary-color)
--c7-primary-button-bg-hover	var(--c7-primary-color-dark)
--c7-primary-button-text-color	#FFF
--c7-alt-button-bg	#DEDFE3
--c7-alt-button-bg-hover	#CECFD4
--c7-alt-button-text-color	#232324
--c7-button-border-radius	4px

Messages

Variable	Example Value	Usage
--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

Header

Variable	Default Value	Usage
--c7-header-text-color	#232324	Login / cart widget text color
--c7-notification	#CA0505 (Red)	Account widget - Logged in notification marker
--c7-cart-count-bg	var(--c7-primary-color)	Cart widget - Item count background
--c7-cart-count-bg-focus	var(--c7-primary-color-focus)	Cart widget - border around circle when focusing
--c7-cart-count-text-color	#FFF	Cart widget - text colour
--c7-side-cart-shadow	0 0 15px 5px rgb(0 0 0 / 10%)
--c7-dropdown-border-radius	8px	Account widget - Logged in dropdown menu
--c7-dropdown-shadow	0 1px 7px 0 rgb(0 0 0 / 15%)	Account widget - shadow
--c7-dropdown-hover	#E6E8ED	Account widget - When hovering on a menu item

Account Blocks

Variable	Default Value	Usage
--c7-block-bg	var(--c7-bg)	Blocks of content displayed in the Profile (Dashboard, Shipping Addresses, etc.) and on the Checkout "Review" step.
--c7-block-border-color	var(--c7-border-color)
--c7-block-border-radius	var(--c7-border-radius)
--c7-block-shadow	0px 1px 3px 0px rgba(222, 222, 227, 0.3)