Colors theme settings
The Colors theme settings of Combine set the header, body and footer colors; sections can override them with their own design colors.
Applies to: Combine 4.2.0 and later. Added in: Combine 1.0.0. Last checked: 2026-10-13 against Combine 4.2.0.
The Colors theme settings set the store-wide colors of three areas: the header, the body and the footer. Combine has no color schemes. Most sections have their own Section design colors that replace the body colors for that section.
Where to find it: Theme settings → Colors
Header
- Background and Text color the Header section.
- The transparent header uses its own Text color, set in the Header section (see Header section).
Body
The body colors cover everything between the header and the footer: page content, drawers (cart, search, menu) and popups.
- Primary background is the page background.
- Secondary background fills small panels on that background: the free shipping notice and other widgets in the cart, the bottom of the cart drawer, search highlights and the article comments.
- Text colors the text and links. Combine also builds the borders, the muted text and the form field outlines from it, as lighter shades of the same color.
Footer
- Background and Text color the Footer section in the Footer group.
Where buttons get their color
Buttons have no color setting of their own. A solid button uses the body Text color as its background. Its label is black or white, whichever Combine picks for contrast with that color.
Changing the body Text color therefore changes the text and the buttons together. To give buttons another color, see How do I change the button colors?.
Why are my buttons the same color as my text?
Because Combine draws solid buttons with the body Text color, by design. The add to cart button on the product page has its own color in the Buy buttons block, and the flex section Button block has Custom colors. Every other button follows the text color unless you add custom CSS.
How do I give one section a different background?
Open the section in the theme editor and set the colors under Section design. They apply to that section only and leave Theme settings → Colors unchanged. See General section styling.
All Colors settings
Every setting in this group, with its type and default.
Colors theme settings: Header
Where to find it: Theme settings → Colors → Header
Background (color, default: #FFFFFF): Sets the background of the Header section.
Text (color, default: #000000): Sets the text, icon and border color of the Header section.
Colors theme settings: Body
Where to find it: Theme settings → Colors → Body
Primary background (color, default: #FFFFFF): Sets the page background, also used by drawers and popups.
Secondary background (color, default: #EEF1F2): Sets the background of small panels on the page: the cart widgets, the bottom of the cart drawer, search highlights and article comments.
Text (color, default: #000000): Sets the text and link color, and the background of solid buttons. Borders and form field outlines are lighter shades of it.
Colors theme settings: Footer
Where to find it: Theme settings → Colors → Footer
Background (color, default: #DFE2E3): Sets the background of the Footer section.
Text (color, default: #000000): Sets the text, link and border color of the Footer section.
Related pages
- How do I change the button colors?: the settings and CSS that change button colors.
- General section styling: the Section design colors of each section.
- Header section: the transparent header colors.
- Combine presets: the colors each theme style sets.
Typography theme settings
The Typography theme settings of Combine set the fonts, base sizes and line heights of headings, body text and section titles.
Forms and buttons theme settings
The Forms & buttons theme settings of Combine set the border width and corner radius of form fields and buttons across the store.