ShDeveloper guide

Generate Shopify product mockups with the API

Generate Shopify product mockups programmatically by calling the SudoMock render endpoint from a product webhook. When a product is created or updated, send its artwork to your PSD template and get back a finished image URL to attach as a product photo. Start with 500 one-time renders, then choose a published monthly volume plan.

Your PSD renders with its Smart Objects, blend modes, smart filters, and perspective warp intact, plus editable text layers, so print-on-demand catalogs get consistent on-product imagery without manual editing. Prefer no code? The Shopify app installs in minutes instead.

Start Free, 500 CreditsRead the API Docs
No-code Shopify appShopify webhook guide
2,000+open-licensed font families25parallel renders on Scale500free renders, no card5Krenders on Starter

Set up a webhook receiver (Node.js example)

Grab an API key from your dashboard, then keep it in an environment variable. Every request authenticates with the x-api-key header.

Set up a webhook receiver (Node.js example)
1npm install express
2export SUDOMOCK_API_KEY="sm_your_api_key"
3# Register a products/create (or products/update) webhook in your Shopify app
4# pointing at this receiver's public URL.

Render on a Shopify product webhook

One POST to the render endpoint composites your design into the PSD template and returns a finished image URL. Smart Objects, blend modes, smart filters, and perspective warp all render from your real file, so the output matches the template you built.

Render, Shopify
1import express from "express";
2

3const app = express();
4const API_BASE = "https://api.sudomock.com/api/v1";
5

6app.post("/webhooks/products/create", express.json(), async (req, res) => {
7  const product = req.body;
8  // The artwork to place on the mockup (any public image URL).
9  const designUrl = product.image?.src;
10

11  const render = await fetch(`${API_BASE}/renders`, {
12    method: "POST",
13    headers: {
14      "Content-Type": "application/json",
15      "x-api-key": process.env.SUDOMOCK_API_KEY,
16    },
17    body: JSON.stringify({
18      mockup_uuid: "c315f78f-d2c7-4541-b240-a9372842de94",
19      smart_objects: [
20        {
21          uuid: "128394ee-6758-4f2f-aa36-e2b19b152bd9",
22          asset: { url: designUrl, fit: "cover" },
23        },
24      ],
25      export_options: { image_format: "webp", image_size: 1920, quality: 90 },
26    }),
27  });
28

29  const { data } = await render.json();
30  const mockupUrl = data.print_files[0].export_path;
31  // Attach mockupUrl back to the Shopify product via the Admin API.
32  res.sendStatus(200);
33});
34

35app.listen(3000);

How it works

  1. 1Upload a PSD once to get its mockup id and the ids of its Smart Objects and text layers.
  2. 2Register a products/create or products/update webhook that posts to your receiver.
  3. 3Render the product artwork through SudoMock, then attach the returned image URL to the product with the Shopify Admin API.

Personalize per-variant text on the mockup

SudoMock renders the text layers in your PSD, so you can swap the wording, font, size, and color at render time and get back an image that keeps the look the designer built.

  • 2,000+ open-licensed font families, free for commercial use
  • Custom TTF and OTF font upload, up to 5 MB each, on Pro and Scale
  • Styled segments: mixed-style layers stay editable run by run
  • Box text: area text wraps inside its box and clips exactly as designed
Text layers, Shopify
1// Render a variant-specific headline, for example a personalized name.
2const render = await fetch(`${API_BASE}/renders`, {
3  method: "POST",
4  headers: {
5    "Content-Type": "application/json",
6    "x-api-key": process.env.SUDOMOCK_API_KEY,
7  },
8  body: JSON.stringify({
9    mockup_uuid: "c315f78f-d2c7-4541-b240-a9372842de94",
10    text_layers: [
11      {
12        uuid: "b7f2c1a0-9e34-4d21-8f0a-1c2b3d4e5f60",
13        text: variant.title, // e.g. the buyer's name or product option
14        font: "Poppins-Bold",
15        font_size: 96,
16        color: "#C0392B",
17      },
18    ],
19  }),
20});
21

22const { data } = await render.json();
23const mockupUrl = data.print_files[0].export_path;

Edit one mixed-style layer, run by run

When a single layer mixes styles, like a thin first name next to a bold surname, send a segments array with only the runs you want to change. Every run keeps its own font, size, and color, and any run you leave out stays as designed. This bundle of catalog, custom upload, per-segment styling, and box wrap over the API is what sets the text layers apart.

Styled segments request
1{
2  "mockup_uuid": "c315f78f-d2c7-4541-b240-a9372842de94",
3  "text_layers": [
4    {
5      "uuid": "b7f2c1a0-9e34-4d21-8f0a-1c2b3d4e5f60",
6      "segments": [
7        { "index": 0, "text": "Jane " },
8        { "index": 1, "text": "SMITH" }
9      ]
10    }
11  ]
12}

Full field reference and the fallback behavior when a font is not in your catalog live in the text layers documentation.

Frequently asked questions

How do I generate Shopify product mockups with code?

Register a products/create or products/update webhook in your Shopify app that posts to your server. In the handler, send the product artwork to https://api.sudomock.com/api/v1/renders, then attach the returned image URL at data.print_files[0].export_path back to the product with the Shopify Admin API.

Do I have to write code to use SudoMock with Shopify?

No. The SudoMock Shopify app adds product customization with no code, and installs in minutes. Use this API approach when you want full control over when and how mockups are generated inside your own backend.

Can I personalize per-variant text on the mockup?

Yes. Pass a text_layers array to the render call to set a variant-specific headline, name, or option. The catalog carries 2,000+ open-licensed font families, and mixed-style layers stay editable segment by segment.

Render your first Shopify mockup in minutes

Get 500 one-time API credits to test. No credit card required. See pricing for published monthly volumes and annual billing.

Start Free, 500 CreditsAll Integrations