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:
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.
Click on Customisers in the menu.
Select the customiser you want to edit.
From the left-hand menu, go to Theme Colors.
Select a color and use the RGB picker to set your desired color.
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.
