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 }}"
  shopify-market-id="{{ localization.market.id }}"
  shopify-market-handle="{{ localization.market.handle }}"
  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"
  shopify-market-id="gid://shopify/Market/123456789"
  shopify-market-handle="international"
  initial-screen="VISUALISER"
  frame-height="100"
  height-reduction="0"
  height-reduction-mobile="0"
  price-box-options="bottom"
></sign-customiser-embed>

Shopify Markets (multi-region stores)

If your store uses Shopify Markets to sell in more than one country or currency, pass the shopper’s active market to the customiser. Sign Customiser then publishes each generated sign to that market’s catalogue, so the product is available to buy in the region the shopper is browsing.

Two optional attributes carry the market context:

• shopify-market-id — the active market’s ID, e.g. #{{ localization.market.id }} in Liquid, or a value like gid://shopify/Market/123456789 from the Storefront API

• shopify-market-handle — the active market’s handle, e.g. #{{ localization.market.handle }}

Market publishing also needs Sign Customiser to read your store’s Markets. If your store uses Markets, the app shows a Markets access recommendation in your admin — approve it so generated products can be published to the shopper’s active market. This is optional: if you skip it, product creation still works and only the market-specific publishing step is skipped.

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

• shopify-market-id

  • Liquid templates: use #{{ localization.market.id }} — Shopify fills in the value automatically

  • Headless: pass the active market ID from your Storefront API context, e.g. gid://shopify/Market/123456789

  • Optional — only needed for multi-market Shopify stores

• shopify-market-handle

  • Liquid templates: use #{{ localization.market.handle }}

  • Headless: pass the active market handle, e.g. international

• 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"