Skip to main content

Theme Color Reference Guide

Updated yesterday

This guide will show you how to adjust the colors of your Sign Customiser. You can change the color of most elements, including buttons, labels, and backgrounds, directly from the admin, without writing any CSS code.

To update the colors for a specific component:

  1. Go to the Sign Customiser Admin:

    • Universal subscribers: Go to Home in your account.

    • Shopify users: Navigate to Shopify admin → Apps and select Sign Customiser.

  2. Click on Customisers in the menu.

  3. Select the customiser you want to edit.

  4. From the left-hand menu, go to Theme Colors.

  5. Select a color and use the RGB picker to set your desired color.

  6. Save your changes.

Some advanced elements may not appear in the Theme Colors section. To override these, you will need to do this via CSS. Follow this guide on how to add CSS code the right way: Custom CSS.

General

Primary Text

The Primary Text setting controls the color of the following:

  • Main headings

  • Labels

  • Sign details (review screen)

  • Additional Information (review screen)

Secondary Text

The Secondary Text setting controls the color of option descriptions.

Accent

The Accent controls the color of the following:

  • Buttons

  • Selected options

  • Links

Visualisation

Background

The Background setting controls the background colour of the visualiser and the review screen.

Main Price

The Main Price setting controls the color of the total price on the visualiser.

Measurement

The Measurement setting controls the color of the measurement text that appears on the visualiser.

Text

The Text setting controls the text that appears on the visualiser.

Discount Main Price

The Discount Main Price setting controls the discounted price that appears on the visualiser.

Sidebar

Background

The Background setting controls the background color of the sidebar on both the main screen and the review screen.

Outline Color

The Outline Color setting controls the borders of unselected options in the sidebar.

Sidebar Price

The Sidebar Price setting controls the total price that appears in the sidebar.

Sidebar Price Label

The Sidebar Price Label setting controls the color of the price label at the bottom of the sidebar (only if text is present under Language > Main tab > Price and button section > Text before price value).

Inclusions Text

The Inclusion Text setting controls the color of text in the "Additional Items Included" section on the review screen (text settings found under Review Screen > Additional Items Included).

Inclusions Background

The Inclusion Background setting controls the background color of the "Additional Items Included" section on the review screen (settings found under Review Screen > Additional Items Included).

Selection Number Text

The Selection Number Text setting controls the color of the number in the numbered list.

Selection Number Background

The Selection Number Background setting controls the background color of the number in the numbered list.

Background Accent

The Background Accent setting controls the color of the following:

  • The total price and "Add to Cart" section

  • Background of the "Qualities" section in the review screen (text settings found under Review Screen > Qualities)

Button Text

The Button Text setting controls the color of the text in "Finish" and "Add to cart" buttons (if Review Screen is enabled).

Discount Sidebar Price

The Discount Sidebar Price setting controls the color of the discounted price that appears at the bottom of the sidebar.

Form Error

The Form Error setting controls the color of the following:

  • The asterisk (*) symbol on required fields

  • Error messages

  • The input field outline when the field is in an error state

Other

Message Modal Text and Close Button

The Message Modal Text and Close Button setting controls the color of text and the close button in the modal that appears when a sign exceeds the limit set in your customiser.

Message Modal Background

The Message Modal Background setting controls the background color of the modal that appears when a sign exceeds the limit set in your customiser.

Modal Overlay

The Modal Overlay setting controls the color of the overlay for “Example” pop-up images.

Status Colors

Success

The Success setting controls the color of success text when a product is added to the cart.

Pending

The Pending setting controls the color of pending text while the product is still being added to the cart.

Did this answer your question?