How do I change the button colors?
How to change button colors in Combine: buttons follow the body text color, the Buy buttons block has its own color, and the rest needs custom CSS.
Applies to: Combine 4.2.0 and later. Added in: Combine 1.0.0. Last checked: 2026-10-13 against Combine 4.2.0.
Combine has no store-wide button color setting. Buttons take their color from Theme settings → Colors → Body → Text. A few blocks have their own button color, and anything else needs custom CSS.
Where to find it: Theme settings → Colors → Body → Text
Why buttons follow the text color
- A solid button uses the body Text color as its background. Its label is black or white, whichever Combine picks for contrast.
- An outline button uses the same color for its border and label.
- We keep one color for text and buttons so that a store looks consistent with few settings. Changing Theme settings → Colors → Body → Text changes the text and the buttons together.
Changing button colors with theme settings
These settings change one kind of button without touching the text color:
The add to cart button on the product page
Open Products → Default product → Product page, select the Buy buttons block, and pick a color in Custom colors → Background. The label turns black or white for contrast. The Buy buttons blocks of Featured product and the Quick view have the same setting.
Buttons in flex sections
In a Flex slideshow, Flex grid, Flex cards or Flex columns section, select the Button block or the Quick buy button block and pick a color in Custom colors → Background.
The sticky add to cart bar
On the product page, select the Product page section and set Sticky add to cart → Background color and Text color.
Every button at once
Change Theme settings → Colors → Body → Text. This also changes the color of all body text.
The Products set and Products bundle panels, the announcement bar and the popups also have color settings of their own.
Changing every button with custom CSS
Krown support does not provide help with custom code. The CSS below is a starting point that you or a developer adapt and maintain.
To give every theme button its own colors, paste this into Theme settings → Custom CSS and replace the three colors:
.button {
background: yellow !important;
color: black !important;
border-color: black !important;
}The code applies to the whole store, including outline buttons. Custom CSS is a Shopify feature of the theme editor; Shopify checks the CSS when you save.
Changing the buttons of one section
Paste the same CSS into the Custom CSS field of that section instead (select the section in the theme editor, then scroll to the end of its settings). Shopify applies CSS in that field to the section only. See Custom CSS and code.
Why did my text change color when I changed the button color?
Because both use Theme settings → Colors → Body → Text. Combine draws solid buttons with the body text color. To change only the buttons, use the button colors of the blocks above or custom CSS.
Related pages
- Colors theme settings: the body text color that buttons use.
- Forms and buttons theme settings: button border width and corner radius.
- Product page: the Buy buttons block and the sticky add to cart bar.
- Button block: the button of flex sections.
- Custom CSS and code: where custom CSS goes.
Combine FAQ
Answers to common Combine questions, phrased as questions: bundles and discounts, popups, product and collection pages, and what Combine does not do.
Troubleshoot bundles and discounts
Fix Combine product sets and bundles: discounts not applied, a set that cannot be added to the cart, sold out products and discount codes.