How to use the app
1
Install from the Shopify App Store
Open the
SudoMock Product Customizer listing
and install it into your store. Installing is free, and the app runs inside
your Shopify admin.
2
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.
3
Map a mockup to a product
Upload your templates in the
SudoMock 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.4
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.
5
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.
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 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 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 and Photo mockups 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 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.- Prepare one mockup per product and map each one in Products, so all three become customizable in the same sitting.
- Render your own listing images for the collection from the API, or from an n8n workflow, against those same mockups. Catalogue and storefront stay in step because they are the same files.
- Publish the collection. A shopper opens a product, drops in a name or a photo, and adds their version to the cart.
- Work the orders. Each line names the design that was approved, so nothing is rebuilt from a screenshot or a chat message.