Shopify Theme Integration

Choose how to install Sign Customiser on Shopify

Find the correct setup guide for a Shopify theme, custom Liquid template, page builder, or headless storefront.

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.

Install Sign Customiser on a headless Shopify storefront

Connect Sign Customiser to a Storefront API or Hydrogen cart outside a Shopify Online Store theme.

Install Sign Customiser in a Shopify theme with an app block

Use the Shopify theme editor to add Sign Customiser to a compatible product or page template with an app block.

Install Sign Customiser in a Shopify theme without app blocks

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

Enable sticky add to cart button on your customiser.

By following these instructions, you can change the scroll order and have the visualiser section and also the add to cart button fixed (sometimes called sticky) as the user scrolls up and down the page (fixed frame scrolling) just like this example. This feature is only available on Shopify for now.

Adding CSS to Shopify themes - Alternative (but Not Recommended) Method

Although editing your Shopify theme is an alternative method for applying CSS, it is no longer the recommended approach. This method allows you to keep your styles within your theme, but it may require reapplication after theme updates. For the recommended approach to adding custom CSS, please refer to the guide: How to Add Custom CSS the Right Way.