Customise

Custom CSS

This guide will walk you through the recommended way to apply custom CSS changes, locate element class names, use example CSS codes, and explore alternative methods of adding CSS in Shopify themes Below, you'll find quick links to each section covered in detail: How to add custom CSS the right way How to find element class names for your CSS code Examples of CSS codes

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

Overview Editor Modes is an admin control feature that allows you to determine which design interfaces are available to your customers when creating custom signs. You can choose to enable both the text editor and custom design options, or disable the text editor to streamline the customer experience by directing them exclusively to your custom design interface. Simple Breakdown When you disable the text editor in a customiser, your customers will only see your custom design interface - either the AI Designer, an embedded custom form, or a link to an external design page. This creates a more focused, streamlined ordering experience for customers who need to provide custom artwork or detailed design specifications. The text editor toggle gives you control over the customer journey: - Text Editor Enabled: Customers can choose between typing text directly in the customiser or switching to the custom design interface using tab navigation - Text Editor Disabled: Customers are automatically directed to the custom design interface with no tab switcher visible, creating a single, focused workflow This feature is particularly useful for shops that primarily work with customer-provided artwork, complex custom designs, or detailed form-based requirements, where the standard text editor interface may not be the primary ordering method.

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.

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

Sign Customiser offers two different mobile designs for you to choose from: ' Stacked all at once ' and ' One selection at a time '. To change your mobile design, navigate to your customiser editor page, then go to Settings > General > Mobile Style Options. In the Mobile View option, select your preferred design.

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 options as they appear in the customiser

Modal display

Show your customiser in a modal on your storefront theme.

RTL language

Display all wording using right to left language display

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 Navigate to "Background Images" on the left side menu 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: