Custom CSS


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 "npc-background-preview-selector npc-selected npc-selections-background-item tw-bg-none tw-bg-transparent tw-border-0 tw-py-[5px] tw-px-[3px]".



  3. Look for class names starting with the "npc-" prefix, like "npc-background-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 using custom liquid section

From your Shopify dashboard, go to Online Store > Themes > Select your current theme > Customize


Then select your sign customiser product or page template.


Choose to add a Custom Liquid section. The section name may vary in different themes.



Paste your custom code into the Liquid section. CSS code needs to be wrapped in a <style></style> tag, while JavaScript code needs a <script></script> tag.


Some themes don't provide a custom Liquid section, so you may need to add the custom code directly to your theme. However, the code will not remain after theme updates.



Example CSS codes

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


Color selector buttons

Display 8 buttons on a row and round them.

CSS Code:

#neon-customiser-app .npc-selections-color .npc-preview-selector span {
    width: 36px;
    height: 36px;
}
#neon-customiser-app .npc-selections-color .npc-preview-selector span, #neon-customiser-app .npc-selections-color .npc-preview-selector span::before {
    border-radius: 50%;
}
#neon-customiser-app .npc-selections-color .npc-selections-color-previews .npc-list {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto;
    justify-content: space-between;
}

Result:


4 fonts on a row on desktop

CSS Code:

@media (min-width: 1025px) {
    #neon-customiser-app .npc-selections-font .npc-selections-font-list .npc-list {
        grid-template-columns: repeat(4, minmax(0px, 1fr));
    }
}

Result:

3 fonts on a row on mobile

CSS Code:

@media (max-width: 1024px) {
    #neon-customiser-app .npc-selections-font .npc-selections-font-list .npc-list {
        grid-template-columns: repeat(3, minmax(0px, 1fr));
    }
}

Result:


Visit our custom CSS demo page to look at some custom design. Here are the full custom code we use.

<style>
  /* CSS introduce text */
  #custom-css-explanation {
    max-width: 1000px;
    margin: auto;
  }
  #custom-css-explanation h2 {
    text-align: center;
  }
    #custom-css-explanation p {
    margin: 0px 10px;
  }

  #neon-customiser-app .npc-frame-preview.npc-review-frame {
    background: linear-gradient(0deg, rgb(101, 40, 107) 0%, rgb(42, 31, 61) 79%);
  }
  #neon-customiser-app .npc-frame-preview.npc-review-frame .npc-review-header>div {
    color: white;
  }
  
  #neon-customiser-app .npc-title-example>button,
  #neon-customiser-app .npc-selection-button-example-button{
    font-size: 18px;
    line-height: 1;
    color: rgba(1,1,1,0) !important;
    font-weight: 400;
    height:16px;
    width: 16px;
    overflow: hidden;
    background-image: url('https://cdn.shopify.com/s/files/1/0652/9413/9630/files/eye-blue.svg') !important;
    background-repeat: no-repeat;
    background-size: cover;
}
  #neon-customiser-app .npc-title-example>button:hover,
  #neon-customiser-app .npc-selection-button-example-button:hover {
    color: rgba(1,1,1,0) !important;
    background-image: url('https://cdn.shopify.com/s/files/1/0652/9413/9630/files/eye.svg') !important;
  }

  /* Set max width */
  #neon-customiser-app .npc-main-container {
    margin: auto;
    max-width: 1600px;
    line-height: 1.2;
  }
   @media screen and (min-width: 1025px) {
    #neon-customiser-app .npc-frame-preview,
    #neon-customiser-app .npc-custom-design{
      margin-right: 8px;
    }
     #neon-customiser-app .npc-sidebar {
       margin-left: 8px;
     }
       div#neon-customiser-app {
    margin: 20px 20px 0px 20px;
  }
   }

   @media screen and (max-width: 1024px) {
    #neon-customiser-app .npc-frame-preview {
      margin-bottom: 12px;
    }
       div#neon-customiser-app {
    padding: 20px 0px 0px 0px;
  }
   }

  #neon-customiser-app .npc-selection-button-subtitle,
  #neon-customiser-app .npc-selection-button-example-subtitle {
    font-weight: 400;
  }
#neon-customiser-app .npc-custom-design {
background: linear-gradient(0deg, rgb(101, 40, 107) 0%, rgb(42, 31, 61) 79%);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
    border-radius: 20px;
    border: lightgrey solid 4px;
    overflow: scroll;
    }
 #neon-customiser-app .npc-custom-design .npc-custom-design-heading {
   margin-bottom: 100px;
 }
#neon-customiser-app .npc-custom-design .npc-custom-design-steps {
  max-width: 90%;
  padding: 0px;
}
#neon-customiser-app .npc-custom-design .npc-custom-design-steps h2 {
  line-height: 1.2;
  margin-top: 12px;
}
#neon-customiser-app .npc-custom-design .npc-custom-design-steps p {
  color: white;
}
#neon-customiser-app .npc-custom-design .npc-custom-design-steps div:nth-child(1)::before {
    background-image: url('https://cdn-icons-png.flaticon.com/128/427/427735.png');
}

#neon-customiser-app .npc-custom-design .npc-custom-design-steps > div:nth-child(2)::before {
    background-image: url('https://cdn-icons-png.flaticon.com/128/1651/1651602.png');
}

#neon-customiser-app .npc-custom-design .npc-custom-design-steps > div:nth-child(3)::before {
    background-image: url('https://cdn-icons-png.flaticon.com/128/10152/10152776.png');
}
#neon-customiser-app .npc-custom-design .npc-custom-design-steps:last-child > div:nth-child(1)::before {
    background-image: url('https://cdn-icons-png.flaticon.com/64/609/609361.png');
}
#neon-customiser-app .npc-custom-design-steps > div::before {
    content: "";
    display: inline-block;
    width: 48px;
    height: 48px;
    background-repeat: no-repeat;
    background-size: contain;
  }

#neon-customiser-app .npc-sidebar-custom-design a.npc-button-container {
  background: var(--secondary-neon-colour);
  border-radius: 30px;
  margin: 30px auto;
  max-width: 70%;
  padding: 12px 28px;
  font-size: 16px;
}
#neon-customiser-app .npc-sidebar-custom-design a.npc-button-container span {
  color: white;
}
#neon-customiser-app .npc-sidebar-custom-design a.npc-button-container span::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('https://cdn.shopify.com/s/files/1/0652/9413/9630/files/upload.png?v=1687333556');
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 5px;
  position: relative;
  top: 3px;
}

  /* CSS Seperate the visualiser panel from the options panel */
    #neon-customiser-app .npc-frame-preview,
    #neon-customiser-app .npc-sidebar {
    border-radius: 20px;
    border: lightgrey solid 4px;
    overflow: hidden;
  }
  #neon-customiser-app .npc-selections-backboard .npc-list {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 1fr;
  }
  #neon-customiser-app .npc-list .npc-button-container {
    padding: 8px;
  }
  #neon-customiser-app .npc-list .npc-button-container .npc-selection-button-example-title {
    margin-right: unset;
  }
  /* CSS size items */
  #neon-customiser-app .npc-selections-size .npc-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: auto;
    gap: 4px;
  }
  #neon-customiser-app .npc-selections-size .npc-list > :nth-last-child(1) {
    grid-column: 1 / span 5;
  }

  #neon-customiser-app .npc-selections-size .npc-selection-button .npc-button-container {
    padding: 12px 4px 4px;
    margin-bottom: 4px;
  }

  #neon-customiser-app .npc-selections-size .npc-selections-size-custom-description {
    margin-bottom: 0px;
  }

  /* CSS size items text, icon */
  #neon-customiser-app .npc-selections-size .npc-selection-button .npc-selection-button-subtitle {
    text-align: center;
    font-weight: 400;
  }



  #neon-customiser-app .npc-selections-size .npc-selection-button:last-child .npc-selection-button-subtitle::after {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url('https://www.svgrepo.com/show/277455/edit-tools-ruler.svg');
    background-repeat: no-repeat;
    background-size: cover;
  }
  #neon-customiser-app .npc-selections-size .npc-selection-button .npc-button-container>div>div {
    justify-content: center;
    text-align: center;
  }


  #neon-customiser-app .npc-selections-size .npc-selections-size-slider+div{
    margin-top: 3px;
  }
    #neon-customiser-app .npc-selections-size .npc-selections-size-slider input {
      width: 90%;
    }
  #neon-customiser-app .npc-selections-size .npc-selection-button:last-child .npc-button-container {
    margin: 0px;

  }
  #neon-customiser-app .npc-selections-size .npc-selection-button:last-child .npc-button-container.HjdDW {
        border-bottom: none;
        border-radius: 4px 4px 0px 0px;
  }
  #neon-customiser-app .npc-selections-backboard .npc-selection-button-example .npc-button-container {
    border-radius: 4px;
    background: #f1f1f1;
  }

  /* Jacket */
  #neon-customiser-app .npc-selections-jacket .npc-list {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 1fr;
  }

  #neon-customiser-app .npc-selections-jacket p.npc-selection-button-title {
    display: grid;
    width: 100%;
  }

  #neon-customiser-app .npc-selections-jacket .npc-selection-button-title::before {
    content: "";
    display: inline-block;
    width: 72px;
    height: 12px;
    border-radius: 5px;
    background-color: white;
    margin: 4px 0px 16px;
    border: 1px solid var(--outline-neon-colour);
  }
  #neon-customiser-app .npc-selections-jacket .npc-selection-button:last-child .npc-selection-button-title::before {
    background-color: var(--sign-colour);
  }
  /* Set min height for input textarea */
  #neon-customiser-app .npc-selections-text textarea {
    min-height: 90px;
    width: 100% !important;
    border: 1px solid var(--secondary-neon-colour);
  }
  #neon-customiser-app .npc-selections-text textarea:focus-visible{
    box-shadow: 0 0 0 0 red,0 0 .5rem .4rem rgba(var(--color-foreground),.3);
  }

  /* Adjust min height and width for input textarea on screens below 1024px */
  @media screen and (max-width: 1024px) {
    #neon-customiser-app .npc-selections-text textarea {
      min-height: 90px;
      width: calc(100% - 28px) !important;
    }
  }

  /* Set min height for additional options note textarea */
  #neon-customiser-app .npc-selections-additional-item textarea {
    min-height: 150px;
    width: 100% !important;
  }

  /* Round color selector buttons */
  #neon-customiser-app .npc-selections-color .npc-preview-selector span,
  #neon-customiser-app .npc-selections-color .npc-preview-selector span::before {
    border-radius: 50%;
  }
  #neon-customiser-app .npc-selections-color .npc-preview-selector span {
    width: 36px;
    height: 36px;
  }

  
  #neon-customiser-app .npc-selections-color .npc-selections-color-previews .npc-list {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto;
    justify-content: space-between;
  }
  /* Display 4 fonts on a row on desktop */
  @media (min-width: 1025px) {
    #neon-customiser-app .npc-selections-font .npc-selections-font-list .npc-list {
        grid-template-columns: repeat(4, minmax(0px, 1fr));
    }
  }

  @media (max-width: 1024px) {
    #neon-customiser-app .npc-selections-font .npc-selections-font-list .npc-list {
        grid-template-columns: repeat(3, minmax(0px, 1fr));
    }
  }

  /* Reduce height of font buttons */
  #neon-customiser-app .npc-selections-font .npc-font-button {
    height: 40px;
    padding: 0px 4px;
  }

  /* Change position of the currently selected font and align buttons */
  #neon-customiser-app .npc-selections-font .npc-selections-font-description + div {
    justify-content: space-between;
  }


  #neon-customiser-app .npc-selections-size .npc-list {
    justify-content: center !important;
  }

    #neon-customiser-app  .npc-selections-additional-item:last-child textarea {
    background: #f1f1f1;
    border: 1px solid var(--secondary-neon-colour);
    outline: none;
  }
  #neon-customiser-app .npc-selections-additional-item:last-child textarea:focus-visible {
    box-shadow: 0 0 0 0 red,0 0 .5rem .4rem rgba(var(--color-foreground),.3);
  }

 /* Center background buttons on desktop*/
  @media screen and (min-width: 1025px) {
    #neon-customiser-app .npc-selections-background {
      left: 50%;
      transform: translateX(-50%);
    }
    #neon-customiser-app .npc-selections-background .npc-selections-background-list {
      justify-content: center;
    }
  }
   #neon-customiser-app .npc-selections-background .npc-selections-background-item> span{
     border-radius: 50%;
   }

      #neon-customiser-app .npc-sidebar-review .npc-sidebar-review-details>p {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: space-between;
        width: 100%;
        border-bottom: 1px solid grey;
      }
  #neon-customiser-app .npc-sidebar-review .npc-sidebar-review-details > p b::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-size: cover;
  margin-right: 5px;
    vertical-align: text-top;
}

#neon-customiser-app .npc-sidebar-review .npc-sidebar-review-details p:nth-child(2) b::before {
      background-image: url(https://cdn.shopify.com/s/files/1/0652/9413/9630/files/ruler_1.png?v=1688752479); 
}
#neon-customiser-app .npc-sidebar-review .npc-sidebar-review-details p:nth-child(3) b::before {
      background-image: url(https://cdn.shopify.com/s/files/1/0652/9413/9630/files/pen.png?v=1688752530); 
}
#neon-customiser-app .npc-sidebar-review .npc-sidebar-review-details p:nth-child(4) b::before {
      background-image: url(https://cdn.shopify.com/s/files/1/0652/9413/9630/files/font.png?v=1688750267); 
}
#neon-customiser-app .npc-sidebar-review .npc-sidebar-review-details p:nth-child(5) b::before {
      background-image: url(https://cdn.shopify.com/s/files/1/0652/9413/9630/files/color-palette.png?v=1688750365); 
}  
#neon-customiser-app .npc-sidebar-review .npc-sidebar-review-details p:nth-child(6) b::before {
      background-image: url(https://cdn.shopify.com/s/files/1/0652/9413/9630/files/blackboard.png?v=1688751181); 
}  
#neon-customiser-app .npc-sidebar-review .npc-sidebar-review-details p:nth-child(7) b::before {
      background-image: url(https://cdn.shopify.com/s/files/1/0652/9413/9630/files/chalk-board.png?v=1688751326); 
} 
#neon-customiser-app .npc-sidebar-review .npc-sidebar-review-details p:nth-child(8) b::before {
      background-image: url(https://cdn.shopify.com/s/files/1/0652/9413/9630/files/pipe.png?v=1688751736); 
} 
#neon-customiser-app .npc-sidebar-review .npc-sidebar-review-details p:nth-child(9) b::before {
      background-image: url(https://cdn.shopify.com/s/files/1/0652/9413/9630/files/metal.png?v=1688751936); 
} 
#neon-customiser-app .npc-sidebar-review .npc-sidebar-review-details p:nth-child(10) b::before {
      background-image: url(https://cdn.shopify.com/s/files/1/0652/9413/9630/files/desktop.png?v=1688752038); 
} 
#neon-customiser-app .npc-sidebar-review .npc-sidebar-review-details p:nth-child(11) b::before {
      background-image: url(https://cdn.shopify.com/s/files/1/0652/9413/9630/files/remote.png?v=1688752108); 
} 
#neon-customiser-app .npc-sidebar-review .npc-sidebar-review-details p:nth-child(12) b::before {
      background-image: url(https://cdn.shopify.com/s/files/1/0652/9413/9630/files/plug.png?v=1688752246); 
} 
#neon-customiser-app .npc-sidebar-review .npc-sidebar-review-details p:nth-child(13) b::before {
      background-image: url(https://cdn.shopify.com/s/files/1/0652/9413/9630/files/audio-jack.png?v=1688752345); 
} 
#neon-customiser-app .npc-sidebar-review .npc-sidebar-review-details p:nth-child(14) b::before {
      background-image: url(https://cdn.shopify.com/s/files/1/0652/9413/9630/files/writing.png?v=1688752422); 
} 
</style>
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.