Color
Overview of color options under the Theme settings
Last updated
Overview of color options under the Theme settings
Last updated
You can customize all theme elements, including buttons, links, text, and more, using the color controls. By utilizing the color palettes, you have the option to select from a variety of colors and apply them as presets throughout the theme.
Access the Color settings by opening the Color accordion under Theme Settings:
Each grouping will have a set of color swatches and dynamic source icons:
Clicking on a swatch (large color circle) will display a color picker where you can choose a color or enter a hex color code:
Optionally, you can preselect brand colors in the Shopify Admin settings and use the Dynamic source icon to select colors:
To set up the brand colors, use the Settings option in the main Shopify Admin:
Choose the background and text colors for the announcement bar.
Choose the background and text colors for the main header area.
The border color is used to build a separation between the header area and the page content. This is helpful for Pages and Blogs. Also if your homepage doesn't start with a banner style section:
The sale text option is a color you can choose to highlight a navigation menu item:
By default, if you have any menu item called "Sale", the chosen color option will be used. The menu item can be anywhere in your navigation:
To change the trigger word from "Sale" to another name, you can choose "Edit default theme content" by selecting the three dots at the top:
Then modify the value for Highlight links to a different menu item name:
Tip: When searching for this value, type-in
highlightall in lowercase letters to quickly find the right field. Using a capital letter may result with no values.
Sections, blocks, and other elements within Pipeline have various color options that you can easily modify. By providing multiple color palettes in the Theme Settings, Pipeline gives you the ability to select your brand colors for each of these palette styles. Palette styles are available throughout the theme.
A good example is using the primary accent color options for Light, Dark, and Bright. This setting lets you configure the primary call-to-action button colors for different styled pages.
When using a light background page, you can adjust the Primary accents color setting under the Light palette:
On a dark background, you can set a different color option for your Add to Cart and Buy It Now buttons by using the Dark primary accents selection:
Used to set background colors for account pages, 404 pages, and other pages without settings. Choose a palette color option to configure these pages.
Pipeline includes two footer sections to help promote key features in the main footer and secondary information in the sub-footer. Use the color options to add contrast or separation if desired:
Use this checkbox to improve contrast when similar colors are used. Ideal for improving visual accessibility.
Learn more about Pipeline's Color settings with this learning course by Sunbowl Academy. Create a login and learn now:
