SudoMock
Integration

Shopify Integration

Automatically generate product mockups for your Shopify store. Perfect for POD and custom product businesses.

E-commerce Automation

New product created → Generate mockups → Attach to product → Ready to sell

Use Cases

Auto-Generate on Create

Generate mockups when new products are added

Variant Images

Create mockups for each color/size variant

Bulk Import

Process entire catalog imports automatically

POD Integration

Connect with Printful/Printify for end-to-end automation

Method 1: Shopify Webhooks

Set up a webhook to trigger mockup generation when products are created.

1

Create Webhook Endpoint

Deploy this endpoint to handle Shopify product webhooks:

Shopify Webhook Handler
1// Express.js webhook handler
2import express from 'express';
3import crypto from 'crypto';
4
5const app = express();
6app.use(express.json());
7
8const SHOPIFY_WEBHOOK_SECRET = process.env.SHOPIFY_WEBHOOK_SECRET;
9const SUDOMOCK_API_KEY = process.env.SUDOMOCK_API_KEY;
10
11// Template mapping
12const TEMPLATES = {
13 't-shirt': { mockup: 'tshirt-uuid', so: 'so-uuid' },
14 'hoodie': { mockup: 'hoodie-uuid', so: 'so-uuid' },
15 'mug': { mockup: 'mug-uuid', so: 'so-uuid' }
16};
17
18// Verify Shopify webhook signature
19function verifyWebhook(req) {
20 const hmac = req.headers['x-shopify-hmac-sha256'];
21 const hash = crypto
22 .createHmac('sha256', SHOPIFY_WEBHOOK_SECRET)
23 .update(JSON.stringify(req.body))
24 .digest('base64');
25 return hmac === hash;
26}
27
28// Handle product creation
29app.post('/webhooks/shopify/products/create', async (req, res) => {
30 // Verify webhook authenticity
31 if (!verifyWebhook(req)) {
32 return res.status(401).send('Invalid signature');
33 }
34
35 const product = req.body;
36
37 // Get design URL from metafield or tag
38 const designUrl = getDesignUrl(product);
39 const productType = getProductType(product);
40
41 if (!designUrl || !productType) {
42 console.log('No design URL or product type, skipping');
43 return res.status(200).send('Skipped');
44 }
45
46 try {
47 // Generate mockup
48 const mockupUrl = await generateMockup(designUrl, productType);
49
50 // Add image to Shopify product
51 await addImageToProduct(product.id, mockupUrl);
52
53 console.log(`Generated mockup for product ${product.id}`);
54 res.status(200).send('OK');
55
56 } catch (error) {
57 console.error('Error:', error);
58 res.status(500).send('Error generating mockup');
59 }
60});
61
62async function generateMockup(designUrl, productType) {
63 const template = TEMPLATES[productType];
64
65 const response = await fetch('https://api.sudomock.com/api/v1/renders', {
66 method: 'POST',
67 headers: {
68 'X-API-KEY': SUDOMOCK_API_KEY,
69 'Content-Type': 'application/json'
70 },
71 body: JSON.stringify({
72 mockup_uuid: template.mockup,
73 smart_objects: [{
74 uuid: template.so,
75 asset: { url: designUrl }
76 }],
77 export_options: {
78 image_format: 'webp',
79 image_size: 2000,
80 quality: 95
81 }
82 })
83 });
84
85 const result = await response.json();
86
87 if (!result.success) {
88 throw new Error(result.detail);
89 }
90
91 return result.data.print_files[0].export_path;
92}
93
94async function addImageToProduct(productId, imageUrl) {
95 const shopifyUrl = `https://${process.env.SHOPIFY_SHOP}/admin/api/2024-01/products/${productId}/images.json`;
96
97 await fetch(shopifyUrl, {
98 method: 'POST',
99 headers: {
100 'X-Shopify-Access-Token': process.env.SHOPIFY_ACCESS_TOKEN,
101 'Content-Type': 'application/json'
102 },
103 body: JSON.stringify({
104 image: { src: imageUrl }
105 })
106 });
107}
108
109function getDesignUrl(product) {
110 // Check metafields, tags, or description for design URL
111 // Customize based on your product structure
112 return product.metafields?.find(m => m.key === 'design_url')?.value;
113}
114
115function getProductType(product) {
116 return product.product_type?.toLowerCase();
117}
118
119app.listen(3000);
2

Register Webhook in Shopify

In Shopify Admin → Settings → Notifications → Webhooks, add:

  • Event: Product creation
  • URL: https://your-server.com/webhooks/shopify/products/create
  • Format: JSON

Method 2: Using n8n (No Code)

For a no-code solution, use n8n with Shopify trigger:

n8n Shopify Workflow
1// n8n Workflow
21. Shopify Trigger
3 - Event: Product Created
4 - Credentials: Your Shopify store
5
62. IF Node (Check for design URL)
7 - Condition: {{ $json.metafields.design_url }} exists
8
93. HTTP Request (SudoMock)
10 - Method: POST
11 - URL: https://api.sudomock.com/api/v1/renders
12 - Headers: X-API-KEY = your-api-key
13 - Body: {
14 "mockup_uuid": "your-template-uuid",
15 "smart_objects": [{
16 "uuid": "your-so-uuid",
17 "asset": { "url": "{{ $json.metafields.design_url }}" }
18 }]
19 }
20
214. Shopify Node
22 - Operation: Update Product
23 - Add image from SudoMock response

Variant Images

For products with color variants, loop through variants and generate a mockup for each color using different template UUIDs.

Batch Processing Existing Products

Process your entire catalog with this script:

Batch Process Existing Products
1// Process all products without mockups
2async function processAllProducts() {
3 const shopify = new Shopify({
4 shopName: process.env.SHOPIFY_SHOP,
5 accessToken: process.env.SHOPIFY_ACCESS_TOKEN
6 });
7
8 let products = await shopify.product.list({ limit: 250 });
9
10 for (const product of products) {
11 // Skip if already has images
12 if (product.images.length > 0) continue;
13
14 const designUrl = getDesignUrl(product);
15 if (!designUrl) continue;
16
17 try {
18 const mockupUrl = await generateMockup(designUrl, product.product_type);
19 await shopify.productImage.create(product.id, { src: mockupUrl });
20 console.log(`${product.title}`);
21 } catch (error) {
22 console.error(`${product.title}: ${error.message}`);
23 }
24
25 // Rate limit protection
26 await sleep(500);
27 }
28}
29
30processAllProducts();

Automate Your Shopify Store

Get your API key and start generating product mockups automatically.