Colors

Color is the fastest way to make the theme feel like yours. Backline gives you five color schemes that you apply section by section, so your store stays cohesive while individual areas can still stand out.

How color schemes work

A color scheme is a coordinated set of colors: a background, text, buttons, borders, and accents that are designed to sit well together. The theme ships with five ready-made schemes, already balanced for the theme style you chose, and you can adjust the colors in each one to match your brand.

Because a scheme travels as a set, you choose a scheme for a section and every element inside it, from headings to buttons to links, picks up the right color on its own. You never have to color each piece by hand.

Know what each scheme is for

The five schemes are built to play different roles, so pick by the job you need doing:

• Scheme 1 is the signature look, the one your store leans on most. It is a safe default for any section you are unsure about.
• Scheme 2 is the alternate. Use it next to Scheme 1 to separate one block of content from the next without changing the mood.
• Scheme 3 is the inverse. It flips light and dark, so it suits a bold banner or a section you want noticed as people scroll.
• Scheme 4 is the spotlight. Save it for the moments that matter: a launch announcement, a sale banner, a single call to action.
• Scheme 5 is the muted one. It sits quietly behind long text, FAQs, and supporting detail so your louder sections keep their impact.

Scheme numbers mean the same thing in every theme style, so switching style keeps the choices you have already made coherent: your homepage rhythm survives the change. See Choose a theme style for what each style does with color.

Set your brand colors

1. In the theme editor, open Theme settings → Color schemes.
2. Adjust each scheme’s background, text, and accent colors to your brand.
3. Set the store-wide Color scheme. It colors the page background and anything without a scheme of its own, so changing it here is quicker than re-pointing every section.
4. Preview as you go. The editor updates live.

Gift cards carry their own Gift card color scheme in Gift card settings, so the card your customer receives matches your brand even when it needs a different treatment. Every field is covered in Color scheme settings.

Tip

You do not have to use all five. Build Scheme 1 and Scheme 2 properly first, then borrow 3, 4, and 5 only where a section genuinely earns the change. A few schemes used consistently make a store look deliberate rather than busy.

Apply a scheme to a section

Every section in the theme has its own Color scheme setting. Open a section, pick a scheme, and the whole section re-colors instantly. Alternating Scheme 1 and Scheme 2 down the homepage gives the page rhythm, with Scheme 3 or 4 saved for the one block you most want people to stop on. Your header, footer, and cart carry the setting too, so the frame of every page can stay steady while the content between it varies. See Storytelling sections and Chrome sections.

Keep it readable

Good contrast is what keeps your store easy to read and welcoming to every visitor.

• Keep text and its background clearly different in lightness.
• Check your buttons. The label should be comfortable to read against the button color.
• If you can, glance at your store on both a bright screen and a dim one.

Note

The theme is built to meet accessibility contrast guidelines out of the box. If you customize colors heavily, a quick contrast check keeps you on the safe side.

A quick recipe

• Choose one primary brand color for buttons and links.
• Use a calm, neutral background behind long text so it stays comfortable to read.
• Save your boldest color for accents and calls to action, where it does the most work.