Ever stared at those gray boxes wondering what to do while you're waiting for actual product photos? Let me show you how to handle placeholder images like a pro, from Shopify's built-in options to creating your own custom fallbacks.
Think of placeholder images as your store's stand-ins. They show up when you haven't uploaded the real product photos yet—kind of like those "coming soon" signs at construction sites. Shopify actually gives you a bunch of built-in SVG placeholders that are surprisingly handy. They're tiny (basically no file size), they scale to any size without getting pixelated, and they're ridiculously easy to drop into your theme.
Here's the thing though—placeholders are great for testing and development, but you absolutely need real product photos before you launch. I'm talking a massive difference here: real photos can boost your conversion rate by 30-85% compared to generic placeholders. Why? Because people want to see what they're actually buying. Makes sense, right?
So Shopify gives you a bunch of different placeholder styles right out of the box. They're all SVG files, which is perfect because they scale beautifully to any size without looking pixelated. And since they're inline SVG code, they load instantly—no waiting around for an image server to respond.
product-1 through product-6You get six different looks here—apparel, accessories, that sort of thing. Each one has a unique little illustration so your product pages don't all look identical during development.
collection-1 through collection-6These show multiple products grouped together—you know, like what you'd see on a category page. Super useful when you're laying out collection grids.
lifestyle-1 and lifestyle-2Only two options here, but they're for those lifestyle shots where you want to show products in action or in a nice scene. Think hero sections or brand storytelling areas.
imageThis is your basic, all-purpose placeholder with a simple mountain icon. It's the catch-all when you just need something generic for any image spot.
Built-in placeholder variations
File size (inline SVG)
Scalable at any resolution
Okay, so how do you actually use these placeholders? There's this Liquid filter called placeholder_svg_tag that drops Shopify's built-in placeholders right into your theme. It spits out inline SVG code, which means it renders instantly without making any extra network requests. Pretty slick.
{{ 'product-1' | placeholder_svg_tag }}{{ 'product-1' | placeholder_svg_tag: 'product-image' }}<svg class="product-image placeholder-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 525.5 525.5">
<path d="M324.5 212.7H203c-1.6 0-2.8 1.3-2.8 2.8V308c0 1.6 1.3 2.8 2.8 2.8h121.6c1.6 0 2.8-1.3 2.8-2.8v-92.5c0-1.6-1.3-2.8-2.9-2.8zm1.1 95.3c0 .6-.5 1.1-1.1 1.1H203c-.6 0-1.1-.5-1.1-1.1v-92.5c0-.6.5-1.1 1.1-1.1h121.6c.6 0 1.1.5 1.1 1.1V308z"/>
<!-- Additional SVG path data -->
</svg>Let's get into some real-world examples. This is the stuff you'll actually copy and paste into your theme files. I've broken it down by common use cases so you can grab what you need.
This is the bread and butter right here—show the product image if you have it, otherwise fall back to a placeholder. You'll use this pattern everywhere.
{% if product.featured_image %}
<img src="{{ product.featured_image | img_url: '2048x2048' }}"
alt="{{ product.featured_image.alt | escape }}"
loading="lazy">
{% else %}
{{ 'product-1' | placeholder_svg_tag: 'product-placeholder' }}
{% endif %}When you're looping through a collection, you need to handle each product individually. Some have images, some don't—this handles both gracefully.
{% for product in collection.products %}
<div class="product-card">
{% if product.featured_image %}
<a href="{{ product.url }}">
<img src="{{ product.featured_image | img_url: '800x800' }}"
alt="{{ product.featured_image.alt | escape }}"
loading="lazy">
</a>
{% else %}
<div class="product-placeholder-wrapper">
{{ 'product-2' | placeholder_svg_tag: 'product-grid-placeholder' }}
</div>
{% endif %}
<h3>{{ product.title }}</h3>
<p>{{ product.price | money }}</p>
</div>
{% endfor %}Show collection image or a placeholder for the collection header.
<div class="collection-header">
{% if collection.image %}
<img src="{{ collection.image | img_url: '2400x1200', crop: 'center' }}"
alt="{{ collection.title | escape }}"
class="collection-banner">
{% else %}
<div class="collection-placeholder-container">
{{ 'collection-1' | placeholder_svg_tag: 'collection-banner-placeholder' }}
</div>
{% endif %}
<h1 class="collection-title">{{ collection.title }}</h1>
<div class="collection-description">{{ collection.description }}</div>
</div>Create a product image gallery that handles products with 0-5 images gracefully.
<div class="product-gallery">
{% if product.images.size > 0 %}
{% for image in product.images limit: 5 %}
<div class="gallery-item">
<img src="{{ image | img_url: '800x800' }}"
alt="{{ image.alt | escape }}"
loading="{% if forloop.first %}eager{% else %}lazy{% endif %}">
</div>
{% endfor %}
{% else %}
<div class="gallery-item">
{{ 'product-1' | placeholder_svg_tag: 'gallery-placeholder' }}
</div>
{% endif %}
</div>
{% comment %}
Load first image with priority (eager), others lazy load
Show placeholder only if product has no images at all
{% endcomment %}Homepage featured section with lifestyle placeholder for development/testing.
<section class="featured-section">
{% if section.settings.image %}
<img src="{{ section.settings.image | img_url: '2400x1200' }}"
alt="{{ section.settings.image_alt | escape }}"
class="featured-image">
{% else %}
{{ 'lifestyle-1' | placeholder_svg_tag: 'featured-placeholder' }}
{% endif %}
<div class="featured-content">
<h2>{{ section.settings.heading }}</h2>
<p>{{ section.settings.text }}</p>
<a href="{{ section.settings.button_link }}" class="btn">
{{ section.settings.button_text }}
</a>
</div>
</section>Blog article with image or generic placeholder fallback.
<article class="blog-post">
{% if article.image %}
<img src="{{ article.image | img_url: '1200x630', crop: 'center' }}"
alt="{{ article.title | escape }}"
class="blog-featured-image">
{% else %}
<div class="blog-placeholder">
{{ 'image' | placeholder_svg_tag: 'blog-image-placeholder' }}
</div>
{% endif %}
<h1>{{ article.title }}</h1>
<div class="blog-meta">
<span class="author">{{ article.author }}</span>
<span class="date">{{ article.published_at | date: '%B %d, %Y' }}</span>
</div>
<div class="blog-content">
{{ article.content }}
</div>
</article>Want your placeholders to match your brand? Just add some CSS. Here's a starting point you can customize:
.placeholder-svg {
width: 100%;
height: auto;
background-color: #f3f4f6;
padding: 2rem;
border-radius: 8px;
}
.product-placeholder {
max-width: 400px;
opacity: 0.6;
}
.collection-banner-placeholder {
height: 400px;
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}Shopify's built-in placeholders are fine for testing, but what if you want something that actually looks like your brand? Maybe with your logo or colors? Let me show you two ways to set up custom default images that'll look way more professional.
First, drop an image picker into your theme settings or section schema.
{
"type": "image_picker",
"id": "default_product_image",
"label": "Default Product Image"
}Now update your template to check for the product image first, then your custom default, then the generic placeholder as a last resort.
{% if product.featured_image %}
<img src="{{ product.featured_image | img_url: '2048x2048' }}" alt="{{ product.title }}">
{% elsif settings.default_product_image %}
<img src="{{ settings.default_product_image | img_url: '2048x2048' }}" alt="Default product image">
{% else %}
{{ 'product-1' | placeholder_svg_tag }}
{% endif %}Head over to Theme Settings and upload your branded default image. Keep it at 2048x2048px and under 200 KB for best results.
Add your default image to theme assets (e.g., default-product.jpg).
Use the asset URL filter to reference your default image.
{% if product.featured_image %}
<img src="{{ product.featured_image | img_url: '2048x2048' }}" alt="{{ product.title }}">
{% else %}
<img src="{{ 'default-product.jpg' | asset_url }}" alt="Default product image">
{% endif %}So you're creating custom placeholders? Great. Here's what you need to know about sizing so they look good everywhere and match up with your real product photos later.
| Image Type | Dimensions | Aspect Ratio | File Size |
|---|---|---|---|
| Product Images | 2048 x 2048 px | 1:1 (Square) | 80-120 KB |
| Collection Images | 2048 x 1024 px | 2:1 (Wide) | 100-150 KB |
| Lifestyle/Hero | 2400 x 1200 px | 2:1 (Wide) | 120-180 KB |
| Thumbnails | 800 x 800 px | 1:1 (Square) | 40-60 KB |
| Blog Images | 1200 x 630 px | 1.91:1 (OG) | 80-120 KB |
You might be wondering why everyone's so obsessed with square images. Here's the deal:
Bottom line: if you make your placeholders 2048x2048, they'll blend right in when you eventually swap them for real photos. Your layout won't shift or break.
Okay, real talk—placeholders are fine for building and testing your store, but they can absolutely tank your SEO if you're not careful. Let me explain what's at stake here.
Here's the brutal truth: if you launch with placeholders on your live products, you're going to hurt both your search rankings and your sales. Google wants to see real product photos. Your customers want to see real product photos. No way around it.
If you absolutely have to use placeholders for a bit, at least do the ALT text right. This helps with accessibility and gives context to search engines.
<img src="placeholder.jpg" alt="placeholder image">Generic ALT text provides no value to users or SEO.
<img src="placeholder.jpg" alt="{{ product.title }} - Image coming soon">Descriptive ALT text with product name and indication that real image is coming.
{{ 'product-1' | placeholder_svg_tag: 'product-placeholder' }}Shopify's SVG placeholders include ARIA attributes automatically.
Want to know what Google thinks? They've made it pretty clear in their Product Image Guidelines: use real product photos, not generic placeholders or stock images. Here's what they're looking for:
The takeaway? Placeholders are totally fine while you're building and testing. But once you're live and trying to get traffic? You need real photos. Period.
Alright, let's wrap this up with some battle-tested tips. These are the things I've learned from working with placeholders across dozens of stores—both what works and what definitely doesn't.
This is where placeholders really shine. You can build your whole theme layout without waiting for the content team. They help you see how everything will look and make sure your images scale and position correctly.
Don't just use product-1 everywhere. Mix it up with product-2, product-3, etc. Why? Because your real product photos won't all look identical, and you need to make sure your layout can handle that variety.
Always check how placeholders render on mobile devices. SVG placeholders should scale perfectly, but custom images need responsive testing.
Never assume images exist. Always use if/else logic to handle both scenarios gracefully:
{% if product.featured_image %} ... {% else %} ... {% endif %}This is non-negotiable. Keep products with placeholders in draft mode until you have real photos. I've seen too many stores launch with placeholders thinking "we'll fix it later"—it tanks conversions and hurts SEO from day one.
Here's a smart move: set up a system to track which products still need photos. Try this:
If you must show products before photos are ready, create branded custom placeholders with your logo and "Photo Coming Soon" text. This looks more professional than generic SVGs.
If products with placeholders are temporarily published:
Want to know why Shopify's SVG placeholders are so fast? Check this out:
If using custom placeholder images:
Even placeholders should be lazy loaded if below the fold:
<img src="{{ 'placeholder.jpg' | asset_url }}" loading="lazy">Ready to ditch those placeholders for good? Ailee AI generates professional product photos automatically—custom backgrounds, background removal, perfect optimization for Shopify. The whole nine yards, all on autopilot.
Remove backgrounds and create studio-quality product shots automatically
Generate lifestyle images showing products in real environments
Perfect sizing, compression, and WebP conversion automatically
3-day free trial • No credit card required • Professional results in minutes
Complete specifications for product image dimensions and formats
Read GuideMaster compression, WebP conversion, and performance optimization
Read GuideHow AI automation creates professional product photos at scale
Read Guide