Adding Custom CSS Styles or JavaScript in Sign Customiser

Sign Customiser allows you to customize the app's front end using CSS and JavaScript code to align it with your store design. However, please note that some class names may change after an update. To ensure proper customization, it is important to choose specific class names. This document will guide you in finding the correct class names and demonstrate how to use them to modify the app's front end.

Finding element class names

1. Open your customiser page on the live site and right-click. Select "Inspect"

   

2. Click on the arrow button at the top-left corner of the window that appears, and use it to select the element you wish to customize. For example, if you select a color button, you may see a list of HTML classes like "sc-dFtzxp iALNSk npc-preview-selector".

   

3. Avoid using class names starting with "sc-" or those that appear to be automatically generated (such as "iALNSk"). Instead, focus on using the class name starting with "npc-", like "npc-preview-selector" in this case.

Adding custom code

With the element class name identified create your own CSS or Javascript code. Then navigate to your theme and locate the section where you can add custom CSS or JavaScript code. The position of this code field may vary depending on your theme.

Adding custom code to template liquid file

From your Shopify dashboard, go to Online Store > Themes > Select your current theme > Edit Code then choose your customiser template liquid file. It looks like product.template-name.liquid or page.template-name.liquid, click on the file to edit it.

You can add your custom code to the template directly by wrapping it in a <style></style> tag with CSS code and <script></script> with Javascript code.

Adding custom code to your theme

Please note that each theme may have a different location for adding custom code. We recommend reaching out to your theme's support or contacting us if you cannot find the appropriate section to add your code. It's important to mention that adding custom code to your theme will impact your entire store. To avoid affecting other HTML elements in your store, we strongly advise adding #neon-customiser-app before your selector in the code.

Example CSS codes

Here are a few common custom codes you can use to modify the front-end style of your customisers:

Round color selector buttons

CSS Code:

#neon-customiser-app .npc-preview-selector > span,
#neon-customiser-app .npc-preview-selector > span::before {
  border-radius: 50%;
}

Result:

4 fonts on a row on desktop

CSS Code:

@media screen and (min-width: 1025px) {
  #neon-customiser-app .npc-font-button {
    min-width: calc((100% - 45px) / 4);
    width: calc((100% - 45px) / 4);
    margin: 0px 5px 10px;
  }
}

Result:

3 fonts on a row on mobile

CSS Code:

@media screen and (max-width: 1024px) {
  #neon-customiser-app .npc-font-button {
    max-width: 32%;
    width: 100%;
  }
}

Result:

If you need any help with customizing the app front-end, don't hesitate to contact us at support@neonproductcustomiser.com