Fashion Apparel Catalog Placeholders (Square Product Tiles)

Dimensions

Square tiles are standard in fashion product grids

Most fashion ecommerce platforms — Shopify, Magento, VTEX, BigCommerce — default to square product images: 800x800, 600x600, or 400x400. The aspect ratio is baked into the CSS grid, so a placeholder in a different ratio pushes the layout out of alignment.

The /square/ route on fallback.pics takes a single size parameter and returns a 1:1 image. Use it instead of a width × height URL for any fashion catalog fallback.

<!-- 400x400 square fashion tile -->
<img
  src="https://fallback.pics/api/v1/square/400"
  width="400"
  height="400"
  alt="Loading product image"
/>

<!-- 80x80 square for swatches and thumbnails -->
<img
  src="https://fallback.pics/api/v1/square/80"
  width="80"
  height="80"
  alt="Loading swatch"
/>

Color variants

Color swatch fallbacks for multi-variant products

A product with 12 color variants may have photos for 8 and missing images for 4. Rather than showing a broken icon for the missing variants, render a swatch placeholder tinted to the variant's hex color. This keeps the color selector visually informative even when photos are absent.

Encode the variant color name as the text parameter and use the variant's hex as the background color. Users see a colored tile with a label instead of an error state.

function SwatchFallback({ colorHex, colorName }: { colorHex: string; colorName: string }) {
  const bg = colorHex.replace('#', '');
  // Use white text on dark colors, dark text on light colors
  const fg = isDark(colorHex) ? 'FFFFFF' : '18181B';
  const label = encodeURIComponent(colorName.slice(0, 10));
  const src = `https://fallback.pics/api/v1/square/80/${bg}/${fg}?text=${label}`;
  return <img src={src} width={80} height={80} alt={colorName} />;
}

Ghost mannequin

Placeholder while ghost mannequin processing completes

Ghost mannequin (invisible mannequin) processing takes the product from 24 to 72 hours after a shoot. During that window, a placeholder is better than an empty cell. Use an animated skeleton to communicate active processing, or a static tile with "Processing" as the text label.

Switch to the static tile if the processing window exceeds 72 hours — persistent animation implies active loading, which is misleading for images that are taking longer than expected.

const PROCESSING_PLACEHOLDER =
  'https://fallback.pics/api/v1/square/400/E4E4E7/71717A?text=Processing';

const MISSING_PLACEHOLDER =
  'https://fallback.pics/api/v1/square/400/7C3AED/FFFFFF?text=No+Photo';

const src =
  product.imageStatus === 'processing'
    ? PROCESSING_PLACEHOLDER
    : (product.imageUrl ?? MISSING_PLACEHOLDER);

Lookbook

Lookbook and editorial grid fallbacks

Fashion editorial pages use non-square images: tall portrait shots for lookbooks (2:3 ratio, e.g. 600x900), wide banner crops for seasonal promotions (16:9, e.g. 1200x675). These surfaces need different fallback URLs than the product grid.

Build the fallback URL into your image component as a function of the intended render dimensions. A single utility function that accepts width and height returns the correct fallback for every surface.

function catalogFallback(w: number, h: number, label = 'No Photo'): string {
  const text = encodeURIComponent(label);
  if (w === h) return `https://fallback.pics/api/v1/square/${w}/7C3AED/FFFFFF?text=${text}`;
  return `https://fallback.pics/api/v1/${w}x${h}/7C3AED/FFFFFF?text=${text}`;
}

// Product tile: 400x400
catalogFallback(400, 400);

// Lookbook portrait: 600x900
catalogFallback(600, 900, 'Coming Soon');

// Seasonal banner: 1200x400
catalogFallback(1200, 400, 'New Collection');

Performance

Cache square placeholders across a large catalog

A fashion catalog with 5000 SKUs and 400x400 images will use the same square/400 fallback URL for every missing photo. Browsers cache that one URL and serve it from memory for all subsequent tiles. One network round-trip covers the entire batch of missing images.

For large catalogs with programmatically-generated fallback URLs (variant color tiles, for example), ensure your cache headers permit long-lived caching. Set Cache-Control: public, max-age=31536000 on all fallback.pics responses.

# All missing-image tiles in a 5000-SKU catalog share one cached URL
https://fallback.pics/api/v1/square/400/7C3AED/FFFFFF?text=No+Photo

# Variant-specific tiles are also cached per unique URL
https://fallback.pics/api/v1/square/80/C4162A/FFFFFF?text=Red
https://fallback.pics/api/v1/square/80/1D4ED8/FFFFFF?text=Blue

Further reading

Ecommerce placeholder strategy for catalog and checkout

Fashion catalogs are a good starting point for a broader ecommerce fallback strategy because the square grid makes the dimension requirements obvious. The same component pattern scales to food, real estate, and any other image-heavy vertical.

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