Install Sign Customiser in a Shopify theme without app blocks

Use this guide when a Shopify Online Store theme serves the page, but the page cannot accept a Sign Customiser app block.

This setup is suitable for:

• A custom Shopify Liquid template.

• A page-builder block that processes Shopify Liquid.

• A legacy Shopify template without an app-block location.

If Add section > Apps contains Sign Customiser, use the Shopify app-block guide.

Before you start

Get the ID of the customiser that you want to show. See Find your Sign Customiser ID.

You must also have the Shopify Edit code permission.

Recommended method: add the iframe wrapper to Liquid

This method keeps the customiser separate from the theme’s CSS and JavaScript. It also connects the generated product to the Shopify cart.

Step 1: Open the theme code

1. In Shopify admin, go to Online Store > Themes.

2. Find the published theme.

3. Select … > Edit code.

Step 2: Open the correct Liquid file

Open the template or section that displays the customiser page.

• For a .liquid template, add the code to that template.

• For a .json template, open the Liquid section used by that template.

• For a page builder, add a custom Liquid or custom code block.

The page builder must process Shopify Liquid. Do not paste Liquid code into a plain HTML field.

Step 3: Add the customiser

Paste this code where you want the customiser to appear:

<script
  src="https://integrations.signcustomiser.com/sign-customiser-embed.js"
  defer
></script><sign-customiser-embed
  customiser-id="123"
  shop="{{ shop.permanent_domain }}"
  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>

Replace 123 with your customiser ID. Do not change the Shopify Liquid values inside #{{ and }}.

You do not need to enable Sign Customiser - Embed under App embeds for this method. The code loads the integration script directly.

Step 4: Save and test the page

1. Select Save.

2. Open the storefront page.

3. Confirm that the customiser shows a price.

4. Complete a test design.

5. Add the design to the Shopify cart.

6. Confirm that the cart contains the design details.

Adjust the iframe height

The default iframe uses the full viewport height.

Use height-reduction when a fixed desktop header covers the customiser. Enter the header height in pixels.

Use height-reduction-mobile for the mobile header height.

For example:

frame-height="100"
height-reduction="80"
height-reduction-mobile="64"

The price-box-options value can be bottom, top, or hidden.

Shopify Markets

Keep these attributes in the embed code if the store uses Shopify Markets:

shopify-market-id="{{ localization.market.id }}"
shopify-market-handle="{{ localization.market.handle }}"

Shopify supplies the shopper’s active market when it renders the page. See Enable Shopify Markets on your store.

Existing Theme App Embed installations

The media below shows the previous Theme App Embed workflow. Use the recommended iframe wrapper for a new installation.

Keep the older method only for an existing direct embed or when Sign Customiser support requests it.

An existing direct embed uses this element in a Shopify Liquid template:

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

It also needs Sign Customiser - Embed enabled under App embeds in the Shopify theme editor.

Previous Shopify editor reference

Shopify has changed its editor labels and layout. These images remain here for existing installations.

Follow the current text above when a screenshot contains a different label.