Shopify 🤝 Wafrow dynamic images

Last updated: 27.05.2026

SHOPIFY

Connect your Shopify store to dynamically render live product data, prices, images, and deep-linked QR codes directly inside your email marketing templates.

How it Works

Wafrow provides a native Shopify integration utilizing high-performance, real-time Lazy-Rendering.

Merchants do not need to pre-generate hundreds of CRM images to use in campaigns. Instead, you design a campaign template once and copy a single, highly performant <img> tag with Shopify Liquid placeholders.

When a customer opens their email, Wafrow's server-side rendering pipeline fetches the live product attributes from Shopify, compiles the personalized banner on-the-fly, and caches it at the CDN proxy.

Key Features

  • One-Click Shopify OAuth Setup: Safely connect your store inside the Settings page by simply entering your Shopify domain (e.g., your-store.myshopify.com). No manual API keys required!
  • Shopify Starter Template: Access a ready-made Shopify banner template (shopify_default_banner) styled beautifully using Shopify's premium color palette, complete with product photos, title, pricing, a call-to-action button, inventory urgency badges, and a custom QR code deep-link.
  • Liquid Snippet Generator: An interactive helper built directly into the Canvas Editor's navigation bar that scans all layer names and auto-maps them to correct Liquid variables, letting you copy-paste the finalized HTML image code instantly.

Layer Mapping Rules

The Liquid Snippet Generator automatically inspects your template's Fabric.js canvas layers and maps them to standard Shopify Liquid placeholders based on their layer names:

Layer Type Name Rule / Pattern Generated Liquid Placeholder Description
Text Contains title, headline, or name {{ product.title | url_param_escape }} Automatically displays the Shopify product title.
Text Contains price {{ product.price | money }} Renders the formatted active product price in your store currency.
Image Matches any image layer {{ product.featured_image | img_url: '1024x1024' | url_param_escape }} Swaps the design placeholder with the live product image.
QR Code Subtype qrcode {{ shop.secure_url }}/products/{{ product.handle }} Encodes a scannable, mobile-friendly deep-link directly to that specific product page.
Text Custom name (e.g., brand_tag) {{ product.metafields.custom.brand_tag | default: 'Fallback Text' | url_param_escape }} Seamlessly maps to a custom Shopify metafield, falling back to your static design text.

Example Snippet

Here is a live example of the Shopify Liquid image tag generated for the Default Shopify Starter Template. Once you connect your store, this is an editable template in your account where you can modify everything:

{{ product.title | escape }}

Step-by-Step Integration Guide

Step 1: Connect your Shopify Store

  1. Log in to your Wafrow account and navigate to the Settings page from your dashboard.
  2. Scroll to the Shopify Integration card.
  3. Enter your primary Shopify store domain (e.g. your-store.myshopify.com or paste your admin store URL) and click Connect Shopify.
  4. You will be redirected to the Shopify OAuth consent screen. Click Install App to authorize Wafrow.
  5. Once authorized, you will return to Settings with a green Connected badge showing your store domain.

Step 2: Choose or Design a Template

  1. Go to Image Templates and click on the Shopify Default Banner starter template to clone it, or create a brand-new template from scratch.
  2. In the Canvas Editor, make sure your layer names align with the mapping rules listed above (e.g. naming your primary textbox layer product_title or product_price).

Step 3: Copy the Generated HTML Code

  1. Once your template is saved, look at the canvas top navigation bar.
  2. Click the Shopify Code Generator icon button (located right next to the "Create Variant" button).
  3. Review the generated code inside the modal. The system automatically populates the Liquid mapping queries based on your active canvas.
  4. Click Copy Snippet to copy the HTML image code to your clipboard.

Step 4: Paste into your Email Campaign

  1. Open Shopify Email, Klaviyo, Mailchimp, or any email builder of your choice.
  2. Add a custom HTML / Code Block to your newsletter or transactional email template.
  3. Paste the copied <img> snippet.
  4. Preview or send a test email. Your email client will automatically resolve the Liquid placeholders and render stunning, highly personalized product graphics dynamically for each recipient!

Support

Need help setting up custom metafields or fine-tuning your template's rendering? Please contact our support team at [email protected] or chat with us on Slack!