Shopify Product Image Automation: Sale Badges, Price Overlays & More

const response = await fetch("https://render.imejis.io/v1/YOUR_TEMPLATE_ID", {
  method: "POST",
  headers: {
    Authorization: "Bearer YOUR_API_KEY",
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    product_name: inputData.title,
    price: inputData.price,
    compare_at_price: inputData.compare_at_price,
    product_image: inputData.image_url,
    show_sale_badge: inputData.compare_at_price ? "true" : "false",
  }),
})
 
// API returns image directly - we need to handle the binary
const imageBuffer = await response.arrayBuffer()
 
// For Zapier, we'll base64 encode it
output = {
  image_base64: Buffer.from(imageBuffer).toString("base64"),
}

{
  "title": "{{ product.title }}",
  "price": "{{ product.price }}",
  "compare_at_price": "{{ product.compare_at_price }}",
  "image_url": "{{ product.featured_image.src }}"
}

// webhooks/product.js
import { generateProductImage } from "../services/imageGen.js"
 
export async function handleProductUpdate(req, res) {
  const product = req.body
 
  // Skip if no relevant changes
  if (!shouldRegenerateImage(product)) {
    return res.status(200).send("Skipped")
  }
 
  try {
    const imageUrl = await generateProductImage(product)
 
    // Optionally update product metafield with new image URL
    await updateProductMetafield(product.id, "generated_image", imageUrl)
 
    res.status(200).send("Generated")
  } catch (error) {
    console.error("Image generation failed:", error)
    res.status(500).send("Error")
  }
}
 
function shouldRegenerateImage(product) {
  // Logic to determine if image needs updating
  // Could check price changes, sale status, etc.
  return true
}

// services/imageGen.js
import fs from "fs"
 
export async function generateProductImage(product) {
  const response = await fetch(
    `https://render.imejis.io/v1/${process.env.TEMPLATE_ID}`,
    {
      method: "POST",
      headers: {
        Authorization: `Bearer ${process.env.IMEJIS_API_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        product_name: product.title,
        price: formatPrice(product.variants[0].price),
        original_price: product.variants[0].compare_at_price
          ? formatPrice(product.variants[0].compare_at_price)
          : null,
        product_image: product.images[0]?.src,
        is_on_sale: !!product.variants[0].compare_at_price,
        is_new: isNewProduct(product.created_at),
      }),
    }
  )
 
  // API returns image directly
  const imageBuffer = await response.arrayBuffer()
 
  // Upload to your CDN (Cloudinary, S3, etc.)
  const cdnUrl = await uploadToCDN(
    Buffer.from(imageBuffer),
    `product-${product.id}.png`
  )
 
  return cdnUrl
}
 
function formatPrice(price) {
  return `$${parseFloat(price).toFixed(2)}`
}
 
function isNewProduct(createdAt) {
  const thirtyDaysAgo = new Date()
  thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30)
  return new Date(createdAt) > thirtyDaysAgo
}

// server.js
 
import { Shopify } from "@shopify/shopify-api"
import express from "express"
 
import { handleProductUpdate } from "./webhooks/product.js"
 
const app = express()
 
// Verify Shopify webhook signature
app.use("/webhooks", Shopify.Webhooks.Registry.process)
 
app.post("/webhooks/products/update", handleProductUpdate)
 
// Register webhooks on app install
Shopify.Webhooks.Registry.register({
  path: "/webhooks/products/update",
  topic: "PRODUCTS_UPDATE",
  webhookHandler: handleProductUpdate,
})

// scripts/sync-shopify-images.js
import Shopify from "shopify-api-node"
 
const shopify = new Shopify({
  shopName: process.env.SHOP_NAME,
  apiKey: process.env.SHOPIFY_API_KEY,
  password: process.env.SHOPIFY_PASSWORD,
})
 
async function processAllProducts() {
  let params = { limit: 50 }
 
  do {
    const products = await shopify.product.list(params)
 
    for (const product of products) {
      await generateAndStoreImage(product)
      // Rate limit
      await sleep(1000)
    }
 
    params = products.nextPageParameters
  } while (params)
}
 
async function generateAndStoreImage(product) {
  const needsImage = !product.metafields?.find(
    (m) => m.key === "generated_image"
  )
 
  if (!needsImage) return
 
  const response = await fetch(
    `https://render.imejis.io/v1/${process.env.TEMPLATE_ID}`,
    {
      method: "POST",
      headers: {
        Authorization: `Bearer ${process.env.IMEJIS_API_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        product_name: product.title,
        price: `$${product.variants[0].price}`,
        product_image: product.images[0]?.src,
      }),
    }
  )
 
  const imageBuffer = await response.arrayBuffer()
  const cdnUrl = await uploadToCDN(Buffer.from(imageBuffer))
 
  // Store URL in metafield
  await shopify.metafield.create({
    namespace: "generated",
    key: "product_image",
    value: cdnUrl,
    type: "url",
    owner_resource: "product",
    owner_id: product.id,
  })
 
  console.log(`Generated: ${product.title}`)
}
 
processAllProducts()

{
  "price": "$79.99",
  "original_price": "$99.99", // null if not on sale
  "show_sale_badge": true,
  "discount_percent": "20%"
}

const discount = originalPrice
  ? Math.round((1 - price / originalPrice) * 100)
  : 0

{% if product.metafields.generated.product_image %}
  <img src="{{ product.metafields.generated.product_image }}" alt="{{ product.title }}">
{% else %}
  <img src="{{ product.featured_image | img_url: 'large' }}" alt="{{ product.title }}">
{% endif %}

await shopify.productImage.create(product.id, {
  src: cdnUrl,
  alt: `${product.title} - Social Image`,
  position: product.images.length + 1,
})

{% if product.metafields.generated.og_image %}
  <meta property="og:image" content="{{ product.metafields.generated.og_image }}">
{% endif %}

app.post("/webhooks/products/update", (req, res) => {
  res.status(200).send("OK") // Respond immediately
 
  // Process in background
  setImmediate(() => {
    handleProductUpdate(req.body)
  })
})