Colors
Colors allows you to choose a color for background, text, button, etc.
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.
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.
Shadow
Set the shadow color.
Primary button
Background
Set the background color for the button.
Label
Set the color for the button label.
Outline
Set the color for the button's outline.
Outline gradient
Set the gradient color for the button's outline.
Secondary button
Label
Set the color for the button label.
Outline
Set the color for the secondary button's outline.
Outline gradient
Set the gradient color for the secondary button's outline.
Icon gradient
First color
Set the color first.
Second color
Set the color second.
Main page
Heading
Set the color for the heading.
Create the color schemes as shown below to ensure the theme's colors match those on the demo store.
Scheme 1
The default color scheme applied to elements that are not assigned a color.
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
Scheme 2 is applied to the Announcement bar section and Product card.
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
Scheme 3 is applied to the first Image banner section on the about us page.
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
Scheme 4 is applied to the following sections: Collage, Shop the look (Banner left).
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
Scheme 5 is applied to the Sale badge on product card.
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
Scheme 6 is applied to the Multicolumn section.
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
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.
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
Scheme 8 is applied to the Social icons.
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
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.
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
Scheme 10 is applied to the Promotion popup section.
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
Scheme 11 is applied to the Blog card.
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
Last updated
