# Theme Colour Reference Guide This guide will show you how to adjust the colours of your Sign Customiser. You can change the colour of most elements, including buttons, labels, and backgrounds, directly from the admin, without writing any CSS code. To update the colours 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 Colours. Select a colour and use the RGB picker to set your desired colour. Save your changes. Some advanced elements may not appear in the Theme Colours 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. - Source URL: https://www.signcustomiser.com/help/customise/theme-color-reference-guide/ - Markdown URL: https://www.signcustomiser.com/help/customise/theme-color-reference-guide.md - Category: Customise - Last updated: 2026-01-26 ## Article This guide will show you how to adjust the colours of your Sign Customiser. You can change the colour of most elements, including buttons, labels, and backgrounds, directly from the admin, without writing any CSS code. To update the colours 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 Colours**. 5. Select a colour and use the RGB picker to set your desired colour. 6. Save your changes.

Some advanced elements may not appear in the Theme Colours 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 colour of the following: - Main headings - Labels - Sign details (_review screen_) - Additional Information (_review screen_) ![](/help/intercom-docs/help-centre-images/80bb2864c3b8cbb2da5cf69802fe91fc74ea1494f4d70061e2e43989ed942ca4.jpg) ### Secondary Text The **Secondary Text** setting controls the colour of option descriptions. ![](/help/intercom-docs/help-centre-images/076a6871f6725592e7692b89f263ae5ef3f61c20c6a38218886d6f5f4bf8257b.jpg) ### Accent The **Accent** controls the colour of the following: - Buttons - Selected options - Links ![](/help/intercom-docs/help-centre-images/f07a4c6ca40b27592941884324319f37ed91d54fe8fcb2746bcea3bcd205c97a.jpg) ![](/help/intercom-docs/help-centre-images/4bafc4b3e28c3d2a8b10d1cd38f668a92648906bfa40fad5a5a7ef5a1688fdc2.jpg) ## Visualisation ### **Background** The **Background** setting controls the background colour of the visualiser and the review screen. ![](/help/intercom-docs/help-centre-images/d3ee97597f6172b0271ce715eab4d2b2dcd207ba0e385d0aa6ac2f22f5585a4e.jpg) ### Main Price The **Main Price** setting controls the colour of the total price on the visualiser. ![](/help/intercom-docs/help-centre-images/691dd4a08ec9d4a651ad34d0a4264a2f634737f1b416f783577a390e50ae5969.jpg) ### Measurement The **Measurement** setting controls the colour of the measurement text that appears on the visualiser. ![](/help/intercom-docs/help-centre-images/49af73a2cc53b4fe55782e3b1c108f5e500050394bd7276953e6d82800c369e4.jpg) ### Text The **Text** setting controls the text that appears on the visualiser. ![](/help/intercom-docs/help-centre-images/e573e2a079f9356641862d599b47c63bf4647cbcadf5ba22d73bd06fd4ba850e.jpg) ### Discount Main Price The **Discount Main Price** setting controls the discounted price that appears on the visualiser. ![](/help/intercom-docs/help-centre-images/026c2a3f518f2e4e62c3721ca3a8f90b9cdf4e279d4454ff664cc2cbae13ea03.jpg) ## Sidebar ### Background The **Background** setting controls the background colour of the sidebar on both the main screen and the review screen. ![](/help/intercom-docs/help-centre-images/20b79bb1c33a3acbb346523b8cf05d8f4bd2d9c03c54d425b7e823f7a246e081.jpg) ### Outline Colour The **Outline Colour** setting controls the borders of unselected options in the sidebar. ![](/help/intercom-docs/help-centre-images/27505ca477e7bcb58f704ef8c3cdbf0dccb5686fe8b0903b27268be76fd2f479.jpg) ### Sidebar Price The **Sidebar Price** setting controls the total price that appears in the sidebar. ![](/help/intercom-docs/help-centre-images/d7883cc6c1d0779138b0d695db2220db5b520998e11ac762437815bf87d56c39.png) ### Sidebar Price Label The **Sidebar Price Label** setting controls the colour 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_). ![](/help/intercom-docs/help-centre-images/674774b20c66f954d38263898905b003abf024c86a06bd559c25142735be57a2.jpg) ### Inclusions Text The **Inclusion Text** setting controls the colour of text in the "Additional Items Included" section on the review screen (_text settings found under Review Screen > Additional Items Included_). ![](/help/intercom-docs/help-centre-images/be16017ab6fcfac3c8d720c3dfbba938ca4d3779b2453994d8e47308ddb87218.jpg) ### Inclusions Background The **Inclusion Background** setting controls the background colour of the "Additional Items Included" section on the review screen (settings found under **Review Screen > Additional Items Included**). ![](/help/intercom-docs/help-centre-images/20c435889c33706bec13a2234be10222b85c1d2b5c6693032c449e97b05e3c19.jpg) ### Selection Number Text The **Selection Number Text** setting controls the colour of the number in the numbered list. ![](/help/intercom-docs/help-centre-images/baa2e1bac540bcf232940f06498760b0af5022fcff849f5b0cdf32056415ef2d.jpg) ### Selection Number Background The **Selection Number Background** setting controls the background colour of the number in the numbered list. ![](/help/intercom-docs/help-centre-images/be40393262554ccce5e2b875b4545e01d367badc066b684d626369c409735324.jpg) ### Background Accent The **Background Accent** setting controls the colour 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_) ![](/help/intercom-docs/help-centre-images/8fea4193094f063971e78f66c0d5074386644b58ad362afeed6fe339fa3ef1fe.jpg) ### Button Text The **Button Text** setting controls the colour of the text in "Finish" and "Add to cart" buttons (_if Review Screen is enabled_). ![](/help/intercom-docs/help-centre-images/4cf70ac0fe811025784892dcb7bab2a702c20e66bc174873e088ac843aa9f7af.jpg) ### Discount Sidebar Price The **Discount Sidebar Price** setting controls the colour of the discounted price that appears at the bottom of the sidebar. ![](/help/intercom-docs/help-centre-images/780e38ee109190289af64cd0edc67fcbdde01149ccb6bb42f76b95f8362a06f1.jpg) ### Form Error The **Form Error** setting controls the colour of the following: - The asterisk (\*) symbol on required fields - Error messages - The input field outline when the field is in an **error state** ![](/help/intercom-docs/help-centre-images/e70db85721a9cedd2c3fd4bd8015f7efe0a405d58992462a3231d2ebe9747502.jpg) ## Other ### Message Modal Text and Close Button The **Message Modal Text and Close Button** setting controls the colour of text and the close button in the modal that appears when a sign exceeds the limit set in your customiser. ![](/help/intercom-docs/help-centre-images/37d0a99530f13d1d17696e089b232da42d153b3f8561f1ded22f16a1bfd73ffa.jpg) ### Message Modal Background The **Message Modal Background** setting controls the background colour of the modal that appears when a sign exceeds the limit set in your customiser. ![](/help/intercom-docs/help-centre-images/ee0596892cb25cb6287e0488ba3a54f2a3b261764121627a89af33a034223a58.jpg) ### Modal Overlay The **Modal Overlay** setting controls the colour of the overlay for “Example” pop-up images. ![](/help/intercom-docs/help-centre-images/a23cea6d316aaea57f22cd33024994e2c944cd8241414ca57fdfcdc190aff728.jpg) ## Status Colours ### Success The **Success** setting controls the colour of success text when a product is added to the cart. ![](/help/intercom-docs/help-centre-images/f4473b904c9dcdf1299e5db3c000534b777eea49de2b8dafd73cc88ff4896fbe.jpg) ### Pending The **Pending** setting controls the colour of pending text while the product is still being added to the cart. ![](/help/intercom-docs/help-centre-images/f3c07843b4c9aaee3e774407db85df5d4d2db4157a38d9c4174faae2d5050f69.png)