Skip to content

Customize color schemes

This guide describes how to use Cascade's Color schemes feature.

With Cascade, you can create 3 different sets of colors called color schemes. Refer to Shopify help: Color schemes.

Color schemes provide a quick and easy way to use colors consistently across your store. Instead of colorizing store elements individually, whenever you apply colors to blocks, sections and pages, simply reuse the colors from your color schemes.

The following table describes Cascade's color schemes.

Color scheme nameDescription
PrimaryThis is your store's default color scheme.
SecondaryA second color scheme option for your store.
TertiaryAn optional third color scheme for your store.

Setup a color scheme

To setup a color for a color scheme, complete the following steps.

  1. In Theme editor's Theme settings page, select Colors to expand the color settings menu.

    Theme editor's Color settings menu in the Theme settings pane.

  2. In the Colors menu, locate the color scheme you want to customize.

  3. Select one of the following color scheme elements to colorize.

    Element nameDescription
    TextSet the default color for primary text.
    BackgroundChoose a color for your store's background.
    AccentSelect a color for accented text, like hover over text and hyperlinks.
    SecondarySet a color for secondary text, like social media share links on product pages.

    For example, in the following image, the Primary color scheme > Background element is selected.

    The Background color element in the Primary color scheme menu section.

  4. Use one of the following methods to set a color for the color scheme element.

    • Choose a color with the Color picker.
    • Enter a hexadecimal or hex color value. Refer to Colors HEX.
    • Select a Currently used color.
    • Choose the Connect dynamic source icon.

    A color picker GUI element in Theme settings.

    Example: Colorize an element by using a color from a dynamic source

    To colorize an element by using a color from a dynamic source, if available, select the Connect dynamic source icon, beside the element selector, and then choose a dynamic source to add. You must define sources of dynamic content. Refer to Shopify help: Metafields.

    For example, to set the Primary color scheme's Text element to use the Primary contrasting color metafield:

    1. Define the metafield Primary contrasting color as a source of dynamic content. Refer to Shopify help: Metafields.

    2. In Theme settings > Colors > Primary color scheme, select the Connect dynamic source icon, beside the Text element selector.

    3. From the Branding menu, select Primary contrasting color.

  5. Select Save, after you’ve adjusted a color setting, to avoid losing unsaved changes.

    The save button in Theme settings.

Apply a color scheme to a store section

To apply a color scheme to a section of your store, complete the following steps.

  1. In Theme editor, use the side menu to select a store section to colorize.

    For example, in the following image, the store section Home page > Cascading collection is selected.

    The Homepage's Cascading collection store element settings menu.

  2. In the expanded menu, locate the Color menu.

    The Color settings menu for an example section.

  3. In the Color menu, use the Color scheme options to select a color scheme.

    For example, in the following image, the Color scheme option is set to the Primary color scheme.

    Color scheme options.

Example: A store section with different color schemes

In the following image, 3 different color schemes are applied to a Rich text section on a store page.

Example color schemes applied a rich text section.