Setup customiser on Shopify App embed theme - best for page builders /old themes/Headless storefronts.

By following these instructions, you can install the app on your Shopify legacy theme that doesn’t have app blocks enabled.

Install Sign Customiser using app embed follow these instructions:

1. Go to your Shopify admin, Click on Sales Channels and select Online Store

2. On the list of links for Online Store, you will find a navigation link called Themes

On the theme, you wish to edit click on the three dots … to expand the list and then click on Edit Code

3. You can create a page template or a product template and use it to assign to a product or page. In this demonstration, I am using a product. In the Templates section, ‘Add a new template’.

1. Select Product in the dropdown menu of Select a template to create.

2. In Template type, select Liquid.

3. Add Neon Product Customiser in File Name.

4. Click Done/Create Template.

4. Using the code editor in the following.

1. Copy the code example below and paste it near the top of the page or where you would like for it to display.

2. Change the ENTER_YOUR_CUSTOMIZER_ID text to the ID of the customiser you wish to you. Please follow these instructions to get it

3. Hit Save

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

You should have something like this

5. Refer back to the Theme in which we added the new template and click Customise:

6. Once the Shopify theme editor is open on the left-hand side you will see sidebar with three icons, click on the one highlighted in this image

7. Click Theme Settings on the bottom left corner and enable the App embed and click Save to enable the app**:**

8. Go back into your Shopify admin, click on Products and click on the product you want to modify:

9. Scroll down to the Online Store on the right side and choose neon-product-customiser and click Save:

You are all done!

Install App Embed customiser using Iframe - alternative installation method

The iframe installation method uses the sign-customiser-embed.js script with a <sign-customiser-embed> tag to load the customiser inside an isolated iframe, instead of mounting it directly into the theme DOM. ​ Its main use case is reliability on customised or legacy themes, where direct embeds can break due to theme CSS/JS conflicts. Because the iframe is isolated, merchants get more predictable behaviour and styling consistency across storefront pages, while still being able to tune display settings like initial screen, frame height, and desktop/mobile height reductions.

​ The currency format setup depends on whether you are using a Shopify Liquid template or a headless storefront. Pick the section that matches your setup.

Shopify Liquid templates (page builders, old themes)

Replace 123 with your customiser ID and your-store.myshopify.com with your Shopify domain. Leave the #{{ shop.money_format }} and #{{ shop.currency }} tags exactly as-is — Shopify fills in the correct values automatically when the page loads.

<script src="https://integrations.signcustomiser.com/sign-customiser-embed.js"></script>

<sign-customiser-embed
  customiser-id="123"
  shop="your-store.myshopify.com"
  driver="shopify"
  currency-format="{{ shop.money_format }}"
  currency-code="{{ shop.currency }}"
  initial-screen="VISUALISER"
  frame-height="100"
  height-reduction="0"
  height-reduction-mobile="0"
  price-box-options="bottom"
></sign-customiser-embed>

Headless storefronts (Hydrogen, Next.js, React, custom frontends)

Headless storefronts do not use Shopify’s Liquid template engine. In this case you must hardcode the currency format and currency code directly, because there is no Liquid engine to evaluate #{{ }} tags — they would appear as literal text.

Your currency format string must include a #{{amount}} placeholder (or one of the variants listed below). This tells the customiser where to insert the price value. The format must match your store’s currency — you can find it in your Shopify admin under Settings > General > Store currency.

Supported placeholders:

• #{{amount}} — e.g. 1,234.56

• #{{amount_no_decimals}} — e.g. 1,235

• #{{amount_with_comma_separator}} — e.g. 1.234,56 (common in Europe)

• #{{amount_no_decimals_with_comma_separator}} — e.g. 1.235

• #{{amount_no_decimals_with_space_separator}} — e.g. 1 235

• #{{amount_with_apostrophe_separator}} — e.g. 1’234.56

Common examples by currency:

• USD: $#{{amount}}

• EUR: €#{{amount_with_comma_separator}}

• GBP: £#{{amount}}

• AUD: $#{{amount}}

<script src="https://integrations.signcustomiser.com/sign-customiser-embed.js"></script>

<sign-customiser-embed
  customiser-id="123"
  shop="your-store.myshopify.com"
  driver="shopify"
  currency-format="${{amount}}"
  currency-code="USD"
  initial-screen="VISUALISER"
  frame-height="100"
  height-reduction="0"
  height-reduction-mobile="0"
  price-box-options="bottom"
></sign-customiser-embed>

Settings breakdown (short)

• currency-format

  • Liquid templates: use #{{ shop.money_format }} — Shopify fills in the value automatically

  • Headless: hardcode the format with a placeholder, e.g. $#{{amount}} or €#{{amount_with_comma_separator}}

  • The format string must always contain a #{{...}} placeholder or prices will break

• currency-code

  • Liquid templates: use #{{ shop.currency }}

  • Headless: hardcode your store’s currency code, e.g. USD, EUR, GBP

• initial-screen

  • Options: VISUALISER | CUSTOM_DESIGN

  • Example: initial-screen="CUSTOM_DESIGN"

• frame-height

  • Meaning: iframe height as % of viewport

  • Typical range: 50 to 100

  • Example: frame-height="90"

• height-reduction

  • Meaning: desktop height reduction in pixels

  • Example: height-reduction="80" (for fixed header)

• height-reduction-mobile

  • Meaning: mobile height reduction in pixels

  • Example: height-reduction-mobile="64"

• price-box-options

  • Options: bottom | top | hidden

  • Example: price-box-options="top"

Quick Example Preset

​Copy one example below of the three shown here.

<!-- Full-screen default -->
initial-screen="VISUALISER" frame-height="100" height-reduction="0" height-reduction-mobile="0" price-box-options="bottom"

<!-- Large sticky header -->
initial-screen="VISUALISER" frame-height="100" height-reduction="96" height-reduction-mobile="72" price-box-options="top"

<!-- Open on custom design -->
initial-screen="CUSTOM_DESIGN" frame-height="90" height-reduction="80" height-reduction-mobile="64" price-box-options="hidden"