How to Create a Custom Product Template

This guide walks you through enabling the Configurator app embed in your theme, copying the Template JSON from the Configurator app, and creating a custom product template in your theme code.

Prefer to watch instead of read? See the video walkthrough.

What you'll need

Admin access to your store's theme settings
A few minutes in Shopify's theme code editor — no special tools required
At least one configurable product already set up in the Configurator app

Step 1 — Enable the Configurator app embed (if not already enabled)

The Configurator app's theme embed must be active before the app can generate the Template JSON for your store.

Go to Online Store → Themes in your Shopify admin.
On your active theme, click Customize.
In the left sidebar, click the App embeds icon.
Find Configurator in the list and toggle it on.
Click Save in the top right.

Step 2 — Copy the Template JSON from the Configurator app

Open the Configurator app in your Shopify admin.
Go to Configurator Settings in the app's left navigation.
Scroll to the Dedicated Product Template section.
In the Template JSON window, click the Copy button.

Keep this tab open — you'll paste the JSON in step 7 below.

Step 3 — Create the new template

Go to Online Store → Themes in your Shopify admin.
Click the … (three-dot menu) on your active theme and select Edit code.
In the left sidebar, find and select the Templates folder. Click the New File icon located at the top.
In the empty file name space, type product.configurator.json as the file name and then click out of it.
Click onto the file you just created (product.configurator.json).
The panel on the right side of the screen will now show JSON text. Click in it and select all (Ctrl+A on Windows / Cmd+A on Mac). With all the text selected, delete it by hitting the Delete key on your keyboard.
Paste the JSON code you copied in Step 2.
Click Save (top right).
You may now close this tab.

Step 4 — Assign the template to your configurable products

Once the template exists in your theme, your Configurator products need to be told to use it. You can do this in one click from the Configurator app, or product-by-product in Shopify admin.

Option A: Assign all Configurator products at once (recommended)

Open the Configurator app in your Shopify admin.
Go to Settings and scroll to the Dedicated Product Template section.
Under Product Assignment, click Assign All.

Every Configurator product will now use the new template.

To revert later (so products go back to your theme's default product template), return to the same section and click Unassign All.

Option B: Assign one product at a time (in Shopify admin)

From your Shopify admin, go to Products and open one of your configurable products.
In the right sidebar, find the Theme template field (under the Online Store heading).
From the dropdown, select Configurator.
Click Save at the top.

Repeat for each configurable product.

Step 5 — Verify it's working

Open one of your updated products on the storefront (use an incognito/private window to avoid any cached preview).
The page should display your customized layout with the Configurator block in the position defined by the template — no default variant picker, no separate add-to-cart button.
Click Customize to confirm the configurator opens and works as expected.

Troubleshooting

The Configurator app's Template JSON window is empty or says the embed isn't enabled. Go back to Step 1 and make sure the Configurator app embed is toggled on in your active theme, then save and refresh the app's Settings page.
The Theme template dropdown doesn't show configurator. Confirm the file is named exactly product.configurator.json (case-sensitive) and that you saved it in the Templates folder of your active theme. Refresh the Products admin page after saving.
Shopify shows a JSON error when saving the new file. The paste may have included extra characters or lost a bracket. Re-copy the Template JSON from the Configurator app and try again, making sure you fully selected and deleted the existing file contents before pasting.
The product still shows the default layout on the storefront. Confirm you saved the product after changing the Theme template field. Clear your browser cache or use an incognito window to rule out cached views.
The configurator block doesn't appear on the page after applying the template. Re-check that the Configurator app embed is enabled (Step 1). If it was disabled and re-enabled after you created the template, copy a fresh Template JSON from the app's Settings page and replace the file contents.