Shopify Theme Integration
Browse 8 articles in Shopify Theme Integration.
8 articles
Last updated:
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.
Use these settings to keep the visualiser in view when the shopper scrolls. See this example page. On mobile, you can also keep the price box and its button fixed. Fixed is sometimes called sticky. Before you start. Sticky Visualiser is a setting in the Shopify theme editor. It is in the Sign Customiser block and in the Sign Customiser - Embed block. It does not work when Use iframe (experimental) is on. See Use the iframe option in the Shopify app block. The Liquid iframe wrapper code has no theme editor setting for Sticky Visualiser.
Adding CSS to Shopify themes - Alternative (but Not Recommended) Method
You can add CSS when you edit your Shopify theme. This is no longer the recommended method. Shopify copies changes from the theme editor to an updated theme. Before you update your theme, save a copy of your CSS. After the update, check that the CSS is still there. For the recommended method, read the Custom CSS guide.
Open the correct size from a Shopify variant link
This guide explains how to link Shopify product variants to Sign Customiser sizes so the correct size is selected when a shopper opens a product page.