Customise

How to make Sign Customiser fit into your store theme

37 articles

Last updated: 28 October 2026

Target customiser parts with stable CSS class namesUse stable npc- and sc- CSS class names to style customiser controls, pop-ups and the page wrapper, and learn where each CSS rule must go.
Add clickable links to customiser descriptionsAdd clickable links to option and section descriptions in the customer customiser with the link button or Markdown link format.
Apply a Light or Tokyo Night theme presetSet the colours on the Colour Scheme page in one step with the Light or Tokyo Night preset, then change single colours.
Show a different background for each sizeLink each preset size to its own scene background, so the customer customiser shows a different background when the customer changes the size.
Set a real size for the built-in background and use scenes in product imagesGive the built-in blue/grey background a real width so signs scale against it, and show the customer's chosen background in the cart and order product image.
Set the Sign area for each background imagePlace a Sign area on a background image so the customer customiser shows the sign in that box.
Real size viewShow the sign next to a 170 cm person at the same scale.
Selected colour CSS variablesMirror the colours a shopper picks in the customiser into your own storefront styling using the --sign-selected-colour CSS variables.
Custom CSSUse css to create your own styles for Sign Customiser
Vertical text orientationLet 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 alignmentUse Sign Customiser to control the alignment of the text that shoppers type. You can show the alignment buttons to shoppers. You can also hide the buttons and set one fixed alignment.
Option Number ListNumbered options show a number beside each step title in your customiser. Use them when you have many options. The numbers help customers to see the order of the steps. The numbers follow the order that you set in Sort Option Order. If you move a step, its number changes. A step that does not appear for the sign gets no number. To change the order, see Arranging the option order.
Editor ModesControl the text editor and decide whether supported customisers can accept characters that a selected font cannot draw.
Theme Colour Reference GuideThis guide shows how to change the colours of your Sign Customiser. You can change the buttons, labels and backgrounds in the admin. You do not need to write CSS code. To change the colours of a customiser: Go to the Sign Customiser admin: Universal accounts: Go to Home in your account. Shopify users: In the Shopify admin, go to Apps and open the app. Select Customisers in the menu. Select the customiser you want to change. In the menu on the left, select Theme Colours. The next paragraph says where it is. Select a colour field. Use the colour picker to set the colour you want. Select Submit to save your changes. The place of Theme Colours depends on the width of the admin content area. This is the area to the right of the navigation. If the admin content area is 1040 px wide or more, the menu has the heading Customiser Menu, and Theme Colours is under Settings. If the admin content area is less than 1040 px wide, the menu has no Customiser Menu heading, and Theme Colours is the last item under Features. If the admin content area is less than 799 px wide, the menu opens from a Menu button. You can also type "Theme Colours" in the Search menu items... box. Reset to Defaults is also on this page. It puts the default colours in the form. Select Submit to save them. Some advanced elements are not in the Theme Colours section. To change these elements, use CSS. This guide shows how to add CSS code correctly: Custom CSS.
Options sidebar position - desktop onlyDisplay the options sidebar on the left or right, option only available for desktop.
Custom Design TabChoose when the Custom tab shows on your customiser, and add a link to an external page for custom designs.
Mobile Style OptionsChoose how the customer customiser shows its options on mobile. Every customiser can use Stacked all at once or One Selection at a Time. These settings apply on tablets and phones. These are screens less than 1025 px wide. Customers on a desktop-width screen do not see them. In the merchant admin, open your customiser and go to Settings > General Settings. Scroll down to Mobile Style Options.
Centimetres/Inches measurement displayChoose which units shoppers see on your customiser: centimetres, inches, or both
Font display optionsExcept for lightbox face text, you can show the sidebar font list in two ways. You can show all fonts at once. Or you can show them behind a dropdown button. Lightbox face text always shows all fonts. We recommend the dropdown if you have many fonts. It reduces vertical scroll. The customiser loads each font preview when it comes into view. If you show all fonts, customers can choose a font without opening a list. The first image shows the dropdown. The second image shows the fonts in a grid.
Price display on first loadSelect how to display the price on the customiser, useful for marketing such as Google products.
Set the product title and main product imageHow to set the product title and the main product image that the cart and the order use
Show / Hide Measurements?Choose which measurements show in the visualiser and in the cart.
Arranging the option orderSort the order of option sections and individual choices in the customiser
Modal displayShow your customiser in a modal on your storefront theme.
Scene EditorFormally called background images - how to control the scene that the signs display on.
Visually scale signs for size dimensionsYou can give the visualiser the appearance of the sign getting bigger or smaller relative to the size the customer has chosen. This setting does not change lightbox signs. Follow these steps to enable this feature: Go to the Sign Customiser admin. Select the customiser that you want to edit. From the left-hand menu, go to Features → Scene Editor - Background Images. Enable Scale visualisation with size. This setting is part of some plans. On a plan that does not include it, the checkbox is not available and the admin asks you to upgrade. To upgrade, go to Your Company → Billing. In the Shopify admin, open the app and select Subscription/Credit in the app menu. The checkbox is also not available while Enable Dragging, Enable Scaling or Enable Rotation is on. These options are on the Drag, Scale, Rotate page in the Features menu. Turn off all three first. Click Save. For signs other than lightbox, the visualiser now grows and shrinks the sign relative to the smallest and largest size.
Review ScreenYou can let your customers review their custom sign before they add it to the cart. This review screen also displays a summary of the selected options. This guide shows how to enable this feature and where to change the text on the review screen.
Decimal Format for MeasurementsChoose With Decimal or No Decimal for Decimal Format of Measurements in General Settings.
Change A Font's Line Height / Line SpacingChange the line height of a font to adjust the space between lines of text in a customiser.

Languages and translation