Overriding Commerce7 Styles

🚧

V2 is not yet available for our general users.

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 to your own file to make changes. Make sure to delete the line of any variables that you're not overriding.

You can reference more information about each variable 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)

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

--c7-info-bg

#F1F1F4 (Light grey)

--c7-error

#CA0505 (Red)

--c7-error-bg

#FFEBEB (Light red)

--c7-warning

#FBA213 (Orange)

--c7-warning-bg

#FFF6E5 (Light orange)

--c7-success

#016047 (Green)

--c7-success-bg

#E8FCF7 (Light green)

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)

--c7-cart-count-text-color

#FFF

--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%)

--c7-dropdown-hover

#E6E8ED

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)