Transactional Email Product Image Fallbacks for Receipts
Handle transactional email images that fail to load in order receipts and shipping notifications without breaking the email layout.
Transactional emails — order confirmations, shipping notifications, and return receipts — pull product images dynamically from a catalog API or CDN at send time. When those images are unavailable (deleted SKU, CDN outage, image processing backlog), the email renders with broken-image icons next to the product name and price.
Unlike marketing emails, transactional emails have a functional job: confirm what was ordered. A missing product image is a trust signal failure right at the moment the customer needs confidence. A deterministic fallback that renders the product name inside a placeholder image keeps the email intact when the product photo is unavailable.
Failure modes
Why transactional email images fail at scale
Transactional emails are sent immediately after a customer action. The email system queries the product catalog for images at send time or templates them from data available in the order object. If the product was recently added and the image has not finished processing through the CDN pipeline, the URL exists but returns a 404 or an incomplete image.
Deleted products present a similar problem. A return confirmation email generated weeks after the original order references an image that may have been removed from the catalog when the SKU was retired. The product name and SKU exist in the order database but the image URL is stale.
CDN origin pull failures during traffic spikes cause transient 502 or 503 responses for image URLs. These are temporary but email clients do not retry image loads. The first render the subscriber sees is what they get.
Fallback pattern
Generating product image fallbacks from SKU and product name
Use the product name as the text parameter in a fallback.pics square or thumbnail URL. Set the dimensions to match the product image container in your email template. Most order receipt templates use 80×80 or 100×100 pixel product thumbnails in a line-item table.
The product category or brand makes a useful label parameter when it is available in the order data. For returns, the order number provides a secondary identifier. Encode the text values before inserting them into the URL to handle product names with ampersands, slashes, and special characters.
<!-- Order receipt line item row -->
<!-- Product image with fallback URL as onerror is not reliable in email -->
<!-- Instead: use the fallback URL directly if product image might be missing -->
<!-- Option A: Check image URL at template render time (server-side) -->
{% set product_image = order.line_items[0].image_url
if order.line_items[0].image_url
else "https://fallback.pics/api/v1/square/100?text="
+ order.line_items[0].name | urlencode %}
<img
src="{{ product_image }}"
width="100"
height="100"
alt="{{ order.line_items[0].name }}"
style="display:block;border:0;border-radius:4px;"
/>
<!-- Option B: Always use fallback.pics, swap to product image if available -->
<!-- Check at send time in your email service worker -->Server-side check
Validate image URLs before inserting them into email templates
The most reliable approach is to verify image availability at template render time on the server, before sending. Make a HEAD request to the product image URL and fall back to the generated URL if the response is not 200. This adds latency to your send pipeline but eliminates broken images completely.
For high-volume transactional sends where HEAD request latency is unacceptable, use a pre-send image validation queue. When an order is placed, a background job fetches and validates all product images and stores a resolved-URL list in the order record. The email template reads from the resolved list instead of the raw catalog URLs.
// Node.js send-time image validation
async function resolveProductImage(catalogUrl, productName, size = 100) {
try {
const res = await fetch(catalogUrl, { method: 'HEAD', signal: AbortSignal.timeout(2000) });
if (res.ok) return catalogUrl;
} catch {
// timeout or network error — use fallback
}
return `https://fallback.pics/api/v1/square/${size}?text=${encodeURIComponent(productName)}`;
}
// Usage in order confirmation builder
const lineItemImages = await Promise.all(
order.lineItems.map((item) =>
resolveProductImage(item.imageUrl, item.name, 100)
)
);Platform patterns
Shopify, WooCommerce, and custom platform implementations
Shopify's transactional email templates (Order Confirmation, Shipping Confirmation) use Liquid and pull line item images from the product object. Access {{ line_item.image | img_url: '100x100' }}. If the image is nil, Shopify renders nothing. Add a Liquid conditional: {% if line_item.image %}...{% else %}<img src="https://fallback.pics/api/v1/square/100?text={{ line_item.title | url_encode }}">{% endif %}.
WooCommerce sends transactional emails through PHP templates. The wc_get_template function renders order-details.php. Edit the line item image section to check wp_get_attachment_image_src and fall back to a fallback.pics URL when it returns false. Override the template in your theme's woocommerce/ directory to preserve the change across plugin updates.
Custom platforms using Postmark or SendGrid templates can pass the resolved image URL (or the fallback URL) as a template variable. The fallback logic lives in your order processing code, not in the email template itself, which is cleaner and easier to test.
Dimensions
Standard product thumbnail sizes for email line items
Most email templates built on MJML or hand-coded HTML use 80×80 or 100×100 for line-item product thumbnails. Shopify's default order template uses 64×64. The Container width for a single-column order confirmation is 600px, so the product image column is typically 100-120px and the text column fills the rest.
For higher-end fashion or furniture brands, some templates use a wider image column at 150×150 or even 200×200. Match your fallback image dimensions to your template's img width and height attributes precisely. A mismatch in dimensions produces a layout shift when the fallback loads.
Key takeaways
What to standardize before shipping
- Transactional emails fail at moments of high customer trust — order confirmations with broken images undermine confidence immediately.
- Validate product image URLs server-side before inserting them into the email template to eliminate broken images before send.
- Use the product name as the text parameter in a fallback.pics square URL to produce a readable placeholder at catalog thumbnail dimensions.
- Shopify and WooCommerce both support template overrides where you can add Liquid or PHP fallback logic without touching core files.
- Match fallback image dimensions to your template's img attributes exactly to prevent layout shifts when the fallback loads.
Production fallback layer
Use fallback.pics anywhere an image URL is accepted.
Start with one deterministic URL and standardize fallback behavior across your design system.
Continue reading
Related articles
Email Newsletter Hero Image Fallbacks (No Upload Required)
Skip the upload workflow and generate newsletter hero image URLs from your subject line text, brand color, and issue number instead.
Why Email Clients Block Images and What to Use Instead
Email images blocked by default in Outlook and Gmail means your design relies on invisible assets. Here is what still works and how to plan for it.
Cart Thumbnail Placeholders When Line Item Images Break
Stop broken image icons in checkout cart line items. Use fallback.pics cart thumbnail URLs to keep shopping cart UIs stable when product photos fail to load.