Cart Thumbnail Placeholders When Line Item Images Break

Why cart images matter more

Broken thumbnails in the cart are a trust signal

Product listings compete with other listings. A missing image there means the user might not click. In the cart, the user has already committed to investigating a product. A broken image now raises questions: Is this the right item? Is the product real? Is the site reliable?

Cart abandonment rates increase with interface friction, and a broken image icon is friction. The investment to fix cart thumbnails is small relative to the conversion impact.

Dimensions

Match the placeholder to your cart thumbnail size

Most cart line items render product thumbnails between 60x60 and 100x100 pixels. Some platforms use a 4:3 ratio for product images that also appear in the cart. Check what your cart template uses before picking a placeholder URL.

Mismatched placeholder dimensions cause the same layout instability as a missing image. Use the exact width and height values your cart renders.

<!-- 80x80 square cart thumbnail fallback -->
<img
  src="https://fallback.pics/api/v1/square/80?text=Item"
  width="80"
  height="80"
  alt="Product image unavailable"
/>

<!-- 100x75 rectangular cart thumbnail fallback -->
<img
  src="https://fallback.pics/api/v1/100x75/E4E4E7/71717A?text=No+Photo"
  width="100"
  height="75"
  alt="Product image unavailable"
/>

Implementation

Add onerror fallback to cart line item images

The simplest implementation is an onerror handler on each cart line item img. When the product image URL fails — 404, CORS error, CDN timeout — the handler swaps in the fallback URL.

Guard against infinite loops: the fallback URL must not itself fail. A fallback.pics URL will always return a valid response, making it safe to assign without an additional error check.

<!-- HTML cart template -->
<img
  src="{{ line_item.image_url }}"
  width="80"
  height="80"
  alt="{{ line_item.name }}"
  onerror="this.onerror=null;this.src='https://fallback.pics/api/v1/square/80?text=Item';"
/>

<!-- React cart component -->
function CartLineItem({ item }: { item: LineItem }) {
  const fallback = 'https://fallback.pics/api/v1/square/80?text=Item';
  return (
    <img
      src={item.imageUrl ?? fallback}
      width={80}
      height={80}
      alt={item.name}
      onError={(e) => { e.currentTarget.src = fallback; }}
    />
  );
}

Branded fallback

Use your brand color in the cart fallback

A cart fallback in your primary brand color reinforces trust rather than signaling an error. For a purple-themed store, a purple square with a short label looks like a deliberate design choice rather than a broken state.

Using consistent brand-colored fallbacks also makes visual testing more predictable. QA screenshots show the same brand color in every missing-image slot rather than a browser-default broken-image icon that varies by platform.

<!-- Brand-purple cart fallback -->
https://fallback.pics/api/v1/square/80/7C3AED/FFFFFF?text=Item

<!-- Dark neutral for a minimal dark-theme store -->
https://fallback.pics/api/v1/square/80/18181B/71717A?text=N/A

Shopify and WooCommerce

Cart fallbacks in common ecommerce platforms

Shopify Liquid templates expose line item images through {{ line_item.image | img_url: '80x80' }}. Wrap the img tag with an onerror attribute pointing to the fallback URL. The same pattern works for WooCommerce PHP templates and any other server-rendered cart.

For headless storefronts using the Storefront API or WooCommerce REST API, apply the fallback at the component level in your React or Vue cart component rather than in the template.

{# Shopify Liquid #}
<img
  src="{{ line_item.image | img_url: '80x80' }}"
  width="80"
  height="80"
  alt="{{ line_item.title | escape }}"
  onerror="this.onerror=null;this.src='https://fallback.pics/api/v1/square/80/7C3AED/FFFFFF?text=Item';"
/>

<!-- WooCommerce PHP (woocommerce/cart/cart.php) -->
<img
  src="<?php echo esc_url($thumbnail_url); ?>"
  width="80"
  height="80"
  alt="<?php echo esc_attr($product_title); ?>"
  onerror="this.onerror=null;this.src='https://fallback.pics/api/v1/square/80/7C3AED/FFFFFF?text=Item';"
/>

Further reading

Full checkout flow image fallback strategy

Cart thumbnails are one part of a checkout flow that includes order confirmation pages, email receipts, and return/refund interfaces. Each surface can break independently. See the checkout product image fallback guide for the next step.

# https://fallback.pics/docs/
# https://fallback.pics/placeholder-image-api/
# https://fallback.pics/blog/checkout-product-image-fallback/
# https://fallback.pics/blog/product-image-placeholder-ecommerce-catalogs/