# 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.

- Source URL: https://www.signcustomiser.com/help/integrations/install-customiser-on-a-product-or-page-on-your-shopify-storefront-app-blocks/
- Markdown URL: https://www.signcustomiser.com/help/integrations/install-customiser-on-a-product-or-page-on-your-shopify-storefront-app-blocks.md
- Category: Integrations
- Last updated: 2026-02-18

## Article

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

<iframe src="https://www.youtube.com/embed/YsZFF4DLeXU?rel=0" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" allow="autoplay; fullscreen; picture-in-picture; encrypted-media"></iframe>

## Step 1: Create a Custom Template

1.  From your Shopify admin, go to **Online Store** > **Themes**.

2.  Click on **Customise** to open the theme editor.

3.  In the top dropdown menu, select either:

    -   **Page** > **Create template** (_for adding the customiser to a page)_, or

    -   **Product** > **Create Template** (_for adding the customiser to a product page_)

4.  Click **Create Template** and give an appropriate name for your template (e.g. Custom Sign template).

## Step 2: Add the Sign Customiser Section

Whether you want to add to a product or page template, the steps for adding the customiser are the same.

1.  In the theme editor, under the **Template** section, click **Add Section**.

    ![](/help/intercom-docs/help-centre-images/7db56423529b9a9fab24ac999a95d80f3bc3cec920d8f7a97be8cbee577010b7.png)

2.  Click on the **Apps** tab and select **Sign Customiser.**

    ![](/help/intercom-docs/help-centre-images/4ade7ba7204d17cdbcbff3dc5eea4bd423d8d26f98f6dd4a79c83c00fc15b550.png)

3.  Click on the **Sign Customiser** section to configure its settings:

    -   **Sign Customiser ID**: Enter your customiser ID (_Need help finding your customiser ID? Follow our **[Find your Sign Customiser ID](../../integrations/find-your-sign-customiser-id/)** guide_).

    -   **Formatting**: By default, the app follows your theme’s formatting. Use this option to force RTL formatting if needed.

    -   Click **Save**.

4.  By default, the customiser matches the page width set in your theme. To make it full-width, click the **App** section containing the **Sign Customiser** app.

    ![](/help/intercom-docs/help-centre-images/6e7900d6e4bfa21fe6f07f0e9a94e0f03e4a22d3ba379e61ffc3ac1fc8f7c9d1.png)

    Uncheck **Make section margins the same as theme** option.
    ​

## Step 3: Assign the Template

Once your template is ready, the final step is to create a page or product and assign the template to it.

## If Adding to a Page

1.  Go to **Online Store** > **Pages** and click **Add Page**.

2.  Enter a page title.

3.  Under **Template**, select the template you created.

4.  Click **Save**.

## If Adding to a Product

1.  Go to **Products** and click **Add Product**.

2.  Enter a product title.

3.  Uncheck:

    -   **Charge tax on this product**

    -   **Track quantity**

    -   **This is a physical product**

4.  Set a default price to avoid zero-priced orders. _See: **[Troubleshooting Zero-Amount Products Purchased on Shopify](https://Troubleshooting%20Zero-Amount%20Products%20Purchased%20on%20Shopify)**._

5.  Set the product status to **Active**.

6.  Under **Theme Template**, select the template you created.

7.  Click **Save**.

You are all done! Your Sign Customiser is now live on your storefront.