Shopify Theme Integration

Shopify integration and theme setup

This document outlines the two steps you required to integrate a customiser on your theme.

How to enable/disable the iframe embed on your 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 Customiser on a Product or Page on your Shopify Storefront - App Blocks

This guide will explain how to add the Sign Customiser to either a page or a product page in Shopify.

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

Best for installing sign customiser on page builders apps like gem pages/Headless themes or old themes.

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.