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: #9312CE
Shadow
Color: Transparent
Primary button
Background
Color code: #141313
Label
Color code: #FFFFFF
Outline
Color code: #6925F1
Outline gradient
Color code: linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)
Secondary button
Label
Color code: #FFFFFF
Outline
Color code: #6925F1
Outline gradient
Color code: linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)
Icon gradient
First color
Color code: #9312CE
Second color
Color code: #1BD1FF
Main page
Heading
Color code: #01FA59
Scheme 2
Scheme 2 is applied to the Announcement bar section and Product card.
Background
Color code: #6925F1
Background gradient
No color chosen
Primary text
Color code: #FFFFFF
Secondary text
Color code: #E54C4C
Shadow
Color: Transparent
Primary button
Background
Color code: #6925F1
Label
Color code: #FFFFFF
Outline
Color code: #6925F1
Outline gradient
No color chosen
Secondary button
Label
Color code: #FFFFFF
Outline
Color code: #9312CE
Outline gradient
Color code: linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)
Icon gradient
First color
Color code: #5FB2FF
Second color
Color code: #8576FB
Main page
Heading
Color code: #FFFFFF
Scheme 3
Scheme 3 is applied to the first Image banner section on the about us page.
Background
Color: Transparent
Background gradient
No color chosen
Primary text
Color code: #FFFFFF
Secondary text
Color code: #9312CE
Shadow
Color: Transparent
Primary button
Background
Color code: #141313
Label
Color code: #FFFFFF
Outline
Color code: #FFFFFF
Outline gradient
No color chosen
Secondary button
Label
Color code: #FFFFFF
Outline
Color code: #FFFFFF
Outline gradient
Color code: linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)
Icon gradient
First color
Color code: #5FB2FF
Second color
Color code: #8576FB
Main page
Heading
Color code: #FFFFFF
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
Background
Color code: #141313
Background gradient
No color chosen
Primary text
Color code: #FFFFFF
Secondary text
Color code: #000000
Shadow
Color: Transparent
Primary button
Background
Color code: #FFFFFF
Label
Color code: #FFFFFF
Outline
Color code: #FFFFFF
Outline gradient
Color: Transparent
Secondary button
Label
Color code: #000000
Outline
Color code: #7344D0
Outline gradient
Color code: linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)
Icon gradient
First color
Color code: #5FB2FF
Second color
Color code: #8576FB
Main page
Heading
Color code: #FFFFFF
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
Shadow
Color: Transparent
Primary button
Background
Color code: #121212
Label
Color code: #FFFFFF
Outline
Color code: #FFFFFF
Outline gradient
No color chosen
Secondary button
Label
Color code: #FFFFFF
Outline
Color code: #9312CE
Outline gradient
Color code: linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)
Icon gradient
First color
Color code: #5FB2FF
Second color
Color code: #8576FB
Main page
Heading
Color code: #FFFFFF
Scheme 6
Scheme 6 is applied to the Multicolumn section.
Background
Color code: #FFFFFF
Background gradient
Color code: linear-gradient(90deg, rgba(0, 59, 245, 1), rgba(86, 172, 209, 1) 49.5%, rgba(221, 255, 51, 1) 100%)
Primary text
Color code: #FFFFFF
Secondary text
Color code: #FFFFFF
Shadow
Color: Transparent
Primary button
Background
Color code: #FFFFFF
Label
Color code: #000000
Outline
Color code: #FFFFFF
Outline gradient
No color chosen
Secondary button
Label
Color code: #FFFFFF
Outline
Color code: #FFFFFF
Outline gradient
Color code: linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)
Icon gradient
First color
Color code: #5FB2FF
Second color
Color code: #8576FB
Main page
Heading
Color code: #FFFFFF
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
Color code: linear-gradient(90.26deg, rgba(222, 254, 10, 1) 2.91%, rgba(115, 252, 77, 1) 50.46%, rgba(2, 250, 89, 1) 99.96%)
Primary text
Color code: #141313
Secondary text
Color code: #FFFFFF
Shadow
Color: Transparent
Primary button
Background
Color code: #141313
Label
Color code: #FFFFFF
Outline
Color code: #FFFFFF
Outline gradient
No color chosen
Secondary button
Label
Color code: #FFFFFF
Outline
Color code: #FFFFFF
Outline gradient
Color code: linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)
Icon gradient
First color
Color code: #5FB2FF
Second color
Color code: #8576FB
Main page
Heading
Color code: #FFFFFF
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
Shadow
Color: Transparent
Primary button
Background
Color code: #141313
Label
Color code: #FFFFFF
Outline
Color code: #FFFFFF
Outline gradient
No color chosen
Secondary button
Label
Color code: #FFFFFF
Outline
Color code: #9312CE
Outline gradient
Color code: linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)
Icon gradient
First color
Color code: #9312CE
Second color
Color code: #1BD1FF
Main page
Heading
Color code: #FFFFFF
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
Shadow
Color code: #7344D0
Primary button
Background
Color code: #FFFFFF
Label
Color code: #000000
Outline
Color code: #FFFFFF
Outline gradient
No color chosen
Secondary button
Label
Color code: #FFFFFF
Outline
Color code: #7344D0
Outline gradient
Color code: linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)
Icon gradient
First color
Color code: #5FB2FF
Second color
Color code: #8576FB
Main page
Heading
Color code: #FFFFFF
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
Shadow
Color: Transparent
Primary button
Background
Color code: #7344D0
Label
Color code: #FFFFFF
Outline
Color code: #141313
Outline gradient
No color chosen
Secondary button
Label
Color code: #FFFFFF
Outline
Color code: #9312CE
Outline gradient
Color code: linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)
Icon gradient
First color
Color code: #5FB2FF
Second color
Color code: #8576FB
Main page
Heading
Color code: #FFFFFF
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
Shadow
Color: Transparent
Primary button
Background
Color code: #141313
Label
Color code: #FFFFFF
Outline
Color code: #FFFFFF
Outline gradient
No color chosen
Secondary button
Label
Color code: #FFFFFF
Outline
Color code: #9312CE
Outline gradient
Color code: linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)
Icon gradient
First color
Color code: #5FB2FF
Second color
Color code: #8576FB
Main page
Heading
Color code: #FFFFFF
Scheme 12
Scheme 12 is applied to the Shop the look section.
Background
Color code: #141313
Background gradient
No color chosen
Primary text
Color code: #DEFE0A
Secondary text
Color code: #8A52FE
Shadow
Color: Transparent
Primary button
Background
Color code: #FFFFFF
Label
Color code: #6925F1
Outline
Color code: #6925F1
Outline gradient
No color chosen
Secondary button
Label
Color code: #FFFFFF
Outline
Color code: #6925F1
Outline gradient
Color code: linear-gradient(90deg, rgba(147, 18, 206, 1) 9.06%, rgba(133, 178, 230, 1) 49.67%, rgba(27, 209, 255, 1) 100%)
Icon gradient
First color
Color code: #9312CE
Second color
Color code: #1BD1FF
Main page
Heading
Color code: #01FA59
Last updated
