Colors
Schemes
Color schemes can be applied to sections throughout your online store. Each scheme is a set of colors for backgrounds, text, links, buttons and badges. To use a scheme, select it in the Color scheme setting of a section or block. Click a scheme to edit its colors, or use Add Scheme to create a new one.
- Access Theme Customization:
- Log in to your Shopify admin dashboard.
- Navigate to “Online Store” and select “Themes”.
- Find the theme you want to customize and click “Customize” next to it.
- Access Color Settings:
Within the theme customization panel, locate and click on the “Color Settings” option.
- Edit Color Schemes:
- If you wish to modify an existing color scheme, click on it. To create a new scheme, click “Add Scheme”.
- Adjust Color Settings:
- Within the selected color scheme, locate the specific content type (e.g., background, text color, button color...) you want to change.
- Click on the color swatch associated with that content type.
- Select or Enter Color Values:
- Choose a new color by entering a hexadecimal color code directly into the text field, or use the color picker to visually select your desired color.
- For transparency, clear the hex code field to set the color as transparent.
- Save Changes:
After setting your desired colors, click “Save” to apply the changes to your color scheme.
Light/Dark Mode
Toggle between day and night modes to suit your preference.
General
| Setting | Description |
|---|---|
| Background | Sets the main background color of sections that use this scheme. |
| Background secondary | Sets the secondary background color, used for elements placed on top of the main background, such as cards and boxes. |
| Heading | Sets the color of headings. |
| Text | Sets the color of body text. |
| Accent | Sets the accent color used to highlight elements, such as subheadings, accent-colored text, icons and decorative details. |
| Links | Sets the color of text links. |
| Links hover | Sets the color of text links when a visitor hovers over them. |
| Overlay color | Sets the color of the overlay placed over images in banners and similar sections to keep text readable. The overlay opacity is set in the section itself. |
Primary button
| Setting | Description |
|---|---|
| Background | Sets the background color of primary buttons. |
| Text | Sets the text color of primary buttons. |
| Border | Sets the border color of primary buttons. |
| Hover background | Sets the background color of primary buttons when a visitor hovers over them. |
| Hover text | Sets the text color of primary buttons on hover. |
| Hover border | Sets the border color of primary buttons on hover. |
Secondary button
| Setting | Description |
|---|---|
| Background | Sets the background color of secondary buttons. |
| Text | Sets the text color of secondary buttons. |
| Border | Sets the border color of secondary buttons. |
| Hover background | Sets the background color of secondary buttons when a visitor hovers over them. |
| Hover text | Sets the text color of secondary buttons on hover. |
| Hover border | Sets the border color of secondary buttons on hover. |
Outline button
Outline buttons have no background fill, so only the text and border colors are set.
| Setting | Description |
|---|---|
| Text | Sets the text color of outline buttons. |
| Border | Sets the border color of outline buttons. |
| Hover text | Sets the text color of outline buttons when a visitor hovers over them. |
| Hover border | Sets the border color of outline buttons on hover. |
Inline button
Inline buttons look like text links, so only the text colors are set.
| Setting | Description |
|---|---|
| Text | Sets the text color of inline buttons. |
| Hover text | Sets the text color of inline buttons when a visitor hovers over them. |
Functional button
Functional buttons are used for sliders, breadcrumbs and other buttons with an icon.
| Setting | Description |
|---|---|
| Background | Sets the background color of functional buttons. |
| Text | Sets the text and icon color of functional buttons. |
| Border | Sets the border color of functional buttons. |
| Hover background | Sets the background color of functional buttons when a visitor hovers over them. |
| Hover text | Sets the text and icon color of functional buttons on hover. |
| Hover border | Sets the border color of functional buttons on hover. |
Badge
| Setting | Description |
|---|---|
| Sale badge text | Sets the text color of the Sale badge shown on discounted products. |
| Sale badge background | Sets the background color of the Sale badge. |
| Sold out badge text | Sets the text color of the Sold out badge. |
| Sold out badge background | Sets the background color of the Sold out badge. |
| Custom badge text | Sets the text color of custom product badges, such as the badges created from product tags in Badge names and the pre-order badge. |
| Custom badge background | Sets the background color of custom product badges. |
| Article badge text | Sets the text color of the tag badges shown on blog article cards. |
| Article badge background | Sets the background color of the tag badges on blog article cards. |
Light/Dark mode
Visitors can switch the store between light and dark colors. Set up sections for light mode; the dark version is built from the scheme pairs below.
| Setting | Description |
|---|---|
| Enable light/dark mode | Lets visitors switch between light and dark colors. When it is turned on, choose where the switch appears in Switch placement. Default: On. |
| Default mode | Defines the mode used when the device has no preference or Follow device setting is turned off. Light or Dark. A visitor's own choice is remembered in their browser. Default: Light. |
| Follow device setting | New visitors start in the mode their device uses. Turn it off to always start in the Default mode. The theme editor always previews the default mode. Default: On. |
Switch placement
Choose where visitors can find the light/dark switch. You can turn on several places at once.
| Setting | Description |
|---|---|
| In header icons | Shows the switch as an icon next to the other header icons (search, account, cart). Default: On. |
| In announcement bar | Shows the switch in the announcement bar. Default: Off. |
| Floating button | Shows a floating switch button in the corner of the page, visible while scrolling. Default: On. |
Scheme pairs
In dark mode, every section that uses the in light mode scheme of a pair switches to the in dark mode scheme of that pair. Schemes that are not listed on the light side stay unchanged. Pick the same scheme on both sides to disable a pair. If a scheme is listed on the light side twice, the first pair is used.
| Setting | Description |
|---|---|
| Pair 1 | Sections using the scheme chosen in Pair 1: in light mode switch to the scheme chosen in Pair 1: in dark mode. Default: Scheme 1 → Scheme 6. |
| Pair 2 | Sections using the scheme chosen in Pair 2: in light mode switch to the scheme chosen in Pair 2: in dark mode. Default: Scheme 2 → Scheme 7. |
| Pair 3 | Sections using the scheme chosen in Pair 3: in light mode switch to the scheme chosen in Pair 3: in dark mode. Default: Scheme 3 → Scheme 7. |
| Pair 4 | Sections using the scheme chosen in Pair 4: in light mode switch to the scheme chosen in Pair 4: in dark mode. Default: Scheme 4 → Scheme 8. |
| Pair 5 | Sections using the scheme chosen in Pair 5: in light mode switch to the scheme chosen in Pair 5: in dark mode. Default: Scheme 5 → Scheme 2. |
| Pair 6 | Sections using the scheme chosen in Pair 6: in light mode switch to the scheme chosen in Pair 6: in dark mode. Default: Scheme 1 → Scheme 1 (the pair is disabled). |
Switch overlay animation
| Setting | Description |
|---|---|
| Switch overlay animation | Covers the page with a short full-screen overlay while the mode changes. Off uses a quick fade instead. Default: Off. |
| Overlay background when switching to light | Sets the background color of the overlay shown when a visitor switches to light mode. Available when Switch overlay animation is On. Default: #F1F1F1. |
| Overlay background when switching to dark | Sets the background color of the overlay shown when a visitor switches to dark mode. Available when Switch overlay animation is On. Default: #111111. |
| Overlay logo when switching to light | Uploads a logo displayed in the middle of the overlay when switching to light mode. Available when Switch overlay animation is On. |
| Overlay logo when switching to dark | Uploads a logo displayed in the middle of the overlay when switching to dark mode. Available after an overlay logo for light mode has been added. |
| Overlay logo width | Sets the width of the overlay logo on desktop. Range: 50–200 px. Default: 100 px. |
| Overlay logo width mobile | Sets the width of the overlay logo on mobile devices. Range: 30–130 px. Default: 80 px. |