Developers · Fabrixa Studio

Let your customers design their own products — under your brand.

Fabrixa Studio is a white-label customiser you embed in your product page as an iframe. Your customers create or upload their own designs and preview them live on the product — the editor carries your branding, not ours, so they never see Fabrixa. When they’re done, you place the order against the saved customisation by reference — no artwork files to upload or store.

Integration guide → Open the API reference

White-label · Shopify, WooCommerce & custom · Live preview · Order by reference

Fabrixa Studio · Live demo

Try the editor right here.

This is the exact editor you would embed — open it, drop in artwork and design a real product from our catalog. Nothing to install, no account needed.

It’s the same editor your customers design in through the Shopify and WooCommerce modules or the API. This page is a live try-out — ordering happens on the platform once you register.

See the editor

Your branding. Your customer’s design. One canvas.

Studio embedded in a storefront — a design library, text, shapes, image and layer tools, and a live repeat preview on the product. It runs white-label, so your customers see your shop, never Fabrixa.

yourshop.com/customise

What Studio does

A white-label customiser, embedded in your checkout.

Studio lets your customers personalise products in real time — create a design or upload their own — and see it on the product before they buy, all under your branding.

White-label, under your brand

The editor carries your branding, not ours — your customers personalise and preview products in real time without ever seeing Fabrixa.

Create or upload designs

They build a design inside Studio or upload their own artwork, then position it on the product in the editor.

Live product visualisation

Studio renders the design on the actual product, so customers see what they’ll receive before they add it to the cart.

Saved per cart item

Each customisation is stored against a cart_item_key you supply — one unique value per cart line on your side.

Preview image on demand

Pull a rendered preview image for any cart_item_key to show in the cart, the order summary, or anywhere in your shop.

No file handling

You never touch artwork files. Reference the cart_item_key on the order and Fabrixa attaches the saved design automatically.

Step 1 — Embed

One iframe on your product page.

Selling on Shopify or WooCommerce? Studio is built into those store modules — switch it on, no code required. For custom storefronts and platforms, embed it yourself: Studio is served from studio.fabrixa.com and added with an iframe. Pass three values on the URL — everything else is handled inside the editor, which renders white-label under your branding.

application_key — your Application Key, scopes the embed to your sales channel
sku — the product variant SKU, retrieved from the Integration API
cart_item_key — a unique value you generate per cart line; Studio saves the customisation against it

product-page.html

<!-- Embed Fabrixa Studio on your product page -->
<iframe id="fabrixa-studio"
  src="https://studio.fabrixa.com?application_key=APPLICATION_KEY&sku=COF099191&cart_item_key=CART_ITEM_KEY"
  name="FabrixaStudio"
  scrolling="no" frameborder="1"
  width="100%" height="100%" allowfullscreen>
</iframe>

Step 2 — Listen

Studio talks back with postMessage.

Studio posts two messages to the parent window. customizationFinished fires when the customer clicks Add to Cart; closeButtonClicked fires when they click Back. Listen for them on the parent and always verify event.origin.

On customizationFinished, add the line to your cart keyed by the same cart_item_key you passed into the iframe — that’s the link to the saved design.

studio-events.js

window.addEventListener("message", (event) => {
  // Always check the origin first
  if (event.origin !== "https://studio.fabrixa.com") return;

  if (event.data === "customizationFinished") {
    // Add to Cart → store the line keyed by your cart_item_key
    addToCart(cartItemKey);
  } else if (event.data === "closeButtonClicked") {
    // Back → close the editor / restore the product page
    closeStudio();
  }
});

Step 3 — Preview

Show the finished design anywhere.

Once a customisation is saved, fetch a rendered image of it from the preview endpoint — just set it as the src of an <img>. Ideal for the cart, the order summary, or a confirmation page.

The preview is keyed by the same cart_item_key, with your Application Key on the query string.

cart-preview.html

<!-- Rendered preview of the saved customisation -->
<img
  src="https://api.fabrixa.com/v2/studio/customizations/CART_ITEM_KEY/preview?Application-Key=APPLICATION_KEY"
  alt="Customised product preview"
  style="max-width:100%;height:auto">

Step 4 — Order

Place the order by reference.

At checkout, POST the order to /v2/integration/orders from your backend. For a line a customer designed in Studio, send the sku, the quantity and the same cart_item_key you passed into the iframe — that key is the saved design, so no sources file is needed. Fabrixa pulls the customisation and puts it into production.

cart_item_key is the Studio reference — use it only for lines a customer customised in Studio. Every row carries either a cart_item_key (designed in Studio) or a sources file (your own artwork — PDF, TIFF, JPG or PNG), never both. Everything else on the order is identical.

POST /v2/integration/orders

{
  "number": "NL2026063001",
  "purchased_at": "2026-06-30 12:00:00",
  "rows": [
    {
      "sku": "SB796162",
      "quantity": 1,
      "cart_item_key": "0cb76770-de2d-4524-aa48-47b6e5f0d8a5"
    }
  ],
  "customer":         { "first_name": "Maria", "email": "maria@example.com" },
  "shipping_address": { "...": "..." }
}

Keys & security

Application Key in the browser, Access Token on your backend.

Studio and the preview endpoint use your Application Key, which is visible in the embed by design — it only scopes the editor and renders previews for your channel. Creating orders needs the Application Access Token as well, and that stays on your backend.

In the browser

Studio & preview

application_key on the Studio iframe URL
Application-Key on the preview image URL
Renders the editor and saved-design previews for your channel
Cannot place orders, read billing, or read another channel’s data

Backend only

Order creation

Authorization: Bearer APPLICATION_ACCESS_TOKEN
X-Application-Key: APPLICATION_KEY
Create and track orders via POST /v2/integration/orders
Keep the Access Token server-side — never ship it in client code

Access

Studio is enabled per account.

Create a sales channel in your dashboard to generate the Application Key the embed authenticates with, then build and test against that channel before it takes real orders. There’s a live demo in the API reference where you can open Studio with your own SKU and key — pricing varies by volume tier, so talk to our team for specifics.

Ready to integrate?

Add Studio to your storefront.

Create a sales channel to generate your keys and embed Studio today. Need a hand wiring up the events or the order flow? Talk to a solutions engineer — response within one business day.

Contact a solutions engineer Read the integration guide