Ever checked your Shopify store on your phone and thought, “Why does this image look so off?” What looks clean and bold on a laptop might appear cramped, unreadable, or just plain wrong on a smaller screen.
This guide shows you how to display different images for mobile and desktop on Shopify using two practical methods—without third-party apps—and a few tips to keep your store lightning fast.
Two methods to show different images for Mobile and Desktop on Shopify
Method 1: Use Shopify’s Code Editor with the <picture> Element
If you’re comfortable editing your theme files, Shopify gives you full control using standard HTML and Liquid to deliver the right image based on screen size.
Step-by-step: In your Shopify admin, go to Online Store > Themes. Click Actions > Edit code next to your active theme.
Open the section or template that holds the image (e.g. sections/hero.liquid, product.liquid, etc.). Replace the existing image with:
<picture>
<source media="(max-width: 767px)" srcset="{{ 'your-mobile-image.jpg' | asset_url }}">
<source media="(min-width: 768px)" srcset="{{ 'your-desktop-image.jpg' | asset_url }}">
<img src="{{ 'your-desktop-image.jpg' | asset_url }}" alt="Describe your image">
</picture>What this does:
Loads the mobile version for screens 767px and under, the desktop version for screens 768px and up, and falls back to the desktop image if <picture> isn’t supported.
Make sure your images are uploaded to Shopify under Settings > Files, or added to the Assets folder if working in the theme editor.
Method 2: Add device-specific images Using the “Custom Liquid” Block
If your theme supports Shopify 2.0, there’s a safer, no-risk way to implement responsive images without editing theme files.
Here’s how: Go to Online Store > Themes > Customize. On the page you want to update, click Add section or Add block, then choose Custom Liquid.
Paste the same code snippet above into the editor.
Save and preview the result on both desktop and mobile views.
This is a cleaner, safer way to apply responsive image logic, especially if you’re not confident working inside theme code files.
How Shopify’s CDN helps you serve images faster
Every image you upload to Shopify is delivered through Shopify’s Content Delivery Network (CDN). This means your images are stored and served from multiple global locations, customers automatically receive the image from the nearest server, and Shopify optimises image delivery for fast performance, even on mobile networks.
So when you use {{ 'image.jpg' | asset_url }} or upload through Settings > Files, you’re already benefiting from Shopify’s image speed infrastructure. This makes using device-specific images even more effective, since you’re only loading what the shopper actually needs.
Bonus Tip: compress images before uploading
Device-specific images are only helpful if they load quickly. Try tools like TinyPNG, ShortPixel, or Squoosh.
For format and size: mobile hero images should be around 750px wide, desktop hero images 1600–2000px wide, and compression should be 70–85% quality.
Stick with JPEG for photos, PNG for transparency, and WebP only if you’re not worried about older platform support.
Final thought: one image doesn’t fit all screens
Mobile-first design means more than just shrinking a site. It means rethinking the experience. By showing different images based on screen size, you help customers see your product clearly, avoid frustration, and buy with confidence.
