# Backboards

Backboards control the shape, colour, material and texture of the panel behind your sign. For some backboard types, customers can upload their own image. This guide shows how to: Configure the Backboard section Add different backboard types Add backboard colours and materials Allow customers to upload their own backboard images

- Source URL: https://www.signcustomiser.com/help/features/16861335-backboards/
- Markdown URL: https://www.signcustomiser.com/help/features/16861335-backboards.md
- Category: Features
- Last updated: 2026-10-15

## Article

Backboards control the shape, colour, material and texture of the panel behind your sign. For some backboard types, customers can upload their own image.

This guide shows how to:

-   Configure the Backboard section

-   Add different backboard types

-   Add backboard colours and materials

-   Allow customers to upload their own backboard images

## Accessing the Backboard Settings

1.  Go to the **Sign Customiser** Admin:

    -   **Universal subscribers:** Go to **Home** in your account.

    -   **Shopify users:** Open the app in your Shopify admin.

2.  Click **Customisers** in the menu.

3.  Select the **customiser** you want to edit.

4.  From the left-hand menu, go to **Sign Components → Backboards**.

Colours and materials are also managed from the same section.

<div class="intercom-interblocks-callout" style="background-color: #e3e7fa80; border-color: #334bfa33;"><p class="no-margin"><b>Note:</b> The name of this section changes with the sign type.</p><ul><li><p class="no-margin">Most sign types show <b>Backboards</b>.</p></li><li><p class="no-margin">Stencil customisers show <b>Sheets</b>.</p></li><li><p class="no-margin">Cut-out Metal customisers show <b>Panels</b>.</p></li><li><p class="no-margin">Braille customisers show <b>Plates</b>.</p></li><li><p class="no-margin">Lightbox customisers do not show this section.</p></li></ul><p class="no-margin">The heading for colours and materials changes in the same way. Stencil customisers show <b>Sheet Materials</b>, Cut-out Metal customisers show <b>Panel Colours</b>, and Braille customisers show <b>Plate Colours &amp; Materials</b>. Other sign types show <b>Backboard Colours &amp; Materials</b>.</p><p class="no-margin">Cut-out Metal and Stencil customisers have different visualisation options from the options in this guide.</p></div>

## Step 1: Set Backboard Section Title and Description

Change the heading and description above the backboard options.

1.  In the **Backboards** section, scroll to **Language Options**.

2.  Under **Backboard Section**, enter:

    -   **Section Title** – The title displayed above the Backboard section.

    -   **Section Description** – Optional text displayed below the title. You can also add a link to an external page.

    ![](/help/intercom-docs/help-centre-images/e6d6285ba687e657c8f36979598f1531de91ae95c672b67e75c0deeac6c81a58.png)

3.  Click **Save**.

## Step 2: Set the Backboard Colours & Materials Section Title and Description

Change the heading and description above the backboard colour and material options.

1.  In the **Backboards** section, scroll to **Language Options**.

2.  Under the **Backboard Colours & Materials Section**, enter:

    -   **Section Title** – The title displayed above the backboard colour and material options.

    -   **Section Description** – Optional text below the title. You can also add a link to an external page.

    ![](/help/intercom-docs/help-centre-images/3fdfa2a2d3b662a51f3b8badd691a1c763fbeafb1098cd937f41d8d8cfddefbe.png)

3.  Click **Save**.

## Step 3: Add a Backboard

Backboards are the panel types that customers choose for their sign.

![The Backboards list in the customiser admin, with the Add Backboard button above a table of backboard labels, visualisations and assigned colours.](/help/intercom-docs/help-centre-images/8dee9811def6d779aab3191d0f6eadc562ec402abf80a7db9450d1ca7c657883.png)

1.  In the **Backboards** section, click **Add Backboard**. If the list is empty, click **Add New Backboard**.

2.  Enter the following:

    -   **Label** – The name of the backboard displayed to customers.

    -   **Description** – An optional description of the backboard. You can also add a link to an external page.

3.  In the **Visualisation** section, choose the appropriate backboard type.

    Available backboard visualisation types:

    -   **None** – No backboard visualisation is shown.

    -   **Board**

    -   **Box**

    -   **Stand**

    -   **Raceway Double** – A double raceway backboard.

    -   **Cut to Shape** – The backboard follows the shape of the words.

    -   **Cut To Letter** – The backboard follows the shape of the lettering.

    -   **Custom Shape** – Use your own SVG shape or a shape from the Sign Customiser library.

    All customisers except Neon, Cut-out Metal, Stencil and Lightbox also have these types:

    -   **Raceway Single** – A single raceway backboard.

    -   **Letter Rail** – A bar below the lettering. See **Letter Rail Options**, below.

    ![](/help/intercom-docs/help-centre-images/4779ba560a3af9ecdcbe9c5d936c8469fe15e447c03bc9132d14e2d381ac2e1c.png)

4.  (All customisers except Neon, Cut-out Metal, Stencil and Lightbox) Under **Assign to a letter type**, choose at least one letter type.

    -   You cannot save the backboard without a letter type.

    -   If you try, this message shows: "Assign this backboard to at least one letter type so customers can select it."

    -   If you have no letter types, create one first.

5.  (_Optional_) In the **Button Image**, upload an image. This image is the thumbnail on the backboard selection button.

6.  (_Optional_) In the **Popup Image**, upload a real-life example of the backboard. Customers select the **Example** button next to the backboard to see this image. On desktop screens, they can also hover over the button. The button shows only when you upload a Popup Image.

7.  In **Additional Pricing**, set pricing either to:

    -   **None** – No additional cost is added.

    -   **Base Price** – Adds a fixed amount.

    -   **Price Multiplier** – Multiplies the relevant sign price.
        For example, to add a charge of 20%, enter **1.2** as the multiplier.
        In **Price Multiplier Target**, choose where the multiplier is applied:

        -   **Letter Price Only** – The multiplier is applied to the letter price only.

        -   **Final Price (includes additional costs from other options)** – The multiplier is applied after all the other costs have been added.

    -   **Price per square cm** or **Price per square in** – Charges are based on the width and height of the sign, multiplied by the rate that you enter. The label uses your Store's measurement unit.

        This option does not apply to **Frame Fit**, **Cut-out Metal** or **Stencil** customisers.

8.  Click **Save**.

    -   For a new backboard, a dialog asks if you want to add all of your existing backboard colours and materials to the new backboard.

    -   Click **Yes, add all colours** to add them, or click **No, just create the backboard**.

    -   An existing backboard saves without this dialog.

## Step 4: Additional Settings for Backboards Depending on Backboard Type

### **Customer Image Upload Setting**

In the **Customer Image Upload** section, you can allow customers to upload their own image to use on a backboard.

Customer image uploads are available for these backboard types:

-   **Board**

-   **Box**

-   **Stand**

-   **Cut to Shape**

-   **Custom Shape**

To turn this on:

1.  Select **Allow user to upload image for backboard**.

2.  (_Optional_) Select **Show image on the visualiser**. This option shows after you select the first option. It shows the customer's image on the sign preview.

This feature depends on your plan. If your plan does not include it, the checkbox is disabled. A banner shows this message: "This feature is only available on our latest plans. Please upgrade your plan to enable this feature."

For instructions on setting up customer image uploads, see [Customer designed Backboard Images](../../features/customer-designed-backboard-images/).

### **Cut To Letter Setting**

For a **Cut To Letter** backboard, **Backboard extension from letter** sets how far the backboard extends from the lettering in the visualiser. Enter a value in px. The default is 8. If you turn on multi-layer, set this value for each layer instead.

### **Additional Backboard Display Options Setting**

Use this setting to show a backboard in layers. It works best with 2D channel letters. You can assign colours or materials to each layer.

![](/help/intercom-docs/help-centre-images/a794ac262e1b66d169eec04aa8eaa99390eec68d6cd893dc579a734c7787bfdd.png)

View a demo here: [3 Layers Acrylic letter sign](https://demo.signcustomiser.com/products/3-layers-acrylic-letter-sign).

Multi-layer backboard signs are available for these backboard types:

-   **Cut to Shape**

-   **Cut To Letter**

To create a multi-layer backboard:

1.  In **Additional Backboard Display Options**, enable **Enable Multi-layer Backboard**.

2.  In **Layer 1**, enter:

    -   **Label** – The name of the layer displayed to customers.

    -   **Description** – An optional description of the layer. You can also add a link to an external page.

    -   **Backboard extension from letter** – Controls how far the backboard extends from the lettering in the visualiser.

    ![](/help/intercom-docs/help-centre-images/f5154662c5a8472b79e14703510e0963941cd4b5b4599c0a6412aebcfa1a57d7.png)

3.  Click **Add Another Layer** to add another layer. This layer represents the backboard under the previous layer. Fill in the same fields. You can add up to three layers.

4.  Click **Save**.

<div class="intercom-interblocks-callout" style="background-color: #feedaf80; border-color: #fbc91633;"><p class="no-margin"><b>Note:</b> For each layer, the <b>Backboard extension from letter</b> value must be greater than the value for the previous layer. If it is not, this message shows: "Size must be greater than previous layer to be visible."</p></div>

### **Letter Rail Options**

These options show when you choose **Letter Rail**. Enter:

-   **Bar height** – The thickness of the bar, in px. The default is 20.

-   **Inherit letter style** – The rail uses the same face colour and glow effects as the letters. This setting overrides the colours that you assign to the backboard.

-   **Gap from letters** – The distance, in px, between the bottom of the letters and the top of the bar. Enter 0 so that the bar touches the letters.

### Custom Shapes

The **Custom Shape** option lets you upload your own SVG file as the backboard shape.

![](/help/intercom-docs/help-centre-images/d3893cee71664a10d9b74426e6f2800bb2790bfa7902599d05b2f0ae2003b0f7.png)

View a wooden backboard sign demo here: [Wooden backboard sign demo](https://demo.signcustomiser.com/products/wooden-sign)

**Custom Shape** is available for only these backboard types:

-   **Custom Shape**

To set up a custom shape:

1.  In **Custom Shape**, upload your SVG file or choose a shape from our library.

    ![](/help/intercom-docs/help-centre-images/eb09e59099d245ebf385c5395ce63ba33af430d54d192e0245a38025d78667c4.png)

2.  Adjust the **Top**, **Left**, **Right** and **Bottom** padding below the tight shape preview. This makes sure that the sign text is in the correct position and does not go out of bounds.

    ![](/help/intercom-docs/help-centre-images/f9f10e376f8bf82c879cb5f60bdcd89934bf7400952345b79f72df075fb681bd.png)

3.  Click **Save**.

<div class="intercom-interblocks-callout" style="background-color: #e3e7fa80; border-color: #334bfa33;"><p class="no-margin"><b>Why does my backboard shape look different?</b></p><p class="no-margin">Your SVG should meet these rules:</p><ul><li><p class="no-margin">Use <b>fill attributes</b></p></li><li><p class="no-margin">Consist of <b>solid-filled shapes.</b></p></li></ul><p class="no-margin">For more information, see <b><a href="../../features/backboard-shapes-why-are-fill-attributes-important-for-your-svg-files/" target="_blank" class="intercom-content-link">Backboard shapes: Why Are "Fill" Attributes Important for Your SVG Files?</a></b>.</p></div>

## Step 5: Add Backboard Colours & Materials

You can create colour and texture options for materials such as acrylic, wood or metal. Use a solid colour, or add an image as a texture for a more realistic look. You can assign one material to several backboards.

<div class="intercom-interblocks-callout" style="background-color: #feedaf80; border-color: #fbc91633;"><p class="no-margin"><b>Note:</b> Create at least one backboard first. Each colour or material must be assigned to at least one backboard.</p></div>

To add a colour or texture:

1.  While still in **Backboards**, scroll to the **Backboard Colours & Materials** section.

2.  Click **Add Backboard Colour**. If the list is empty, click **Add New Backboard Colour**.

3.  In **Label**, enter the name that customers see for the backboard colour or material.

4.  Under **Material Type**, select either:

    -   **Colour** – Use the colour picker to choose the colour.

    -   **Texture** – Upload an image of the backboard material, or choose one from our library.

        -   The file must be .jpg, .png or .webp. The maximum size is 2 MB.

5.  Check or uncheck **Apply colour to backboard visualisation?** (for a colour) or **Apply texture to backboard visualisation?** (for a texture):

    -   **Checked** – The colour or texture is displayed on the backboard visualisation.

    -   **Unchecked** – The colour or texture is only displayed on the option button.

6.  In the **Assign to a backboard** section, select the backboards where the colour or texture is available.

7.  (Multi-layer backboards only) Under **Assign to a layer**, select the layers where the colour or texture is available. This section shows only when a backboard that you selected has multi-layer turned on.

    ![](/help/intercom-docs/help-centre-images/e15787374f1a37cc584f995827da9d9f5450bc00db10870416742bd5e8b9f776.png)

    ![The New Backboard Colour form with Material Type, the apply-to-visualisation checkbox and Assign to a backboard.](/help/intercom-docs/help-centre-images/2f9fd1a609d71a8131c7a87385b5beef9cab2fd1f9128f570a0f8d138f995bdf.png)

    <div class="intercom-interblocks-callout" style="background-color: #feedaf80; border-color: #fbc91633;"><p class="no-margin"><b><i>Can't see any backboards?</i></b></p><p class="no-margin">You probably did not create a backboard yet. Follow Step 3: Add a Backboard, above, and create one.</p></div>

8.  (_Optional_) In the **Minimum Size** section, set the smallest sign size for this material. Enter:

    -   **Minimum Width** – The sign width needed for this material. A value of 0 means no minimum.

    -   **Minimum Height** – The sign height needed for this material. A value of 0 means no minimum.

    The **Rule** in the next step decides whether the width, the height or both must be reached. If the minimum size is not reached, customers cannot continue with this material. By default, they see this message: "The selected backboard colour is only available for larger sizes."

    ![](/help/intercom-docs/help-centre-images/ced8ea72b58756da443c87862eea336b00b97e915e1460140e29177316de245f.png)

9.  Under **Rule**, choose how the **Minimum Width** and **Minimum Height** are applied:

    -   **Disable until one of the minimum values is reached.** – Customers can continue with this material when either the minimum width or the minimum height is reached. If one of the two values is 0, this rule never stops customers.

    -   **Disable until both minimum values are reached.** – Customers can continue with this material only when both the minimum width and the minimum height are reached.

10.  (_Optional_) In the **Preview Image**, upload an image. This image is the thumbnail on the selection button.

11.  (_Optional_) In the **Example Image**, upload a real-life example of the backboard. Customers select the **Example** button to see this image.

12.  In **Additional Pricing**, set pricing either to:

     -   **None** – No additional cost is added.

     -   **Base Price** – Adds a fixed amount.

     -   **Price Multiplier** – Multiplies the relevant sign price.
         For example, to add a charge of 20%, enter **1.2** as the multiplier.
         In **Price Multiplier Target**, choose where the multiplier is applied:

         -   **Letter Price Only** – The multiplier is applied to the letter price only.

         -   **Final Price (includes additional costs from other options)** – The multiplier is applied after all the other costs have been added.

13.  Click **Save**.

## Design Layout Options for Backboard and Materials

Backboard colours and textures can show next to each backboard option. They can also show in a separate section below the backboards.

To find the setting:

1.  Click your customiser.

2.  From the left-hand menu, go to **Settings → General Settings**.

3.  In the **General Style Settings** section, scroll down to **Backboard Colour Location**.

    ![General Settings in the customiser admin, with the Backboard Colour Location field in General Style Settings.](/help/intercom-docs/help-centre-images/3466b6f45a894cca85a613c53f68399e2d64b7888483d13e91963ca6014495f5.png)

4.  Choose how customers pick their backboard and material:

    -   **Detached - Displays underneath other selections** – Displays the backboard colours and textures below the Backboard section as a section of its own.
        ​
        ​**Note:** The available colour and material options change according to which backboards are selected.

        ![](/help/intercom-docs/help-centre-images/5676b33dd82fe999a8ba2f30f85e4323f2d61a449ab8414f43108560141d8c6d.png)

    -   **Inline - Show colours alongside the selected backboard** – Displays the available colours and textures within their respective backboard options.

        ![](/help/intercom-docs/help-centre-images/60a9fafe9b2ddb365d761a324ba425ef27205882d4e76da6013e62d593500842.png)

    <iframe src="https://www.youtube.com/embed/ZlwrTEy0oLA?rel=0" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" allow="autoplay; fullscreen; picture-in-picture; encrypted-media"></iframe>
