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.

1. From your Shopify admin, go to Online Store -> Themes.

2. Find the theme that you want to edit, and then click Customize.

3. Click Theme Settings -> Colors.

4. 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.
Shadow	Set the shadow color.

Primary button

Setting	Description
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

Setting	Description
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

Setting	Description
First color	Set the color first.
Second color	Set the color second.

Main page

Setting	Description
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.

Setting	Description
Background	Color code: #141313
Background gradient	No color chosen
Primary text	Color code: #FFFFFF
Secondary text	Color code: #9312CE
Shadow	Color: Transparent

Primary button

Setting	Description
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

Setting	Description
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

Setting	Description
First color	Color code: #9312CE
Second color	Color code: #1BD1FF

Main page

Setting	Description
Heading	Color code: #01FA59

Scheme 2

Scheme 2 is applied to the Announcement bar section and Product card.

Setting	Description
Background	Color code: #6925F1
Background gradient	No color chosen
Primary text	Color code: #FFFFFF
Secondary text	Color code: #E54C4C
Shadow	Color: Transparent

Primary button

Setting	Description
Background	Color code: #6925F1
Label	Color code: #FFFFFF
Outline	Color code: #6925F1
Outline gradient	No color chosen

Secondary button

Setting	Description
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

Setting	Description
First color	Color code: #5FB2FF
Second color	Color code: #8576FB

Main page

Setting	Description
Heading	Color code: #FFFFFF

Scheme 3

Scheme 3 is applied to the first Image banner section on the about us page.

Setting	Description
Background	Color: Transparent
Background gradient	No color chosen
Primary text	Color code: #FFFFFF
Secondary text	Color code: #9312CE
Shadow	Color: Transparent

Primary button

Setting	Description
Background	Color code: #141313
Label	Color code: #FFFFFF
Outline	Color code: #FFFFFF
Outline gradient	No color chosen

Secondary button

Setting	Description
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

Setting	Description
First color	Color code: #5FB2FF
Second color	Color code: #8576FB

Main page

Setting	Description
Heading	Color code: #FFFFFF

Scheme 4

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

Setting	Description
Background	Color code: #141313
Background gradient	No color chosen
Primary text	Color code: #FFFFFF
Secondary text	Color code: #000000
Shadow	Color: Transparent

Primary button

Setting	Description
Background	Color code: #FFFFFF
Label	Color code: #FFFFFF
Outline	Color code: #FFFFFF
Outline gradient	Color: Transparent

Secondary button

Setting	Description
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

Setting	Description
First color	Color code: #5FB2FF
Second color	Color code: #8576FB

Main page

Setting	Description
Heading	Color code: #FFFFFF

Scheme 5

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
Shadow	Color: Transparent

Primary button

Setting	Description
Background	Color code: #121212
Label	Color code: #FFFFFF
Outline	Color code: #FFFFFF
Outline gradient	No color chosen

Secondary button

Setting	Description
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

Setting	Description
First color	Color code: #5FB2FF
Second color	Color code: #8576FB

Main page

Setting	Description
Heading	Color code: #FFFFFF

Scheme 6

Scheme 6 is applied to the Multicolumn section.

Setting	Description
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

Setting	Description
Background	Color code: #FFFFFF
Label	Color code: #000000
Outline	Color code: #FFFFFF
Outline gradient	No color chosen

Secondary button

Setting	Description
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

Setting	Description
First color	Color code: #5FB2FF
Second color	Color code: #8576FB

Main page

Setting	Description
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.

Setting	Description
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

Setting	Description
Background	Color code: #141313
Label	Color code: #FFFFFF
Outline	Color code: #FFFFFF
Outline gradient	No color chosen

Secondary button

Setting	Description
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

Setting	Description
First color	Color code: #5FB2FF
Second color	Color code: #8576FB

Main page

Setting	Description
Heading	Color code: #FFFFFF

Scheme 8

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
Shadow	Color: Transparent

Primary button

Setting	Description
Background	Color code: #141313
Label	Color code: #FFFFFF
Outline	Color code: #FFFFFF
Outline gradient	No color chosen

Secondary button

Setting	Description
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

Setting	Description
First color	Color code: #9312CE
Second color	Color code: #1BD1FF

Main page

Setting	Description
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.

Setting	Description
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

Setting	Description
Background	Color code: #FFFFFF
Label	Color code: #000000
Outline	Color code: #FFFFFF
Outline gradient	No color chosen

Secondary button

Setting	Description
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

Setting	Description
First color	Color code: #5FB2FF
Second color	Color code: #8576FB

Main page

Setting	Description
Heading	Color code: #FFFFFF

Scheme 10

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
Shadow	Color: Transparent

Primary button

Setting	Description
Background	Color code: #7344D0
Label	Color code: #FFFFFF
Outline	Color code: #141313
Outline gradient	No color chosen

Secondary button

Setting	Description
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

Setting	Description
First color	Color code: #5FB2FF
Second color	Color code: #8576FB

Main page

Setting	Description
Heading	Color code: #FFFFFF

Scheme 11

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
Shadow	Color: Transparent

Primary button

Setting	Description
Background	Color code: #141313
Label	Color code: #FFFFFF
Outline	Color code: #FFFFFF
Outline gradient	No color chosen

Secondary button

Setting	Description
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

Setting	Description
First color	Color code: #5FB2FF
Second color	Color code: #8576FB

Main page

Setting	Description
Heading	Color code: #FFFFFF

Scheme 12

Scheme 12 is applied to the Shop the look section.

Setting	Description
Background	Color code: #141313
Background gradient	No color chosen
Primary text	Color code: #DEFE0A
Secondary text	Color code: #8A52FE
Shadow	Color: Transparent

Primary button

Setting	Description
Background	Color code: #FFFFFF
Label	Color code: #6925F1
Outline	Color code: #6925F1
Outline gradient	No color chosen

Secondary button

Setting	Description
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

Setting	Description
First color	Color code: #9312CE
Second color	Color code: #1BD1FF

Main page

Setting	Description
Heading	Color code: #01FA59