Show the Configurator on Your Store
Link a product, add the theme block and choose how customers open the configurator: popup, embedded, on any page or from a templates gallery.
Put the configurator in front of your customers
A configuration only appears on your store once two things are done: a Shopify product is linked to it, and an All Sign Customizer block is placed in your theme. This guide covers both, and every way to present the configurator.
Four ways to show the configurator
The app adds three blocks to your theme. Together they give four ways in:
Popup on the product page
Configurator (product), display “Buttons that open a popup”. Customers click Design from blank and the configurator opens over the page.
When to use it
Embedded on the product page
Configurator (product), display “Configurator embedded in the page”. The configurator is visible as soon as the page loads.
When to use it
On any page
Configurator (any page) shows one configuration you choose by its ID — on the home page, a landing page or a custom page.
When to use it
From a templates gallery
Templates gallery lists ready-made designs. Customize opens the configurator with the template loaded; Add to cart buys it as is.
When to use it
What customers see
Whatever the block, the configurator itself depends on the configuration’s setup model. With Build by Options, customers go through a list of steps (material, size, shape, fixings, colors, text…). With Build from Presets, they pick a design in a gallery, then only change what the design allows.
Both open as a popup or embedded, exactly as set in the block. These recordings come from Preview in the app’s configuration list — open it to try your own configuration the same way (add to cart is disabled there).
1. Link the configuration to a product
The Configurator (product) block reads the configuration from the product being viewed. Select the product(s) in Products associated with configuration, on the Product info step of the creation wizard (see Quick Start). The app writes the link onto each product.
- One configuration can serve several products — for example one product per material or per market.
- A product without a configuration shows nothing: the block stays invisible to customers on it, so you can keep it on a template shared with ordinary products.
The Shopify product gives the page, the price context and the checkout. The configuration gives the options. A template is a starting design: it never becomes a Shopify product on its own.
2. Add the block to the product template
- Open the theme editor
In Shopify, go to Online Store › Themes › Customize, then choose Products › Default product (or the template your sign products use) in the selector at the top. Use the preview selector to show a product linked to a configuration.
- Add the app block
In the Product information section, click Add block, open the Apps tab and choose Configurator (product). Place it right after the Quantity selector block, above the buy buttons.
- Save
Click Save. Every product using this template now shows its own configuration.
On the app’s home page, the banner “Click here to install configuration screen” opens the theme editor on the product template with the block already added. Check its position, then save.
In the theme editor, the block tells you what customers will see:
| Message in the editor | Meaning |
|---|---|
| Renders on every page using this product template. | All good: each product shows its linked configuration. |
| This product has no design configuration. | The previewed product is not linked. Preview another product, or link this one. |
| This block only works on a product page. | You placed the product block on another page. Use Configurator (any page) there. |
3. Choose how it is displayed
| Setting | Effect |
|---|---|
| How to show the configurator | Buttons that open a popup (default on product pages) or Configurator embedded in the page. |
| Isolate the configurator in an iframe | Shields the configurator from your theme’s styles. Turn it on only if the theme breaks its layout; if the iframe cannot load, the configurator falls back to normal rendering by itself. |
4. Set up the buttons
In popup mode, the block shows up to four buttons. Each one has its own label, background color and text color.
| Button | Default label | What it does |
|---|---|---|
| Customize button (on by default) | Design from blank | Opens the configurator in a popup over the page. |
| Design from example | Design from example | Sends customers to the page holding your templates gallery. It stays hidden until you fill in its Destination page. |
| Upload button | Upload your Sign | Lets customers send their own artwork instead of designing the sign. |
| Uploaded files button | View Uploaded Files | Shows customers the files they already uploaded. |
“Design my plaque” in your brand color, plus “Start from an example” pointing to a page with the templates gallery. The upload button stays off: every plaque is designed in the configurator.
5. Show a configuration on any page
- Find the configuration ID
Open the configuration in the app: the ID is the number in the address bar (
…/configuration/85/…) and next to the name in its menu (“ID: 85”). - Add the block
In the theme editor, open the page (home page, a custom page template…), add a section or block from the Apps tab and choose Configurator (any page).
- Paste the ID and pick a display
Fill in Configuration ID. This block is embedded by default; switch to buttons if you prefer a popup. The buttons work as on the product page.
Without a product, customers can design but not add to cart. To sell from a landing page, add a Design from example button or a link to the product page.
The block only renders where you place it: add it to each page that needs it. You can also place it on a product template to force one configuration on every product using that template — handy for a dedicated template such as “product.sign”.
6. Add a templates gallery
The Templates gallery block lists the templates of a configuration (see Templates to create them).
| Setting | What to enter |
|---|---|
| Id of template’s configuration | The ID of the configuration holding the templates. |
| Design Screen page url | The product page where the configurator block is installed. The product must be linked to the same configuration. |
| Use modal interface | Off: the list is shown in the page. On: a View templates button opens it in a popup (button text, popup title and colors are editable). |
| Texts and colors | “All templates”, “No design templates are available”, and the label and colors of the Add to cart and Customize buttons. |
Customize opens the Design Screen page with the template’s ID in the address; the configurator opens by itself with that template loaded. Add to cart appears on templates sold as they are.
7. Fine-tune the product behaviour
In the app, Settings › General › Product controls what customers can do once the configurator is open:
- Enable add to cart — customers can add their design to the cart. Turn it off for a quote-only product (see Request a Quote).
- Enable design from scratch — off, customers can only customize the templates assigned to the product.
- Redirect to cart after adding a custom design to the cart — or send them straight to checkout.
8. Test it on the storefront
- The linked product shows the buttons (or the embedded configurator) where you expect.
- An unlinked product using the same template shows nothing extra.
- The configurator opens on the right configuration and its price matches.
- Add to cart creates a cart line describing the design.
- On a phone, the configurator opens, works and closes cleanly.
If the configurator does not appear
Nothing on the product page
Check, in this order: the product is linked to a configuration, the product uses the template where you added the block, and the theme was saved. Open the theme editor on that product: the block’s message tells you which one is missing.
The configurator looks broken
Your theme’s styles are leaking in. Turn on Isolate the configurator in an iframe in the block settings.
The “Design from example” button is missing
Its Destination page is empty. Point it to the page holding your templates gallery.
More cases in Troubleshooting.
Get product news by email
New features, release notes and setup tips — a few emails a year.