Custom CSS

This guide will walk you through the recommended way to apply custom CSS changes, locate element class names, use example CSS codes, and explore alternative methods of adding CSS in Shopify themes

Below, you'll find quick links to each section covered in detail:

How to add custom CSS the right way

How to find element class names for your CSS code

Examples of CSS codes

How to Add Custom CSS the Right Way

This guide will explain the recommended way you can add custom CSS for Universal and Shopify users.

  1. Open the Sign Customiser app settings.
  2. Click on Customisers in the app menu.
  3. Select the customiser you want to edit.
  4. Click on the Preview button on the top right of the page to preview your customiser.
  5. At the top of the preview, click the Edit CSS button.

  6. A text field will appear on the right side where you can add your custom CSS code.

  7. Save your changes for the CSS to take effect on the frontend.

How to find element class names for your CSS code

Targeting specific elements with CSS requires identifying the right class names. Here’s how to find them:

Please note that class names within the app may change after updates, so selecting specific and stable class names is crucial for effective customization.

  1. Open your customiser page on the live site.
  2. Right-click on the page and select Inspect.

  3. In the browser’s developer tools, click the arrow icon in the top-left corner. Use it to select the element you want to customize.

  4. A list of HTML class names will appear in the elements panel. Look for classes starting with the "npc-" prefix, as these are specific to the Sign Customiser. For example, npc-background-preview-selector npc-selected npc-selections-background-item tw-bg-none.

Example CSS Codes

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


Example: 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:


Example: 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:

Example: 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 is 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.