Sign Customiser

https://docs.signcustomiser.com/
Admin
Sign Customiser is a platform that provides tools and features for designing, pricing, managing, and...
Tokens:14,573
Snippets:73
Trust Score:8.1
Update:1 year ago
Show doc for...
Tokens:
Raw
### Console Error Example

Source: https://docs.signcustomiser.com/en/articles/10529493-generic-integration-guide

Example of a console error message when syncing product fails.

```javascript
console.error('Failed to sync product:', error);
```

--------------------------------

### CSS Styling for Color Selectors

Source: https://docs.signcustomiser.com/article/67-adding-custom-styles-to-customizer

Styles the color selection interface, ensuring color preview buttons are circular and arranging color previews in a grid.

```CSS
/* 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;
  }
```

--------------------------------

### CSS Grid Layout for Size Selections

Source: https://docs.signcustomiser.com/article/67-adding-custom-styles-to-customizer

Defines a responsive grid layout for size selection options. It adjusts the number of columns based on screen width and styles individual buttons and their associated subtitles.

```CSS
#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;
  }
```

--------------------------------

### CSS Styling for Text Input Areas

Source: https://docs.signcustomiser.com/article/67-adding-custom-styles-to-customizer

Sets minimum height and width for textarea elements used for text input and additional notes. Includes a focus-visible style for textareas and a responsive adjustment for smaller screens.

```CSS
/* 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;
  }
```

--------------------------------

### Enable RTL for Universal Platform Sign Customiser

Source: https://docs.signcustomiser.com/en/articles/10529519-rtl-support

This example demonstrates how to append '?rtl=true' to the Sign Customiser embed URL within an iframe tag. This enables RTL display for users on the Universal platform. Verify theme compatibility before implementation.

```html
<iframe src="https://web.signcustomiser.com/embed/YOUR_CUSTOMISER_ID?rtl=true></iframe>

```

--------------------------------

### CSS Styling for Text Input Textareas

Source: https://docs.signcustomiser.com/en/articles/10529547-custom-css

Sets minimum height and width for text input textareas. It also includes styles for focus states and a media query to adjust the width for screens smaller than 1024px.

```css
#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);
  }
  @media screen and (max-width: 1024px) {
    #neon-customiser-app .npc-selections-text textarea {
      min-height: 90px;
      width: calc(100% - 28px) !important;
    }
  }
```

--------------------------------

### CSS Grid Layout for Color Previews

Source: https://docs.signcustomiser.com/en/articles/10529547-custom-css

Defines a CSS grid layout for color previews, displaying them in multiple columns. `grid-template-columns: auto auto auto auto auto auto auto auto;` and `justify-content: space-between;` are used to arrange the previews.

```css
#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;
  }
```

--------------------------------

### CSS Styling for Jacket Selection Buttons

Source: https://docs.signcustomiser.com/en/articles/10529547-custom-css

Styles the layout and pseudo-elements for jacket selection buttons. It uses a two-column grid and styles a `::before` pseudo-element to create a visual indicator for the selected jacket color.

```css
#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);
  }
```

--------------------------------

### CSS Styling for Additional Options Textarea

Source: https://docs.signcustomiser.com/en/articles/10529547-custom-css

Sets a minimum height and full width for the additional options note textarea. This ensures adequate space for user input in this section.

```css
#neon-customiser-app .npc-selections-additional-item textarea {
    min-height: 150px;
    width: 100% !important;
  }
```

--------------------------------

### Embed Sign Customiser iframe and JavaScript

Source: https://docs.signcustomiser.com/article/213-wordpress-integration-and-theme-setup

This code snippet demonstrates how to embed the Sign Customiser iframe into a webpage. It includes basic styling for the iframe and a JavaScript call to initialize the WooCommerce integration. Replace YOUR_CUSTOMISER_ID with your actual customiser ID.

```html
<iframe src="https://web.signcustomiser.com/embed/YOUR_CUSTOMISER_ID"></iframe>
<style>
  iframe {
    border: 0;
    width: 100%;
    height: 100vh;
  }
</style>
<script src="https://integrations.signcustomiser.com/sign-customiser-woocommerce.js"></script>

<script>
window.SpcWc.init();
</script>
```

--------------------------------

### Neon Customiser Review Details Styling

Source: https://docs.signcustomiser.com/en/articles/10529547-custom-css

Styles for the review details section of the Neon Customiser App. This includes setting up a grid layout for details, defining borders, and styling pseudo-elements ('::before') for review item markers. It dynamically sets background images for these markers based on the item's content.

```css
#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);
}
```

--------------------------------

### Embed Sign Customiser App ID in Shopify Theme

Source: https://docs.signcustomiser.com/article/26-how-to-install-neon-product-customiser-in-your-legacy-theme

This snippet shows how to embed the Sign Customiser application into a Shopify theme. It requires a specific customizer ID to be inserted into the data attribute. Ensure the 'neon-customiser-app' div is placed appropriately within your Liquid template file.

```html
<div id="neon-customiser-app" data-customiserid="ENTER_YOUR_CUSTOMIZER_ID"></div>
```

--------------------------------

### CSS: Custom Styles for Neon Customiser App

Source: https://docs.signcustomiser.com/article/67-adding-custom-styles-to-customizer

This comprehensive CSS code provides custom styling for the neon customiser application. It includes styles for overall layout, elements like headers, paragraphs, buttons, and responsive adjustments for different screen sizes. The code also uses background gradients and custom SVG icons for visual enhancements.

```css
<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);
  }
</style>
```

--------------------------------

### CSS Responsive Grid for Font Selection

Source: https://docs.signcustomiser.com/article/67-adding-custom-styles-to-customizer

Adjusts the grid layout for font selection options based on screen width. It displays 4 fonts per row on larger screens and 3 per row on smaller screens, and also styles font buttons.

```CSS
/* 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;
  }
```

--------------------------------

### Responsive Background Positioning for Neon Customiser

Source: https://docs.signcustomiser.com/en/articles/10529547-custom-css

This media query adjusts the positioning of the background elements within the Neon Customiser App for desktop views (min-width: 1025px). It centers the background container and its list of items.

```css
@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;
    }
  }
```

--------------------------------

### Style Font Selection with CSS for Desktop

Source: https://docs.signcustomiser.com/article/67-adding-custom-styles-to-customizer

This CSS code adjusts the layout for font selection on desktop devices (screens wider than 1024px). It configures the font list to display exactly 4 font options in a row, using a grid layout for even distribution.

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

--------------------------------

### CSS Styling for Font Buttons and Selection Alignment

Source: https://docs.signcustomiser.com/en/articles/10529547-custom-css

Reduces the height of individual font buttons and adjusts padding. It also modifies the justification of buttons following the font description to `space-between` for better alignment.

```css
#neon-customiser-app .npc-selections-font .npc-font-button {
    height: 40px;
    padding: 0px 4px;
  }
  #neon-customiser-app .npc-selections-font .npc-selections-font-description + div {
    justify-content: space-between;
  }
```

--------------------------------

### CSS Styling for Jacket Selections

Source: https://docs.signcustomiser.com/article/67-adding-custom-styles-to-customizer

Styles the jacket selection section, including its grid layout and specific styling for the title element. It uses pseudo-elements to add visual indicators before the title, changing color for the last selected item.

```CSS
/* 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);
  }
```

--------------------------------

### CSS Styling for Circular Color Selectors

Source: https://docs.signcustomiser.com/en/articles/10529547-custom-css

Styles color selector buttons to be circular using `border-radius: 50%`. It sets a fixed width and height for these circular elements.

```css
#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;
  }
```

--------------------------------

### Example Product Data Object for 'Add to Cart'

Source: https://docs.signcustomiser.com/en/articles/10771225-how-to-handle-add-to-cart-actions

This JSON object represents the detailed product information provided by Sign Customiser when a customer adds a custom sign to their cart. It includes details like text, font, colour, size, extra options, price, and images, suitable for backend integration.

```json
{
  "text": "Hello World",
  "textAlign": "left",
  "font": "Gruppo",
  "colour": "PINK",
  "size": "50cm",
  "support": "Cut to shape",
  "supportColour": "Clear Acrylic Transparent - Free",
  "extra": [
    {
      "name": "Mounting Options",
      "value": "Complimentary Silver Installation Kit"
    },
    {
      "name": "Dimmers & Remotes",
      "value": "Standard Dimmer (+3 USD)"
    }
  ],
  "price": "86.34",
  "sizeCm": "50cm X 5.59cm",
  "sizeIn": "19.69in X 2.2in",
  "description": "Text: Hello World\nFont: Gruppo\nColour: PINK\nSize: 50cm\nDimmers & Remotes: Standard Dimmer (+3 USD)",
  "taxable": true,
  "productImage": "base64 encoded image",
  "productImageWhite": "base64 encoded image"
}
```

--------------------------------

### CSS Media Queries for Font Selection Grid

Source: https://docs.signcustomiser.com/en/articles/10529547-custom-css

Adjusts the grid layout for font selection based on screen width. On desktop (min-width 1025px), it shows 4 columns, while on smaller screens (max-width 1024px), it shows 3 columns.

```css
@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));
    }
  }
```

--------------------------------

### Neon Customiser App Layout and Styling

Source: https://docs.signcustomiser.com/en/articles/10529547-custom-css

These styles control the layout and appearance of elements within the Neon Customiser App. They handle centering, borders, background colors, and focus states for text areas and other interactive elements. The styles are specific to the '#neon-customiser-app' ID.

```css
#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);
  }
  #neon-customiser-app .npc-selections-background .npc-selections-background-item> span{
     border-radius: 50%;
   }
```

--------------------------------

### CSS Grid Layout for Size Selections

Source: https://docs.signcustomiser.com/en/articles/10529547-custom-css

Defines a CSS grid layout for size selection items. It uses `grid-template-columns` to create 5 equal columns and `grid-auto-rows` to adjust row height automatically. The last child element spans all columns.

```css
#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;
  }
```

--------------------------------

### Style Color Selector Buttons with CSS

Source: https://docs.signcustomiser.com/article/67-adding-custom-styles-to-customizer

This CSS code styles the color selector buttons within the Sign Customiser app. It sets the size of the buttons, makes them round, and arranges them in a grid with 8 buttons per row, ensuring they are evenly spaced.

```css
#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;
}
```

--------------------------------

### Locate Existing Sign Customiser HTML in Shopify Theme

Source: https://docs.signcustomiser.com/en/articles/10529552-change-the-existing-sign-customiser-on-a-template-using-a-legacy-theme

This snippet represents the default HTML structure used to render the Sign Customiser within a Shopify theme template. It typically consists of a div with a specific ID, like 'neon-customiser-app'. This code serves as a marker to find the section that needs modification.

```html
<div id="neon-customiser-app"></div>
```

--------------------------------

### CSS: Adjust Grid Columns for Mobile View

Source: https://docs.signcustomiser.com/article/67-adding-custom-styles-to-customizer

This CSS rule adjusts the grid template columns for the font list within the neon customiser app. Specifically, it changes the layout to display 3 columns on screens with a maximum width of 1024px, optimizing the display for mobile devices.

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

--------------------------------

### Modify HTML for Sign Customiser ID in Shopify Theme

Source: https://docs.signcustomiser.com/en/articles/10529552-change-the-existing-sign-customiser-on-a-template-using-a-legacy-theme

This snippet shows how to modify the HTML code within a Shopify theme template to specify a new Neon Product Customizer ID. It involves adding the 'data-customiserid' attribute to the existing div element that renders the customiser. Ensure you replace '304' with your actual customiser ID.

```html
<div id="neon-customiser-app" data-customiserid="304"></div>
```

--------------------------------

### Listen for signCustomiserProductAddedToCart Event (JavaScript)

Source: https://docs.signcustomiser.com/en/articles/10529631-tracking-events-for-ad-conversions

This JavaScript snippet demonstrates how to listen for the `signCustomiserProductAddedToCart` event. It logs the event's details to the console when a product is added to the cart. This is useful for tracking e-commerce conversion events.

```javascript
document.addEventListener("signCustomiserProductAddedToCart", (e) => {
    console.log(e.detail)
}, false)
```

--------------------------------

### Set Custom Design as Initial Screen (HTML)

Source: https://docs.signcustomiser.com/en/articles/10529618-how-to-set-the-custom-design-form-as-the-initial-screen

This HTML snippet demonstrates how to update the iframe source URL to set the 'Custom Design' form as the initial screen in the sign customizer. This involves adding the `initial_screen=CUSTOM_DESIGN` query parameter.

```html
<iframe src="<https://web.signcustomiser.com/embed/YOUR_CUSTOMISER_ID?initial_screen=CUSTOM_DESIGN>"></iframe>
```

--------------------------------

### Sync Product Data to Sign Customiser API with Node.js

Source: https://docs.signcustomiser.com/en/articles/10529493-generic-integration-guide

This Node.js function demonstrates how to process the product data received from the Sign Customiser. It involves removing image data, storing product details in a local database, uploading generated images, and then sending a POST request to the Sign Customiser API to sync the product. Error handling for the API request is included.

```javascript
async function syncProductToCustomiser(productData) {
  const {
    product,
    customiserId,
    priceBreakdown,
  } = productData;
    
  // Remove image data from product object for API call
  const cartData = { ...product };
  delete cartData.productImage;
  delete cartData.productImageWhite;
  delete cartData.customBackground;
  delete cartData.customBackgroundOriginal;
  
  // create the product in your db and get its ID
  const productId = storeSignInDb(productData); 
  
  // upload the images to your servers and get a full url back
  // you will need to implement this yourself
  const customBackgroundUrl = uploadBase64(product.customBackground)
  const customBackgroundOriginalUrl = uploadBase64(product.customBackgroundOriginal)
    
  // Prepare API payload
  const apiPayload = {
    product_id: String(productId),
    cart: cartData,
    price_breakdown: priceBreakdown || {},
    custom_background_path: customBackgroundUrl,
    custom_background_original_path: customBackgroundOriginalUrl,
    product_type_paths: product.productTypeImageUrls,
    logo_original_path: product.logoOriginalUrl || null
  };
    
  try {
    const response = await fetch(`https://web.signcustomiser.com/api/customisers/${customiserId}/products`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer your-api-token'
      },
      body: JSON.stringify(apiPayload)
    });
      
    if (!response.ok) {
      throw new Error(`API request failed: ${response.status}`);
    }
      
    const result = await response.json();
    console.log('Product synced successfully:', result);
      
  } catch (error) {
    console.error('Error syncing product:', error);
  }
}
```

--------------------------------

### Product Creation Endpoint Configuration

Source: https://docs.signcustomiser.com/en/articles/11863968-custom-api-integration

Configure your webhook URL in Sign Customiser to receive notifications when a custom product is created. Your endpoint should be able to receive POST requests with product details.

```APIDOC
## POST /api/sign-customiser/products

### Description
This endpoint receives POST requests from Sign Customiser when a customer creates a customised sign. Your system should process the product data and return a unique `external_id`.

### Method
POST

### Endpoint
`https://yourstore.com/api/sign-customiser/products` (Replace with your actual endpoint)

### Headers
- **x-webhook-timestamp** (string) - The Unix timestamp when the webhook was sent.
- **x-webhook-signature** (string) - A SHA-256 HMAC signature of the payload.

### Request Body
```json
{
  "product": { /* Product details from Sign Customiser */ }
}
```

### Request Example
```json
{
  "product": {
    "id": "sign-prod-123",
    "name": "Custom T-Shirt",
    "price": 25.00,
    "options": {
      "color": "blue",
      "size": "L"
    }
  }
}
```

### Response
#### Success Response (200)
- **external_id** (string) - The unique identifier for the product in your system.

#### Response Example
```json
{
  "external_id": "your-product-id-123"
}
```

### Security
- Verify the request origin using the `x-webhook-timestamp` and `x-webhook-signature` headers against your integration secret.
```

--------------------------------

### Listen for signCustomiserQuoteSubmitted Event (JavaScript)

Source: https://docs.signcustomiser.com/en/articles/10529631-tracking-events-for-ad-conversions

This JavaScript snippet demonstrates how to listen for the `signCustomiserQuoteSubmitted` event, fired when a quote form is submitted. It logs the event's details to the console, enabling the tracking of quote submission conversions.

```javascript
document.addEventListener("signCustomiserQuoteSubmitted", (e) => {
    console.log(e.detail)
}, false)
```

--------------------------------

### Frame Fit Pricing Formulas (Conceptual)

Source: https://docs.signcustomiser.com/en/articles/11917508-frame-fit-model

Illustrates the core mathematical formulas used by the Frame Fit model to calculate pricing based on frame dimensions and configurable rates. It covers both area (CM²) and volumetric (CM³) calculations.

```conceptual
Flat parcel (CM²) : Price = Frame Width × Frame Height × Rate per cm²
Volumetric parcel (CM³) : Price = Frame Width × Frame Height × Frame Length × Rate per cm³
```

--------------------------------

### Enable Experimental Flag via Iframe URL

Source: https://docs.signcustomiser.com/en/articles/10529621-enable-experimental-flag

This snippet demonstrates how to enable experimental features by modifying the iframe source URL. It shows how to append the `experimental=true` query parameter, either as the first parameter or appended to existing ones. This method is used for universal app or iframe embeds.

```url
https://web.signcustomiser.com/embed/xxx?experimental=true
```

```url
https://web.signcustomiser.com/embed/xxx?initial_screen=VISUALISER&experimental=true
```

--------------------------------

### Send Order to Sign Customiser: Recommended Full Payload

Source: https://docs.signcustomiser.com/en/articles/10529493-generic-integration-guide

This is the recommended full JSON payload to send an order to Sign Customiser. It includes detailed order and product information, shipping address, and shipping line.

```JSON
{
  "order_id": "123456",
  "order_number": "SC-1001",
  "order_total": 86.34,
  "order_currency": "USD",
  "email": "customer@example.com",

  "products": [
    {
      "id": "987654321",
      "customiser_id": 42,
      "main_image_url": "https://…/main.jpg",
      "white_image_url": "https://…/white.jpg",
      "svg_image_url": "https://…/design.svg",
      "custom_background_url": "https://…/bg.webp",
      "custom_background_original_url": "https://…/bg-orig.webp",
      "product_type_urls": {
        "face": { "cropped": "https://…", "original": "https://…" },
        "back": { "cropped": "https://…", "original": "https://…" }
      }
    }
  ],

  "shipping_address": {
    "name": "John Smith",
    "phone": "+1 555-123-4567",
    "address1": "123 Main St",
    "address2": "Suite 4",
    "city": "Los Angeles",
    "province": "CA",
    "country": "US",
    "zip": "90001"
  },

  "shipping_line": "Express"
}
```

--------------------------------

### Send Order to Sign Customiser: Required Headers

Source: https://docs.signcustomiser.com/en/articles/10529493-generic-integration-guide

These headers are required when sending order data to Sign Customiser. Includes Authorization with API token, content type, accept type, and X-API-Client.

```HTTP
Authorization: Bearer YOUR_API_TOKEN Content-Type: application/json Accept: application/json X-API-Client: "generic"
```

--------------------------------

### Embed Sign Customiser Product Customiser on Webpage

Source: https://docs.signcustomiser.com/en/articles/11863968-custom-api-integration

This HTML snippet embeds the Sign Customiser product customiser into your website. It requires your customiser and integration IDs. The script listens for a 'sc:product:created' message to handle adding the product to the cart.

```html
<div style="width: 100%; height: 100vh;">  
  <script src="https://integrations.signcustomiser.com/sign-customiser-embed.js"></script>  
  <sign-customiser-embed customiser-id="YOUR_CUSTOMISER_ID" integration-id="YOUR_INTEGRATION_ID" driver="custom"></sign-customiser-embed>  
</div>

<script>
window.addEventListener("message", (event) => {
  if (event.data.type === "sc:product:created") {
    // add the product to cart
  }
});
</script>
```

--------------------------------

### Create Webhook Signature String (Node.js)

Source: https://docs.signcustomiser.com/en/articles/11864014-subscribe-to-webhooks

This snippet constructs the string that needs to be signed for verification. It concatenates the timestamp and the raw request payload, separated by a dot.

```javascript
const stringToSign = `${timestamp}.${rawPayload}`;
```

--------------------------------

### Listen for Quote Submissions with JavaScript

Source: https://docs.signcustomiser.com/article/221-quote-mode

This JavaScript code snippet demonstrates how to listen for custom events fired by Sign Customiser when a quote mode form is successfully submitted. It logs the submission details to the console and provides access to form data, customiser ID, and domain.

```javascript
// Listen for quote submissions  
document.addEventListener('signCustomiserQuoteSubmitted', function(event) {  
  console.log('Quote submitted:', event.detail);
  // Access form data: event.detail.data  
  // Access customiser ID: event.detail.customiserId  
  // Access domain: event.detail.domain  
});
```

--------------------------------

### Send Order Details to Sign Customiser API (cURL)

Source: https://docs.signcustomiser.com/en/articles/11863968-custom-api-integration

This cURL command shows how to send order details to the Sign Customiser API. It includes the necessary Authorization header with your API key and sets the Content-Type to application/json. Replace YOUR_API_KEY with your actual API key.

```bash
curl -X POST \ 
  https://web.signcustomiser.com/api/v2/orders \ 
  -H "Authorization: Bearer YOUR_API_KEY" \ 
  -H "Content-Type: application/json" \ 
  -d '{\n  "order": { \n    "external_id": "your-order-id-456", \n    "items": [ \n      { \n        "product_external_id": "your-product-id-123", \n        "quantity": 1 \n      } \n    ] \n  } \n}'
```

--------------------------------

### Handle 'Add to Cart' with JavaScript Message Listener

Source: https://docs.signcustomiser.com/en/articles/10529493-generic-integration-guide

This JavaScript code snippet listens for messages from the Sign Customiser iframe. When a 'onProductCreated' message is received, it extracts product details and then sends a 'hideLoadingScreen' message back to the iframe. This is crucial for updating the UI after a product is finalized.

```javascript
window.addEventListener('message', event => {
  if (event.data.type === "onProductCreated") {
    // Write your custom add-to-cart logic here

    // Clear the loading state after adding to cart
    const iframe = document.querySelector("iframe[src*='signcustomiser.com']");
    iframe.contentWindow.postMessage({ type: "hideLoadingScreen" }, "*");
  }
});
```

--------------------------------

### Compare Webhook Signatures Securely (Node.js)

Source: https://docs.signcustomiser.com/en/articles/11864014-subscribe-to-webhooks

This function securely compares the received webhook signature with the calculated expected signature using a constant-time comparison to mitigate timing attacks. It returns true if they match and false otherwise.

```javascript
const isValid = crypto.timingSafeEqual( Buffer.from(signature, "hex"), Buffer.from(expectedSignature, "hex") );
```

--------------------------------

### Verify Webhook Timestamp (Node.js)

Source: https://docs.signcustomiser.com/en/articles/11864014-subscribe-to-webhooks

This code checks if the incoming webhook's timestamp is within an acceptable window (e.g., 5 minutes) to prevent replay attacks. It calculates the time difference between the current time and the webhook's timestamp.

```javascript
const currentTime = Math.floor(Date.now() / 1000);  
const webhookTime = Number.parseInt(timestamp, 10);  
const timeDiff = Math.abs(currentTime - webhookTime);  
if (timeDiff > 300) { // 5 minutes in seconds   
  return false; // Reject old webhooks  
}
```

--------------------------------

### Listen for 'Add to Cart' Events with JavaScript

Source: https://docs.signcustomiser.com/en/articles/10771225-how-to-handle-add-to-cart-actions

This JavaScript snippet listens for 'onProductCreated' messages from Sign Customiser. It allows you to execute custom logic when a product is created, processing the 'event.data.product' object for integration with e-commerce platforms.

```javascript
window.addEventListener('message', event => {
  if (event.data.type === "onProductCreated") {
    // Custom logic to handle event.data.product
  }
});
```

--------------------------------

### Extract Webhook Headers and Payload (Node.js)

Source: https://docs.signcustomiser.com/en/articles/11864014-subscribe-to-webhooks

This snippet demonstrates how to extract the timestamp and signature from incoming webhook request headers, and capture the raw request body for signature verification. It assumes a Node.js environment using Express.js.

```javascript
const timestamp = req.headers["x-webhook-timestamp"];  
const signature = req.headers["x-webhook-signature"];  
const rawPayload = req.body.toString("utf8"); // Raw JSON string
```

--------------------------------

### Send Order to Sign Customiser: Successful Response

Source: https://docs.signcustomiser.com/en/articles/10529493-generic-integration-guide

This JSON snippet represents a successful response from the Sign Customiser API when sending order data.

```JSON
{ "ok": true }
```

--------------------------------

### Send Order to Sign Customiser: API Endpoint

Source: https://docs.signcustomiser.com/en/articles/10529493-generic-integration-guide

This snippet shows the API endpoint for sending order data to Sign Customiser. It is a POST request to the specified URL.

```HTTP
POST https://web.signcustomiser.com/api/orders
```
Tokens:
Raw