The following steps can be done by going to Design › Edit Theme › General › Visual › Colors in your eCom back office.
Here, you can customize your theme’s colors, giving complete control over creating unique styles for your store. Here is a reference for what each of the colors correspond to on your site:
- Headings text color: This setting affects the color of the items located at the top of every page, including your navigation items.
- Pretext color: This is the color for the pretext headings for section titles.
- Body text color: This settings affects the color of the general text of your shop
- Highlight color: This settings affects the color for your buttons and active state links.
- Button text color: Text color for all buttons. Be sure to choose something that has a stark contrast with the highlight color, which will be used for the button background. (ex: 'add to cart' button)
- Border color: This is the color for all borders and separators
- Background color: This affects the color of the main background of your shop
- Top bar text color: This affects the text color of the Top Bar located at the very top of every page (ex: Cart information, link to My Account)
- Top bar background: The background color for the Top Bar, which includes the phone number, currencies, languages and message.
- Header color: The background color of the header located at the top of every page (where you can find the navigation)
- Mobile menu background: Edit the background color for the mobile menu.
- Mobile menu border: Choose the border color for the mobile menus.
- Mobile menu color: Choose the text color for the mobile menus.
- Footer newsletter color: The color of the title for the footer newsletter
- Footer newsletter background: The color of the background
- Footer text color: The text color for the bottom footer of every page (ex: newsletter text, menu links, etc.)
- Footer background color: The background color of the footer located at the bottom of every page
- Footer bottom color: Text color for the Footer Bottom
- Footer bottom background: This is the background color for the bottom footer and copyright area
- Social icons color: This will change the color of the social media icons displayed at the very bottom of the footer