Colors theme settings
The Colors theme settings define the color schemes used by every section, card and drawer in Seventh, plus the alert colors for errors and success.
Applies to: Seventh 4.0.0 and later. Added in: Seventh 1.0.0. Last checked: 2026-10-12 against Seventh 4.0.0.
The Colors theme settings define the store's color schemes. A color scheme is a named set of colors that you apply to a section, a card or some blocks. Here you also choose the default scheme, the drawer scheme and the alert colors.
Where to find it: Theme settings → Colors
How color schemes work
You edit the color schemes once in Theme settings → Colors, then choose a scheme in each section, card or drawer.
- Each scheme has a background color, a background gradient, a text color and primary and secondary button colors.
- The element takes all its colors from the scheme you choose.
- A card inside a section can use a different scheme, and each scheme applies only to its own level. A section in Scheme 1 can hold a card in Scheme 2, which shows its own background, text and buttons in Scheme 2.
A section's Color scheme is in its Section design settings. Cards have Color scheme in their Card style settings.
Tip: Most sections are using Scheme 1, while most cards are using Scheme 2 by default. If you want to do a "global" change to colors, you can edit these two color schemes without editing individually inside each section or card.
Default color scheme
Default color scheme is the fallback scheme. Seventh uses it:
- for the page background behind the sections, and on pages with little content;
- on the password page and the gift card page;
- as the frame of modals: the size chart and shipping policy modals on the product page, and the modal opened by the Popup button block.
Cards inside the Popovers and Modals sections have their own Color scheme setting.
Modals/drawers
Modals/drawers is the scheme of every drawer: the navigation, search, cart, filters and store pickup availability drawers. The customer account sign-in panel opened from the header also takes its colors from this scheme.
Alert colors
The Alert colors set the background and text of error and success messages, for example in contact and account forms, the cart and the discount code field. The message border uses the text color at 15 percent opacity.
The success text color setting is Succes text color (shown like this in the editor, a typo for "Success").
All Colors settings
Every setting in this group, with its type and default.
Color schemes (color schemes). Each color scheme has these colors:
- Background (color with transparency, default:
#ffffff) - Background gradient (gradient)
- Text (color, default:
#1d1d1d) - Buttons primary (color with transparency, default:
#1d1d1d) - Buttons secondary (color, default:
#ffffff)
Default color scheme (color scheme, default: Scheme 1): Sets the fallback color scheme: the page background behind sections, the password and gift card pages, and the frame of modals such as the size chart.
Modals/drawers (color scheme, default: Scheme 1): Sets the color scheme of all drawers (navigation, search, cart, filters, pickup availability) and of the customer account sign-in panel.
Colors theme settings: Alert colors
Where to find it: Theme settings → Colors → Alert colors
Error background (color, default: #FFE3E3): Sets the background of error messages in forms and the cart.
Error text color (color, default: #FF0000): Sets the text color of error messages. The message border uses this color at 15 percent opacity.
Success background (color, default: #d4edda): Sets the background of success messages, for example after a form is sent.
Succes text color (color, default: #155724): Sets the text color of success messages. The message border uses this color at 15 percent opacity.
Related pages
- General section styling: where each section picks its color scheme.
- Cart drawer section: a drawer that uses the Modals/drawers scheme.
- Buttons & forms theme settings: the shape and style of buttons that use the scheme's button colors.
Layout theme settings
The Layout theme settings set the maximum page width, the space between sections and the gap between cards and columns in Seventh.
Typography theme settings
The Typography theme settings choose the body, heading and accent fonts in Seventh and set their size, weight, line height and letter spacing.