> ## Documentation Index
> Fetch the complete documentation index at: https://sudomock.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> The base URL is https://api.sudomock.com.
> Authenticate every request with the x-api-key header. Keys begin with sm_.
> A render returns the finished image at data.print_files[0].export_path. A request sent with is_async true returns a job_id to poll at GET /api/v1/jobs/{job_id}.
> Prefer the official SDKs over hand-written HTTP calls: npm install sudomock for Node, pip install sudomock for Python.

# Add a product customizer to your Shopify store

> Let shoppers personalise your products before they buy.

[Shopify](https://www.shopify.com) hosts your storefront and your checkout. The
official [SudoMock Product Customizer](https://apps.shopify.com/sudomock-product-customizer)
app adds a customizer to your product pages. A shopper opens it from the
product page, uploads artwork, places it, and watches a live preview of the
finished product while they work. When it looks right they add that exact
design to the cart.

The editor opens in a modal over the product page, in your colours and your
wording, so nobody leaves your store to design.

## How to use the app

<Steps>
  <Step title="Install from the Shopify App Store">
    Open the
    [SudoMock Product Customizer listing](https://apps.shopify.com/sudomock-product-customizer)
    and install it into your store. Installing is free, and the app runs inside
    your Shopify admin.
  </Step>

  <Step title="Connect your SudoMock account">
    Select **Connect Account** and sign in. The credential stays on the server
    and the browser receives a short lived session token instead, so no key is
    pasted into theme code or a metafield.
  </Step>

  <Step title="Map a mockup to a product">
    Upload your templates in the
    [SudoMock dashboard](https://sudomock.com/dashboard), then open
    **Products** in the app and pick a mockup for each product you want to make
    customizable. The choice is written onto the product itself, as Shopify
    metafields in the `sudomock` namespace.
  </Step>

  <Step title="Add the block to your theme">
    In the theme editor, open the product template, add the **Product
    Customizer** block from the Apps list, and place it near your buy button.
    Label, icon, colours, border, alignment and spacing are block settings, so
    the button matches your theme without touching code.
  </Step>

  <Step title="Check a mapped product">
    On the live storefront the button appears only on products that have a
    mockup mapped and customization switched on. In the theme editor it always
    shows, with a note when one of the two is still missing.
  </Step>
</Steps>

## A live preview of the real thing

The preview is a render of your own file. A shopper who nudges a design sees
the folds, the shadows and the surface react, because the preview comes from
the same render engine your API calls use. What they approve is what the engine
produced, not an approximation drawn in the browser.

Which controls they get depends on the mockup. A Photoshop template can offer
adjustments, colour overlay, text layers, fit mode, position, size, rotation,
flip, zoom and export options. A mockup built from a product photo can offer
artwork, fill, blend, opacity, transform, zoom, export and background removal.
Any control can be switched off, which is how you keep shoppers inside the
decisions you are able to fulfil. [Studio](/docs/dashboard/studio) carries the full
set.

## Your brand on every screen

The editor is yours to dress. The logo, the accent colour, the neutral palette,
the corner radius, the font and the choice of a light or a dark theme come from
your settings, and so does every word a shopper reads: the header, the upload
prompt, the button that adds to cart, and the two short lines that button
shows while the item goes into the cart and once it is in. The interface speaks
English or Turkish.

Settings are held per API key, so one account can dress two storefronts
differently. Change them in the dashboard and the next shopper sees the change.
[Sell customizable products under your own brand](/docs/integrations/white-label-product-customizer)
reads the editor, the image link and this button as one surface.

## Photoshop templates and product photos

Both kinds of mockup appear in the app's picker. A Photoshop template brings
its smart objects, its text layers and its effects, which is what you want for
apparel, packaging and anything that folds. A mockup built from a straight
product photo needs no Photoshop at all: mark the print areas once and the same
customizer works on it. [Upload a PSD](/docs/psd-mockups/upload-a-psd) and
[Photo mockups](/docs/photo-mockups/overview) cover preparing each one.

## What the order tells you

Every add to cart is confirmed on the server before the cart accepts it. The
app checks the submitted design against the session that produced it, the
mockup it names, and the product and variant the shopper was looking at, and
only then posts the line. Confirming the same action twice returns the first
result instead of a second line, so a shopper who taps twice on a slow
connection still buys one item.

The confirmed design then travels with the line item, as two properties whose
names start with an underscore: the render the shopper approved, and the
confirmation that accepted it. Shopify treats such a property as hidden, so
both stay out of the cart, the checkout and the confirmation email. Your shopper
gets a clean order, and you get a line that names exactly which design was
approved.
[Where the mockup id appears on a Shopify order](/docs/knowledge-base/where-the-mockup-id-appears-on-a-shopify-order)
names both properties and says where the mockup id lives instead.

## Billing runs through Shopify

The app is free to install, and a store picks its monthly plan inside Shopify,
on the same invoice as the rest of its apps. A store that already subscribes on
sudomock.com keeps that subscription instead and is sent back there to change
plan, so nobody pays twice.

Renders a shopper makes draw on the same monthly allowance as renders you make
from the API, so the storefront and the catalogue share one number to watch.

## Example workflow: a seasonal collection

Mother's Day is a month out and you want new designs live on three products.

1. Prepare one mockup per product and map each one in **Products**, so all
   three become customizable in the same sitting.
2. Render your own listing images for the collection from the API, or from an
   [n8n](/docs/integrations/n8n) workflow, against those same mockups. Catalogue and
   storefront stay in step because they are the same files.
3. Publish the collection. A shopper opens a product, drops in a name or a
   photo, and adds their version to the cart.
4. Work the orders. Each line names the design that was approved, so nothing is
   rebuilt from a screenshot or a chat message.

The same shape carries any other dated push, from a winter release to a back to
school run.

## When you want the API instead

The app covers the storefront path, where a shopper does the designing. To
generate images yourself, from a spreadsheet, a catalogue feed or your own
backend, call the render API directly and keep the app for the storefront.
Start at the [Quickstart](/docs/quickstart).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.