bannx logobannx
Register
5 min read

Integrate banner generation with Shopify: automate product promos

Step-by-step guide to generating dynamic product banners in Shopify using webhooks, Liquid templates, or API integrations.

Integrate banner generation with Shopify: automate product promos

Ecommerce teams need product banners fast: new launches, sales, featured products, seasonal campaigns.

Manually creating banners for every product or sale is unsustainable. Here’s how to automate it with Shopify.

The use case: dynamic product banners

Common scenarios:

  • Product launch: generate banner when new product is published
  • Sale events: create sale banners when discount is applied
  • Featured products: rotate featured product banners
  • Email campaigns: product-specific banners for email

All of these can be automated.

Integration approach 1: Shopify webhooks

Set up webhooks to trigger banner generation:

  1. Product created/updated: webhook fires when product changes
  2. Webhook handler: receives product data
  3. Banner generation: API call to generate banner with product data
  4. Storage: save banner URL to product metafield or CDN

Example webhook payload structure:

{
  "id": "product-123",
  "title": "Premium Headphones",
  "price": "99.99",
  "image": "https://cdn.shopify.com/...",
  "handle": "premium-headphones"
}

Integration approach 2: Liquid template integration

For Shopify themes, generate banners on-the-fly:

  • Use Liquid to pull product data
  • Call banner generation API from theme
  • Cache results in Shopify CDN

This works well for hero banners and product pages.

Integration approach 3: Shopify Flow (automation)

Use Shopify Flow to automate:

  • Trigger: product tag added, price change, inventory update
  • Action: generate banner via API
  • Storage: save to product metafield

This is the most “no-code” approach for Shopify merchants.

The banner payload (product data)

Map Shopify product data to banner template:

{
  "template": "product-promo-01",
  "modifications": [
    { "id": "product_title", "text": "{{ product.title }}" },
    { "id": "price", "text": "{{ product.price | money }}" },
    { "id": "product_image", "url": "{{ product.featured_image }}" },
    { "id": "cta_text", "text": "Shop Now" }
  ]
}

Handling product variants

For products with variants:

  • Generate banner per variant (if needed)
  • Or use main product image + variant-specific price
  • Store variant-specific banners in metafields

Caching strategy

Cache banners to avoid regenerating:

  • Product metafield: store banner URL when generated
  • CDN caching: cache generated banners
  • Invalidation: regenerate when product data changes

CTA

Ready to automate product banners in Shopify?