Use the iframe option in the Shopify app block
Turn the experimental iframe embed on or off for the Sign Customiser app block. Use it when your theme's CSS or JavaScript interferes with the direct embed.
Last updated:
The Sign Customiser app block can load the customiser in two ways. By default, it puts the customiser directly in your theme page. With the iframe option, it loads the customiser inside an isolated iframe. The Use iframe (experimental) switch selects the method. This guide shows where the setting is and how to turn it on or off.
Note: This setting is on the Sign Customiser app block. You add that section in the Shopify theme editor. If you have not added the app block, first follow Install Sign Customiser in a Shopify theme with an app block.
What the iframe embed does
By default, the customiser loads directly in your theme page. It shares the CSS and JavaScript of the page. On a theme with many changes, those styles or scripts can change how the customiser looks or works.
With the iframe embed on, the customiser loads inside an isolated iframe from web.signcustomiser.com. The iframe keeps the styles and scripts of the customiser apart from your theme. Your theme can still set the width and height around the iframe. If it does, turn on Force full width or Force full height in the same Advanced settings.
When to turn it on
Use the iframe embed when the direct embed does not show correctly. For example:
-
Your theme styles change the customiser and break its layout.
-
A theme script or page builder conflicts with the customiser and stops it from loading.
-
The customiser looks different on different pages or templates.
If the direct embed works correctly, do not change it. The setting is labelled experimental. Use it to fix theme conflicts. Do not use it as the default choice.
Enable the iframe embed
-
In your Shopify admin, go to Online Store.
-
Find the theme you want to edit, and then click Edit theme to open the theme editor.
-
Open the page or product template that has the Sign Customiser app block. The block is in an Apps section.
-
Click the Sign Customiser block to open its settings.
-
Scroll to Advanced settings and turn on the Use iframe (experimental) switch.
The block settings in the theme editor. Turn on the Use iframe (experimental) switch. It is off in this image.
-
Click Save.
-
Preview the page.
The customiser now loads inside the iframe. The image below shows the customiser as the iframe displays it.
The customer customiser as the iframe serves it. This is not the Shopify theme editor.
Disable the iframe embed
-
Open the same Sign Customiser block in the theme editor.
-
Under Advanced settings, turn off the Use iframe (experimental) switch.
-
Click Save.
The customiser now loads directly in your theme page again.
Sticky Visualiser is not supported in the iframe
The Sticky Visualiser setting does not work while the iframe embed is on. Your Height Percentage and Height Reduction (in px) settings still apply. If you need the sticky visualiser, keep the iframe embed off.
A Shopify variant link (?variant=) also cannot select a size in the iframe embed. The customiser opens on the first size, unless a saved design, a ShareLink or a preset applies.
Still not rendering?
If the page cannot accept an app block, use Install Sign Customiser in a Shopify theme without app blocks.
Do not use that guide for a headless storefront, such as Hydrogen or Next.js. Instead, start with Choose how to install Sign Customiser on Shopify.
Contact the Sign Customiser support team if the direct embed and the iframe option both fail.