Colors
Colors allows you to choose a color for background, text, button, etc.
Last updated
Colors allows you to choose a color for background, text, button, etc.
Last updated
To use color schemes, please configure your color schemes by following below : Set up color schemes.
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme Settings -> Colors.
Choose the color scheme that you want change.
| Setting | Description |
|---|---|
Background | Set the background color. |
Background gradient | Set the background gradient. |
Primary text | Set the color for the primary text. |
Secondary text | Set the color for the secondary text. |
Solid button background | Set the background color for the button. |
Solid button label | Set the color for the button label. |
Outline button | Set the color for the button's outline. |
Outline secondary button | Set the color for the secondary button's outline. |
Shadow | Set the shadow color. |
Create the color schemes as shown below to ensure the theme's colors match those on the demo store.
The default color scheme applied to elements that are not assigned a color.
| Setting | Description |
|---|---|
Background | Color code: #141313 |
Background gradient | No color chosen |
Primary text | Color code: #FFFFFF |
Secondary text | Color code: #8A52FE |
Solid button background | Color code: #141313 |
Solid button label | Color code: #FFFFFF |
Outline button | Color code: #FFFFFF |
Outline secondary button | Color code: #9312CE |
Shadow | Color: Transparent |
Scheme 2 is applied to the Announcement bar section and Product card.
| Setting | Description |
|---|---|
Background | Color code: #7344D0 |
Background gradient | No color chosen |
Primary text | Color code: #FFFFFF |
Secondary text | Color code: #E54C4C |
Solid button background | Color code: #DEDEDE |
Solid button label | Color code: #000000 |
Outline button | Color code: #DEDEDE |
Outline secondary button | Color code: #9312CE |
Shadow | Color: Transparent |
Scheme 3 is applied to the first Image banner section on the about us page.
| Setting | Description |
|---|---|
Background | Color code: Transparent |
Background gradient | No color chosen |
Primary text | Color code: #FFFFFF |
Secondary text | Color code: #9312CE |
Solid button background | Color code: #141313 |
Solid button label | Color code: #FFFFFF |
Outline button | Color code: #FFFFFF |
Outline secondary button | Color code: #FFFFFF |
Shadow | Color: Transparent |
Scheme 4 is applied to the following sections: Collage, Shop the look (Banner left).
| Setting | Description |
|---|---|
Background | Color code: #141313 |
Background gradient | No color chosen |
Primary text | Color code: #FFFFFF |
Secondary text | Color code: #000000 |
Solid button background | Color code: #FFFFFF |
Solid button label | Color code: #000000 |
Outline button | Color code: #000000 |
Outline secondary button | Color code: #7344D0 |
Shadow | Color: Transparent |
Scheme 5 is applied to the Sale badge on product card.
| Setting | Description |
|---|---|
Background | Color code: #DB0C0C |
Background gradient | No color chosen |
Primary text | Color code: #FFFFFF |
Secondary text | Color code: #000000 |
Solid button background | Color code: #141313 |
Solid button label | Color code: #FFFFFF |
Outline button | Color code: #FFFFFF |
Outline secondary button | Color code: #9312CE |
Shadow | Color: Transparent |
Scheme 6 is applied to the Multicolumn section.
| Setting | Description |
|---|---|
Background | Color code: #FFFFFF |
Background gradient | Css code: linear-gradient(90deg, rgba(63, 224, 208, 1) 2.91%, rgba(222, 248, 95, 1) 99.96%) |
Primary text | Color code: #000000 |
Secondary text | Color code: #000000 |
Solid button background | Color code: #FFFFFF |
Solid button label | Color code: #000000 |
Outline button | Color code: #FFFFFF |
Outline secondary button | Color code: #FFFFFF |
Shadow | Color: Transparent |
Scheme 7 is applied to the Running text with image section, the third Rich text section on the about us page, Add To Card button on product page and Featured Product section and Checkout button.
| Setting | Description |
|---|---|
Background | Color code: #FFFFFF |
Background gradient | Css code: linear-gradient(90deg, rgba(63, 224, 208, 1) 2.91%, rgba(222, 248, 95, 1) 50.96%) |
Primary text | Color code: #000000 |
Secondary text | Color code: #FFFFFF |
Solid button background | Color code: #FFFFFF |
Solid button label | Color code: #141313 |
Outline button | Color code: #141313 |
Outline secondary button | Color code: #FFFFFF |
Shadow | Color: Transparent |
Scheme 8 is applied to the Social icons.
| Setting | Description |
|---|---|
Background | Color code: #141313 |
Background gradient | No color chosen |
Primary text | Color code: #C7AFFF |
Secondary text | Color code: #90BDF2 |
Solid button background | Color code: #141313 |
Solid button label | Color code: #FFFFFF |
Outline button | Color code: #FFFFFF |
Outline secondary button | Color code: #9312CE |
Shadow | Color: Transparent |
Scheme 9 is applied to the Contact form section, the second Rich text section on the about us page and the Free shipping caculator function.
| Setting | Description |
|---|---|
Background | Color code: #1B1A1A |
Background gradient | No color chosen |
Primary text | Color code: #FFFFFF |
Secondary text | Color code: #FFFFFF |
Solid button background | Color code: #FFFFFF |
Solid button label | Color code: #000000 |
Outline button | Color code: #FFFFFF |
Outline secondary button | Color code: #7344D0 |
Shadow | Color: Transparent |
Scheme 10 is applied to the Promotion popup section.
| Setting | Description |
|---|---|
Background | Color code: #141313 |
Background gradient | No color chosen |
Primary text | Color code: #FFFFFF |
Secondary text | Color code: #8A8A8A |
Solid button background | Color code: #7344D0 |
Solid button label | Color code: #FFFFFF |
Outline button | Color code: #141313 |
Outline secondary button | Color code: #9312CE |
Shadow | Color: Transparent |
Scheme 11 is applied to the Blog card.
| Setting | Description |
|---|---|
Background | Color code: #1B1A1A |
Background gradient | No color chosen |
Primary text | Color code: #FFFFFF |
Secondary text | Color code: #FFFFFF |
Solid button background | Color code: #141313 |
Solid button label | Color code: #FFFFFF |
Outline button | Color code: #FFFFFF |
Outline secondary button | Color code: #9312CE |
Shadow | Color: Transparent |
