Color

Overview of color options under the Theme settings

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.

Overview

Settings overview

• Color options for the Announcement bar

• Header colors

• Light, Dark, and Bright palettes (including Add to Cart button)

• Default colors for supplementary pages

• Footer color choices

• Sub-footer color choices

• Contrast adjustment

Tip: The Add to Cart button color can be changed by using the Primary accent color in each palette.

Access the Color settings by opening the Color accordion under Theme Settings:

Choosing colors

Each grouping will have a set of color swatches and dynamic source icons:

Swatch

Clicking on a swatch (large color circle) will display a color picker where you can choose a color or enter a hex color code:

Dynamic source

Optionally, you can preselect brand colors in the Shopify Admin settings and use the Dynamic source icon to select colors:

Brand colors

To set up the brand colors, use the Settings option in the main Shopify Admin:

Announcement bar

Choose the background and text colors for the announcement bar.

Header

Choose the background and text colors for the main header area.

Border color

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:

Sale text

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:

How to change the Sale text to a different word

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 highlight all in lowercase letters to quickly find the right field. Using a capital letter may result with no values.

Color palettes (Light, Dark and Bright)

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.

Add to Cart Button

Primary accent color

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:

Add to Cart and Buy it Now buttons - Primary Accents

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:

Add to Cart and Buy it Now buttons - Dark Primary Accents

Default colors

Used to set background colors for account pages, 404 pages, and other pages without settings. Choose a palette color option to configure these pages.

Footer and Sub-footer

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:

Contrast adjustment

Use this checkbox to improve contrast when similar colors are used. Ideal for improving visual accessibility.

Learning videos

Learn more about Pipeline's Color settings with this learning course by Sunbowl Academy. Create a login and learn now:

Start your journey start an online course today.Expert by Monday

Direct link to Theme Settings - Colors