Customise

Selected colour CSS variables

Mirror the colours a shopper picks in the customiser into your own storefront styling using the --sign-selected-colour CSS variables.

Custom CSS

Use css to create your own styles for Sign Customiser

Vertical text orientation

Let customers stack each character on its own line, lock a customiser to one orientation, or set a default orientation for languages that read top to bottom.

Default text alignment

Sign Customiser allows you to change the default text alignment presented on the visualiser for user-input text inputs. You can show or hide all the text alignment options the user can select.

Option Number List

You can now automatically generate a list of options for your customiser that are numbered. This is useful for when you have a large number of options and you want to make it easier for your customers to understand the order of the options.

Editor Modes

Control the text editor and decide whether supported customisers can accept characters that a selected font cannot draw.

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 Features → 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.

Options sidebar position - desktop only

Display the options sidebar on the left or right, option only available for desktop.

Custom Design Tab

Show or hide the custom design tab on your customiser.

Mobile Style Options

Choose how the customer customiser presents its options on mobile. Every customiser can use either Stacked all at once or One Selection at a Time. In the merchant admin, open your customiser and go to Settings > General Settings > Mobile Style Options.

Centimetres/Inches measurement display

Choose to show either centimetres or inches on your customiser

Font display options

You can display all fonts directly or as a dropdown menu. We recommend using the dropdown option if you have a large number of fonts. A dropdown menu will facilitate easier navigation for customers moving between steps. Conversely, displaying all fonts allows customers to view and select fonts without having to open a dropdown list. To change the font display option, please navigate to Settings > General > Desktop Style Options > Font List Appearance (Desktop Only).

Price display on first load

Select how to display the price on the customiser, useful for marketing such as Google products.

Background Images for Sign Visualisations

How to change the background image that displays behind the sign design in the visualiser

Show / Hide Measurements?

1. In the app dashboard, please click on the Customiser which you want to edit: 2. Click on Settings on the right side of the screen and click General: 3. Refer to the second section in the General Settings to Show/hide Measurements: Here's what it looks like when you choose Show both width and height: Here's what it looks like when you choose Show Only Width: Here's what it looks like when you choose Show Only Height:

Arranging the option order

Sort the order of option sections and individual choices in the customiser

Modal display

Show your customiser in a modal on your storefront theme.

Scene Editor

Formally called background images - how to control the scene that the signs display on.

Visually scale signs for size dimensions

You can give the visualiser the appearance of the sign getting bigger or smaller relative to the size the customer has chosen. To enable this feature: Navigate to the Sign Customiser admin Select the customiser you would like to edit From the left-hand menu, go to Features → Scene Editor - Background Images. Enable the "Scale visualisation with size" checkbox Save the form The visualiser will now grow and shrink the text relative to the smallest and largest size:

Review Screen

You can choose to let your customers review their custom sign before it is added to the cart. This review screen also displays a summary of the selected options. This guide will show you how to enable this feature and where to customise the text displayed on the review screen.

Decimal Format for Measurements

Please follow these instructions to change the decimal format of measurements: 1. Once you have created the Customiser, please click C ustomizer which you want to change: 2. Click Settings on the top right side and click General: 3. Refer to the third option in General, click the dropdown menu to choose With Decimal / No Decimal option and click Save at the end of the page to save the changes:

Change A Font's Line Height / Line Spacing

1. In the app dashboard, please click on C ustomizer which you want to change: 2. On the Customiser Page, click the Required Options button with the tool icon and click Fonts: 3. Click the Font whose line height/line spacing you want to change: 4. In the Edit Font page, scroll down to this section to make the required changes and click Save: