Install guide · Shopify theme

Add a product personalizer to your Shopify theme

Kastomise installs on any Online Store 2.0 theme as an app block, with no code. These steps take you from installing the app to printing your first personalised order.

Before you start: you need an Online Store 2.0 theme, such as Dawn or any theme that supports app blocks. Vintage themes aren’t supported. Running a custom Hydrogen storefront? Use the Hydrogen guide instead.

01Install Kastomise and connect your store

Install Kastomise from the Shopify App Store and open it from your Shopify admin. On “Connect your store”, choose one of two buttons:

  • “Set up a new store” if you’re new to Kastomise. It creates your Kastomise store on the free plan (one product config, no card) with no separate sign-up.
  • “Connect an existing store” if you already have a Kastomise dashboard account. Sign in, then approve the connection in Shopify.
  • Then, under “Create your dashboard login”, enter your email to get an invite to the Kastomise dashboard at app.kastomise.com, where you build product configs.

Kastomise on the Shopify App Store ↗

02Create a product config

A config describes one product: its print areas and their sizes, layouts, fonts and options. Build it in the Kastomise dashboard, not in the Shopify admin:

  • Go to Configs → “Create New Config”, give it a name and a print resolution, then set up its print areas in the editor.
  • Or use “Import Config” in the editor to paste a config file, or duplicate one you already have.
  • Rather not build it yourself? Request a quote and we’ll set it up for you, as a paid service.

What each part of a config means: product config guide. Setup service: request a quote.

04Add the Customise button to your theme

In the app’s “Add the widget to your theme” panel, click “Add Customise button”. Your theme editor opens on the product template with the Kastomise Customiser block added to the product information section. Move it just under the buy buttons and click Save.

  • To add it by hand instead: Online Store → Themes → Customize → Products → Default product. In the product information section, choose Add block → Apps → “Kastomise Customiser”, then Save.
  • Once it’s saved on your published theme, the app shows “✓ Customise button added”.
  • Add only one Kastomise Customiser block per product page.

05Adjust the block settingsOptional

Most stores can leave every setting blank. The block works out the product options on its own and follows the variant the shopper selects. Here’s what each one does.

Colour option name
The product option that sets the background colour. Leave blank to use an option named Colour or Color.
Customisation option name
The product option that picks the customisation type. Leave blank to use an option named Customisation or Customization.
metaData option names
Other options to pass to your config, comma-separated (e.g. Ribbon Width, Frame Size). Leave blank to pass every other option.
Fallback background colour / Fallback customisation type
Option values to use only when the product has no matching option, e.g. Black.
Hide the theme’s buy controls while customisation is available
Off by default. When on, your add-to-cart and quantity are hidden and shoppers use the Customise button instead. They come back if the variant isn’t customisable, or if the customiser can’t load.
Buy controls CSS selector
Which parts of your theme to hide when the setting above is on. The default suits Dawn and similar themes; class names are case-sensitive.
Fallback config metadata (JSON), Kastomise store ID (fallback)
For troubleshooting with our support only. Leave the store ID blank: your connected store is always used.

06Add the 3D teaserStudio plan

On the Studio plan, click “Add 3D teaser” in the same panel, or in the theme editor choose Add section → Apps → “Kastomise 3D Teaser”. Give it its own full-width section, for example just above related products.

  • The teaser also needs a 3D teaser model turned on in the product’s config.
  • Below Studio, the “Add 3D teaser” button is greyed out.

07Choose a plan when you’re readyWhen you need more

The free plan covers one product config. To add more configs or 3D, open the Plan panel in the Kastomise app, pick a plan, and approve it on Shopify’s approval page. Shopify bills it in USD every 30 days, with no per-order fees.

Compare plans on the pricing page.

08Test it on your storefront

Open a linked product on your live store. You should see a Customise button. Click it, add a photo and text, and add the item to the cart: it adds one item and takes the shopper to the cart, where the cart line includes a link to a preview image of each print area.

09Print from your orders

When a personalised order is paid, it appears in the dashboard’s Orders page with a print-ready CMYK PDF for each print area, plus a PNG preview. Download single files or a zip of the whole order. The Kastomise app in your Shopify admin also lists your most recent personalised orders.

Troubleshooting

No Customise button on the product
Check the product is synced and linked to a config, the block is saved on your published theme, and your store finished “Connect your store”. Configs above your plan’s limit don’t show on the storefront.
The wrong layout or colour for the selected variant
An option name in the block settings doesn’t match the product. Type the option’s name exactly as it appears on the product (spelling and spaces matter, capitals don’t), or leave the field blank.
Add-to-cart still shows next to the Customise button
Turn on “Hide the theme’s buy controls…”, and if your theme isn’t Dawn-like, set “Buy controls CSS selector” to your theme’s buy-area classes.
A linked product still doesn’t show the customiser
In the dashboard, go to Products → Product Sync → Details and click “Resync storefront flags”.
Prefer us to do it for you? We can write your product configs and install the customiser on your store as a paid service. Request a quote (sign in first so it arrives with your store’s details), or email hello@kastomise.com.