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.
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)
3 Select the background color for the header cart count.
4 Select the background color for the header cart count for mobile.
5 Now choose the color for the header cart text color.
6 You can also select the color for the mobile cart count text color.
7 Now select a color for the sticky header cart icon, this icon will display when the header becomes sticky.
8 You also have the option to display a border around the cart count.
9 Select a color for cart count border.
10 Select a color for menu, search and cart icon on mobile.
11 Select a color for the footer cart icon.
12 Select a background color for the footer cart icon.
13 Select a background color for the page body.
14 Select the body default text color.
15 Select the primary color.
This covers text links, buttons, product labels (Sale, Free), etc.
16 Select the background color of the view cart button.
It also includes continuing shopping button in the cart dropdown.
17 View cart button.
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.
19 Checkout button.
20 Select the text color for the home page section titles.
21 Home page section title/heading.
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.
23 Quantity selector.
24 Now, scroll down and go to the Social proof popup section.
Configure your color settings for the popup here.
25 Select popup default text color.
26 Select popup title text color.
27 Next is Upsell popup section.
Here you can configure all of the color settings associated with the popup.
28 Show Upsell popup.
29 Now, scroll down and go to the Notification section.
Here you can configure all of the color settings associated with the cookie notification.
30 Cookie Notification Popup.
31 Now, select the background color for the Purchase proof popup.
32 Next, select the background color for the mobile statistics slider.
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.
34 Footer copyright section.
35 Next, scroll down and go to the Collection(page) settings.
Go through this section and set the colors accordingly.
36 Here you can configure the border colors for the slide out cart.
37 Finally go to the Product information popup section and define your chosen color configuration.
38 Now, click save to save your theme config and preview your changes.
That's it. You're done.
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!
