# Target customiser parts with stable CSS class names

Use 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.

- Source URL: https://www.signcustomiser.com/help/customise/17646383-target-customiser-parts-with-stable-css-class-names/
- Markdown URL: https://www.signcustomiser.com/help/customise/17646383-target-customiser-parts-with-stable-css-class-names.md
- Category: Customise
- Last updated: 2026-10-17

## Article

Most visible parts of the customer customiser have a CSS class name. Sign Customiser does not rename these names. Use them in your custom CSS to style buttons, forms, pop-ups and the wrapper around the customiser. Sign Customiser keeps these class names after an update. This article is for merchants who write CSS.

## Before you start

-   You must know basic CSS.

-   Read [Custom CSS](../../customise/custom-css/). It shows how to add CSS and gives example code.

## Stable prefixes

Two prefixes are stable.

-   **`npc-`** names are for the customer customiser. They cover the options panel, the preview area, forms, prices, loading screens, pop-ups and the Customiser Links page. Examples: `npc-sidebar`, `npc-frame-preview`, `npc-selections-font-list`.

-   **`sc-`** names are for the wrapper in your web page. They cover the container, the customiser frame, the pop-up (modal) shell and the loading placeholder. Examples: `sc-embed-container`, `sc-customiser-frame`, `sc-customiser-modal-overlay`.

Other class names are not stable. Tailwind classes that start with `tw-`, IDs other than `#neon-customiser-app`, and `data-testid` values can change in an update. Do not use them in your CSS.

## Where to put your CSS

The display mode of the customiser decides which CSS can affect it.

<table role="presentation" style="border: 1px solid #c6c9c0; border-radius: 6px; border-collapse: separate; border-spacing: 0;"><tbody><tr><td style="padding: 8px;"><p class="no-margin"><b>Display mode</b></p></td><td style="border-left: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin"><b>Where to put <code>npc-</code> CSS</b></p></td></tr><tr><td style="border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin">Shopify <b>Sign Customiser</b> block (default)</p></td><td style="border-left: 1px solid #c6c9c0; border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin"><b>Edit CSS</b> or your theme CSS. The customiser is part of your page. Both can affect it.</p></td></tr><tr><td style="border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin">Shopify block with <b>Use iframe (experimental)</b> on, the <code>sign-customiser-embed</code> element, a pop-up (modal), or the admin preview</p></td><td style="border-left: 1px solid #c6c9c0; border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin"><b>Edit CSS</b> only. The customiser is in an iframe. Theme CSS cannot affect the content of an iframe.</p></td></tr><tr><td style="border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin">Customiser Links page (hosted)</p></td><td style="border-left: 1px solid #c6c9c0; border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin"><b>Edit CSS</b> only.</p></td></tr></tbody></table>

Put `sc-` CSS in your theme CSS. The `sc-` wrapper is part of your page.

To save CSS in **Edit CSS**, do these steps:

1.  Open the customiser in the merchant admin. [Custom CSS](../../customise/custom-css/) shows the full path.

2.  Click **Edit CSS** above the preview. If the preview is not on the page, click **Preview** in the page header first.

3.  Type your CSS in the **Custom CSS** box. The preview updates when you stop typing.

4.  Click **Save**.

![The customiser preview toolbar with the Edit CSS button pressed and the Custom CSS text box and Save button open beside the preview](/help/intercom-docs/help-centre-images/9ca8e805a877b09cacffda99c86643541500e6835338fd5a974a8fa3b2346a12.png)

Saved CSS applies in all display modes: inline, iframe, hosted and pop-up.

## Style a part of the customiser

Write one rule for each part. Start the rule with the stable class name.

```css
#neon-customiser-app .npc-selections-font-list .npc-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
```

The `#neon-customiser-app` container holds the options panel, the preview area and the other main parts.

### Pop-ups, tooltips and loading screens

These parts are not inside `#neon-customiser-app`. The customiser adds them at the end of the page body. Each part has the class `npc-portal` and a class of its own. Write the rule without `#neon-customiser-app`:

```css
.npc-portal.npc-image-modal {
  background: rgba(0, 0, 0, 0.8);
}
```

A rule that starts with `#neon-customiser-app` does not match these parts.

<table role="presentation" style="border: 1px solid #c6c9c0; border-radius: 6px; border-collapse: separate; border-spacing: 0;"><tbody><tr><td style="padding: 8px;"><p class="no-margin"><b>Part</b></p></td><td style="border-left: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin"><b>Class</b></p></td></tr><tr><td style="border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin">Message pop-up</p></td><td style="border-left: 1px solid #c6c9c0; border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin"><code>npc-message-modal</code></p></td></tr><tr><td style="border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin">Plain pop-up</p></td><td style="border-left: 1px solid #c6c9c0; border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin"><code>npc-plain-modal</code></p></td></tr><tr><td style="border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin">Image pop-up</p></td><td style="border-left: 1px solid #c6c9c0; border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin"><code>npc-image-modal</code></p></td></tr><tr><td style="border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin">Loading screen</p></td><td style="border-left: 1px solid #c6c9c0; border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin"><code>npc-loading-screen</code></p></td></tr><tr><td style="border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin">Add-to-cart progress window</p></td><td style="border-left: 1px solid #c6c9c0; border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin"><code>npc-add-to-cart-loader</code></p></td></tr><tr><td style="border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin">Tooltip</p></td><td style="border-left: 1px solid #c6c9c0; border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin"><code>npc-custom-tooltip-content</code></p></td></tr><tr><td style="border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin">Image preview on hover</p></td><td style="border-left: 1px solid #c6c9c0; border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin"><code>npc-hover-image-content</code></p></td></tr><tr><td style="border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin">Image crop pop-up</p></td><td style="border-left: 1px solid #c6c9c0; border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin"><code>npc-support-colour-crop-modal</code></p></td></tr></tbody></table>

### States

A part can have a state class. A state class is the base class, two hyphens and a state word. These state words are examples:

-   `--active`, for example `npc-visualiser-control--active`

-   `--open`, for example `npc-selections-letter-part-card--open`

-   `--disabled`, for example `npc-share-button--disabled`

-   `--error`, for example `npc-add-to-cart-loader--error`

The add-to-cart progress window has one state class for each stage: `--generating`, `--uploading`, `--creating-product`, `--adding-to-cart`, `--success` and `--error`. Add the state word to `npc-add-to-cart-loader`.

Some selected options have the older class `npc-selected`. Only parts that had this class before have it.

A part has a state class only while it is in that state. Use Inspect to see the classes that a part has now.

### The wrapper in your page

<table role="presentation" style="border: 1px solid #c6c9c0; border-radius: 6px; border-collapse: separate; border-spacing: 0;"><tbody><tr><td style="padding: 8px;"><p class="no-margin"><b>Part</b></p></td><td style="border-left: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin"><b>Class</b></p></td></tr><tr><td style="border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin">Container around the customiser</p></td><td style="border-left: 1px solid #c6c9c0; border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin"><code>sc-embed-container</code></p></td></tr><tr><td style="border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin">The customiser element</p></td><td style="border-left: 1px solid #c6c9c0; border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin"><code>sc-customiser-host</code></p></td></tr><tr><td style="border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin">The iframe</p></td><td style="border-left: 1px solid #c6c9c0; border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin"><code>sc-customiser-frame</code></p></td></tr><tr><td style="border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin">Button of the <b>Sign Customiser Modal</b> block</p></td><td style="border-left: 1px solid #c6c9c0; border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin"><code>sc-customiser-modal-button</code></p></td></tr><tr><td style="border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin">Pop-up background</p></td><td style="border-left: 1px solid #c6c9c0; border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin"><code>sc-customiser-modal-overlay</code></p></td></tr><tr><td style="border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin">Pop-up box</p></td><td style="border-left: 1px solid #c6c9c0; border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin"><code>sc-customiser-modal-content</code></p></td></tr><tr><td style="border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin">Pop-up close button</p></td><td style="border-left: 1px solid #c6c9c0; border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin"><code>sc-customiser-modal-close</code></p></td></tr><tr><td style="border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin">Message for missing embed settings</p></td><td style="border-left: 1px solid #c6c9c0; border-top: 1px solid #c6c9c0; padding: 8px;"><p class="no-margin"><code>sc-validation-error</code></p></td></tr></tbody></table>

The pop-up shell has inline styles for its size and colours. Add `!important` to your rule to change them. Put the rule in your theme CSS.

To add your own class to the **Sign Customiser Modal** block button, use the **Additional Button Classes** setting in the theme editor. [Modal display](../../customise/modal-display/) shows the setup.

## Find a class name

1.  Open your customiser page.

2.  Right-click the part you want to style. Click **Inspect**.

3.  The **Elements** panel selects the part in the DOM tree. Read its `class` attribute. Find the names that start with `npc-` or `sc-`.

4.  For a pop-up, open the pop-up first. Then look near the end of the `body` element.

![The customer customiser with the sign preview on the left and the options panel on the right](/help/intercom-docs/help-centre-images/01236584e96863d32ebe1ef5a4acd9b09b55bfb46a1d6d06be4cf8620066ce0b.png)

## Limits

-   The sign is drawn on a canvas. CSS cannot change the text or the shapes of the sign. You can style the frame around the sign, for example `npc-frame-preview`.

-   Only `npc-` and `sc-` class names are stable. Do not use `tw-` classes.

-   Sign Customiser does not rename a stable class. It removes a class only when no customiser part uses it and no store's custom CSS targets it. An update can add new classes.

## Related articles

-   [Custom CSS](../../customise/custom-css/)

-   [Modal display](../../customise/modal-display/)