Colors
Customize color settings for backgrounds, text, and buttons throughout a store.
Primary colors
Background
Apply color settings to change a store's background color.
Gradient
To display a background gradient instead of a simple color, use the given item.
Base
This item changes the color of the following elements:
Header: navigation menu items, date, contact details
Footer: copyright text, input text, paragraphs, and menu items
Dynamic sections: descriptive text of the blocks and sections, inputs, dividing line
Note! The color will be applied to the description with the transparent color set in the corresponding section. To apply color individually, check whether the section contains color settings.
Popups: text and border of the Newsletter popup; main text and button text/border of the Cookie popup; title, description, and border of the Age verification popup
Tip: When changing the "Base" color, ensure hex codes are selected in the "Light contrast" or "Dark contrast" color pickers to properly colorize the theme elements, such as the "Buy it now" button.
Product page: product vendor, SKU, stock status, description, content text, input text, and the background of the "Buy it now" button
Collection page: breadcrumbs, collection description, product card details, input text, filter items, and variant pickers
Blogs page: text content, pagination
Blog posts page: text content
Cart page: headings, product name and price, input text, taxes text, free shipping text, and cart countdown
Accent
Use the paint palette to adjust the color for the listed elements:
Header / Footer: active menu items (on mouse hover)
SVG icons: "Contact" block
Cart counter: background color
"Categories" button: "Popup menu with search" menu type
"Add to cart": the background color of the button on product pages and the "Featured product" section, and the active tab title
Blogs page: date, author, and pagination (active page)
Blog posts page: date
Cart drawer / Cart page: number of products added to the cart and background of the "Checkout" button
Other elements: "Chat links" button, video play button in sections/blocks, "Back to top" button (Footer):
Contrast on light
Use this color picker to set the text color for the theme elements with a dark background.
Example: If the Announcement bar, "Sale" badge, checkout buttons, etc., have a dark background (red, black, blue, etc.), add the contrast light hex code for the given item to change the text color as needed.
Contrast on dark
In the following color picker, specify the text color of the theme elements with a light background.
Example: If the product variants, buttons, input fields, etc., have a light background (grey, white, beige, etc.), add the contrast hex code for the given item to change the text color as needed.
Line
Dividing line between sections, top separator line in the Header, testimonials border, and unused stars.
Icon
Header icons: search (magnifying glass), account, cart, number of products added to the cart, SVG icon color
Footer: social icons and selector arrow (currency and language selectors), subscription input arrow
Sections / Blocks: video play button, icons, review stars, etc.
Text colors
Headings
Footer: blocks' headings
Sections / Blocks:
Note! The color is applied to all the titles and headings, with the transparent color set in the corresponding section. To use color individually, check whether the section contains color settings.
Product page: product title, option name, block titles
Collection page: collection heading, filtering headings, number of products displayed in the particular collection
Collection list page: page title, collection headings
Pages: page title, section title
Blogs page: page title, blog heading
Blog posts page: page title, headings of paragraphs, and title of the Comments section
Cart page / Cart drawer: page title, subtotal text and price, and Notes title (Cart drawer):
Body
Note! The "Body" color settings override the "Base" item settings in the "Primary colors" subsection for the Header, Footer, sections, pages, and pop-ups.
Header: menu items, tiles background on mouse hover, date, and contact text
Sections: description of the sections/blocks and product title
Footer: navigation links, description, and the copyright text
Popups: heading and border of the Newsletter pop-up; main text of the Cookie pop-up; heading and description of the Age verification pop-up
Product page: breadcrumbs, SKU, vendor, product description, tab content text, tax text, stock status, Free shipping progress bar text, Delivery countdown text, and block text
Collection page: breadcrumbs, collection description, product card details, input text, filter items, price slider
Collection list page: breadcrumbs, page description, and collection description
Blogs page: breadcrumbs, text content, pagination
Blog posts page: text content
Cart page: breadcrumbs, headings, product details, taxes, and terms texts
Link
This item changes the color of the following elements:
Footer: navigation links on mouse hover
Link redirection: entire store
Price
This item changes the color of the main price on product pages and product cards.
Sale priсe
Use the option to change the color of the sale price on product pages and product cards.
Field colors
Background / Border
To colorize the background of the input fields and the border of all related elements in a store, choose colors for the listed items.
Background on hover / Border on hover
Change the background and border colors of the input fields when the mouse is over a field.
Icon on hover
Change the icon color of the subscription form; the icons of the comment form on mouse hover; and the "-"/"+" symbols in the Quantity selector.
Button colors
Tip: If you want to edit the button's colors using the global section, make sure the buttons do not use colors directly from the section settings. Choose the button style in the corresponding section/block. For more details, check the following help page.
Primary
This item changes the color of buttons that use the "Primary" style, applied individually to each theme section or block.
Additionaly, this item changes the background color of the "Add to cart" button in the sticky panel on product pages, in the "Featured product" section, and the "Continue shopping" button.
Secondary
Use the given color picker to set the color of the buttons with the "Secondary" style.
Moreover, this item changes the color of buttons with a transparent background, such as the confirmation buttons of the Comment form on the Blog posts page and the reviews button.
Link style
Apply a color or hex code for the element to colorize the link-style buttons. The color is applied to theme sections or blocks that use the corresponding option, as well as to buttons revealed as links:
"Featured product" section: the "View the full product details" button in the
Product page: the "Ask a question popup", "Share", and "Popup"
Collection page: the "Show filter"
Cart drawer: link buttons
Other colors
Discount
Change the discount color if you created discounts in your Shopify admin -> Discounts.
Shadow
Use the option to add a slight shadow to drop-downs, such as the Sorting order or language selector.
Overlay
This option allows you to change the background color of the drop-down menu in the Header (except for the Mega Menu) and other theme elements, such as the "Cart drawer", the "Sticky panel", the "Ask a question popup", and the "Popup" blocks on product pages.
Overlay opacity
Use the scale from 0 to 50% to adjust the color saturation.
The option adds a transparent color to the page when drawers are opened.
Product page
Buy it now button
Add a hex code or select a color in the current color picker to colorize the accelerated checkout buttons on product pages and the "Featured product" section.
Last updated