General Colors

Learn how to use the color options so you to fully brand your store for visual appeal and consistency.
Written by Jonathan Diaz
Updated 1 month ago

The color options allow you to fully brand your store for visual appeal and consistency.

Please keep in mind that not all color settings are found here, some individual components also include their own color settings.

38 STEPS


1 The first step is to open the theme settings area of your Shopify theme config and go into the Colors section.

Step 1 image

2 Now, the first section is the General colors section.

The first option allows you to change the color of the cart icon. (header strip)

Step 2 image

3 Select the background color for the header cart count.

Step 3 image

4 Select the background color for the header cart count for mobile.

Step 4 image

5 Now choose the color for the header cart text color.

Step 5 image

6 You can also select the color for the mobile cart count text color.

Step 6 image

7 Now select a color for the sticky header cart icon, this icon will display when the header becomes sticky.

Step 7 image

8 You also have the option to display a border around the cart count.

Step 8 image

9 Select a color for cart count border.

Step 9 image

10 Select a color for menu, search and cart icon on mobile.

Step 10 image

11 Select a color for the footer cart icon.

Step 11 image

12 Select a background color for the footer cart icon.

Step 12 image

13 Select a background color for the page body.

Step 13 image

14 Select the body default text color.

Step 14 image

15 Select the primary color.

This covers text links, buttons, product labels (Sale, Free), etc.

Step 15 image

16 Select the background color of the view cart button.

It also includes continuing shopping button in the cart dropdown.

Step 16 image

17 View cart button.

Step 17 image

18 Next, scroll down and go to the checkout button color section.

This section allows you to configure the color settings for your checkout buttons.

Step 18 image

19 Checkout button.

Step 19 image

20 Select the text color for the home page section titles.

Step 20 image

21 Home page section title/heading. 

Step 21 image

22 Next is the Quantity Selector section(Product page and Cart page).

Click highlight and select the background color of quantity update buttons(+,-). Below you can configure the color settings for this element.

Step 22 image

23 Quantity selector.

Step 23 image

24 Now, scroll down and go to the Social proof popup section.

Configure your color settings for the popup here. 

Step 24 image

25 Select popup default text color.

Step 25 image

26 Select popup title text color.

Step 26 image

27 Next is Upsell popup section.

Here you can configure all of the color settings associated with the popup.

Step 27 image

28 Show Upsell popup.

Step 28 image

29 Now, scroll down and go to the Notification section.

Here you can configure all of the color settings associated with the cookie notification.

Step 29 image

30 Cookie Notification Popup.

Step 30 image

31 Now, select the background color for the Purchase proof popup.

Step 31 image

32 Next, select the background color for the mobile statistics slider.

Step 32 image

33 Now, go to the Footer section and select the background color for the footer copyright section.

Change its default text color by selecting a color for 'Footer Copyright Text Color' settings.

Step 33 image

34 Footer copyright section.

Step 34 image

35 Next, scroll down and go to the Collection(page) settings.

Go through this section and set the colors accordingly.

Step 35 image

36 Here you can configure the border colors for the slide out cart.

Step 36 image

37 Finally go to the Product information popup section and define your chosen color configuration.

Step 37 image

38 Now, click save to save your theme config and preview your changes.

That's it. You're done.

Step 38 image

Here's an interactive tutorial for the visual learners

https://www.iorad.com/player/1596806/DemoStore---General-Colors

Cart Icon Color: Changes the color of the cart icon for desktop view.

Cart Count Background Color: Changes the color of the item counter of the cart icon. (This is the number that appears next to the cart icon that lets you know the number of items in the cart)

Mobile Cart Count Background Color: Changes the color of the cart icon for mobile devices.

Cart Count Text Color: Changes the text color of the cart item counter on Desktop. (This is the number that appears next to the cart icon that lets you know the number of items in the cart)

Mobile Cart Count Text Color: Changes the text color of the cart item counter on Mobile. (This is the number that appears next to the cart icon that lets you know the number of items in the cart)

Sticky Cart Icon Color: Changes the cart icon color for the sticky cart, only. (This is the cart icon that shows when the header becomes sticky)

Use Border Around Cart Count: Use this checkbox to add a colored border to the item count on your cart icon.

Border Color: Selects your desired border color around the cart item counter.

Menu, Search and Cart Icon Color in Mobile View: This affects all 3 areas listed on Mobile. Use this to change the color quickly, and easily.

Footer Cart Icon Color: Changes the footer cart icon color.

Footer Cart Icon Background: Changes the footer cart icon background color.

Body Background: Changes the background color of your entire site.

Body Text: Changes the font color for the site body text.

 

Primary Color: Changes the color for all text links and primary buttons.

Secondary Color: Changes the color for all secondary buttons.

Click “Save” so all work isn’t lost. Your base website is complete!

Did this answer your question?