Accent color - A bright color for highlighting elements

Here is a guid to where the accent color is used throughout the theme. The purpose of accent is to have a color of your choice to help highlight various theme elements. 

Choosing an accent color is done in the theme settings under color:

Accent is found under the general section:

Choose any HEX color to match your shop's branding. To help with choosing the right color, below are examples of where accent is used. 

Buttons

Accent is used for highlighting various elements within the theme. While Link color is used for the Add to Cart button color, accent is used as a background color for other buttons. 

Example for the section Image with text overlay - The default button style is transparent:

Accent styled button options are available to help bring create a solid button with your chosen color:

Example of square using the accent color:

Section Backgrounds

Many of the homepage sections have background color options. We include white, light (which is a light grey), accent (your custom choice) and dark:

Experiment with these options to help a section standout or present a clean background look. When stacking many sections, using alternating background colors can help with the separation. 

Product Grids - Collections

Collection pages, homepage featured collection sections and related items all share the same product grid display. The accent color is used as the background color for product tags or stickers and also for the sale price next to the compare at price:

Link color is used for the product name and compare at price when an item is on sale. 

Pipeline has sale, new and sold out product tag options which can be activated in theme settings under product grid:

Towards the bottom under Product Tags:

Product Pages

Accent is used to highlight the sale price and also as a background button color for the dynamic checkout buy now button:

Add to Cart uses the Link color setting for the foreground and border. Link color is also used for compare at price, select option dropdown arrows and social media share links. 

Navigation

When the current page loaded matches a menu item in your navigation, that menu item will be highlighted with the accent color. In this example the current loaded page is Blogs and since it's also in the main navigation, that menu item is highlighted: 

When you hover over a menu item in the navigation, that will also use the accent color:

Blogs

Accent is used as a background color for blog tags:

These have been some examples of how the accent color is used in the theme to help highlight elements. We use one accent color option in our design language to keep the theme consistent and clean.