Media editor: build vs buy in the age of AI
Polotno

PRINT ON DEMAND

Fourthwall API: build a custom merch designer with Polotno

Build on the Fourthwall API with an embedded design editor: creators design merch in your app, and Fourthwall renders the mockups, sells and ships. Live demo and code included.

Polotno + Fourthwall pairs Polotno's embedded design editor SDK with Fourthwall's Open API . Your users design apparel and merch inside your app, your backend creates products in Fourthwall, and Fourthwall handles storefront, orders, memberships, and fulfillment.

Try it below. Design the shirt, then press Send to Fourthwall: the editor exports each side at the size of Fourthwall's print areas, Fourthwall creates a hidden design product and returns its own mockups, and the demo archives the product again. Nothing is ordered or published.

The full code, editor and server, is on GitHub: polotno-fourthwall-demo. It runs on Polotno SDK, so it needs a Polotno API key. To compare it with the other print APIs, see the print on demand API comparison.

The problem Fourthwall doesn't solve

Fourthwall is creator commerce done right: open API, active developer community, memberships, and a storefront model built for musicians, YouTubers, and streamers. Their product-catalog workflow is solid, but their built-in designer assumes creators arrive with finished artwork, and most creators don't own professional design software.

Creator-focused apps on Fourthwall usually:

  • Ask creators to upload completed mockups
  • Offer template-and-text tooling but no real layered editor
  • Skip collection pages because generating multi-garment mockups is too manual

Polotno goes in front of Fourthwall so creators design merch in a real layered editor , generate collection-ready mockups, and publish to their Fourthwall shop without leaving your app.

How to create Fourthwall products with the API

  • Design: Creator picks a Fourthwall product (T-shirt, hoodie, mug). Polotno loads the canvas with print-zone overlays.
  • Edit: Creator layers artwork, text, and effects. Social-ready mockups preview live.
  • Export: Your app exports a PNG of the design per region (front, back) via store.toDataURL .
  • Create product: Your backend uploads each image to Fourthwall, then creates a design product on a Fourthwall product template. Fourthwall renders the product images itself and returns them in the response.
  • Sell + fulfill: Fourthwall lists the product on the creator's shop, takes the order, and fulfills.

What a request looks like

js
// Fourthwall's Platform API, with a shop API key as Basic auth.
// Guide: https://docs.fourthwall.com/guides/create-design-products
const fw = (path, body) =>
  fetch(`https://api.fourthwall.com/open-api/v1.0${path}`, {
    method: "POST",
    headers: {
      Authorization: `Basic ${btoa(`${FW_USERNAME}:${FW_PASSWORD}`)}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify(body),
  }).then((r) => r.json())

// 1. Export the design and upload it to the signed URL Fourthwall returns.
const png = await store.toBlob({ pixelRatio: 4, mimeType: "image/png" })
const { uploadUrl, fileUrl } = await fw("/media/upload-url", {
  fileName: "design.png",
  contentType: "image/png",
  size: png.size,
})
await fetch(uploadUrl, {
  method: "PUT",
  headers: {
    "Content-Type": "image/png",
    "x-goog-content-length-range": `0,${png.size}`,
  },
  body: png,
})

// 2. Register the image, then create the product on a template.
const image = await fw("/media/images", { fileUrl, width, height })
const product = await fw("/products", {
  type: "design",
  productTemplateId: TEMPLATE_ID, // from GET /product-templates
  name: "Tour tee",
  regions: [{ region: "front", imageId: image.id, placementStrategy: "AUTO" }],
  publishOnCreate: false, // hidden until the creator publishes it
})
// product.images holds Fourthwall's rendered mockups per color and region.

What Polotno handles vs. what Fourthwall handles

Polotno (in your app)

  • Creator-friendly templates (apparel, drinkware, accessories)
  • Embedded editor UI: layered design with text, image, effects
  • Social-ready mockup generator via Cloud Render API
  • Collection page previews
  • 300dpi print file export

Fourthwall (backend)

  • Storefront and memberships
  • Product catalog + variants
  • Checkout, payments, and taxes
  • Printing and fulfillment
  • Order status webhooks

Technical details

  • Export: PNG per region via store.toBlob , uploaded to the signed URL from POST /media/upload-url .
  • Mockups: the create-product response includes Fourthwall's rendered images per color and region.
  • Auth: a shop API key (username and password) as Basic auth. Apps that serve many shops use OAuth.
  • Developer community: Fourthwall runs an active developer community for schema questions.
  • Rendering modes: Client-side for creator previews; Cloud Render API for batch mockup renders.

What you can build

Creator apparel + merch from Fourthwall's catalog:

  • T-shirts and long sleeves
  • Hoodies and sweatshirts
  • Hats
  • Mugs and tumblers
  • Tote bags
  • Stickers and pins
  • Posters and prints

FAQ

Do I need a Fourthwall account?

Yes, with Open API access. Fourthwall is developer-friendly. Start at their docs .

Can creators preview merch for social?

Yes. The Cloud Render API renders social-ready mockups alongside the print file for Instagram, TikTok, and shop-listing imagery.

Can I build a tool that manages multiple creator accounts?

Yes. Fourthwall's API supports multi-shop integrations; Polotno renders per-creator designs against their product catalog.

Start building

The code for the demo above is on GitHub: polotno-fourthwall-demo. Clone it, add a Polotno API key (a trial key from your Polotno dashboard works) and your Fourthwall API credentials, and the editor-to-order flow runs locally.

Skip the build, cut dev costs, launch faster

TRUSTED BY

100,000+

CREATORS

300+

BUSINESSES

ExpediaUnbounceLovePopPostGridPredis.ai