Not all screens are created equal. What looks great on a 27” monitor might appear squished, blurry, or awkward on a phone. And in a world where mobile commerce accounts for nearly 45% of ecommerce sales in the U.S., that’s a major risk.
If you’re running a Shopify store, optimizing your images for both desktop and mobile users is essential—not just for design consistency, but also for performance, user experience, and ultimately, conversions.
Resize, optimize, and arrange product images effortlessly with Shogun’s drag-and-drop page builder.
Start Resizing Images NowIf you’re comfortable working with Shopify’s code editor, you can manually control which images show on different devices using media queries and responsive HTML. This approach gives you direct control over how visuals appear—without needing extra tools or apps.
This method is especially helpful if you’re:
Let’s walk through how to implement this.
If you’re not sure where the image is coming from, use the search bar to look for keywords like img, image, or the image file name.
3. Modify the Code to Include the <picture> Element
Within the chosen file, replace the existing <img> tag with the following <picture> element:
<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="Description of image">
</picture>
This code ensures that mobile devices (with a viewport width of 767px or less) load your-mobile-image.jpg, while devices with a viewport width of 768px or more load your-desktop-image.jpg.
What this does:
This method ensures that users only download the image best suited for their device—improving load times and visual experience.
To use the above code, make sure your image files are uploaded to Shopify:
Tip: Store the mobile and desktop versions of each image in a clearly labeled way (e.g., productname-desktop.jpg, productname-mobile.jpg) so you can manage and update visuals easily.
Below we have the hero images for both desktop and mobile, each responsive to screen size.
For tighter control, especially with image sizing or positioning, consider adding some custom CSS:
.responsive-image {
width: 100%;
height: auto;
display: block;
}Then wrap your image block in a div with that class:
<div class="responsive-image">
<picture>
<source media="(max-width: 767px)" srcset="{{ 'hero-mobile.jpg' | asset_url }}">
<source media="(min-width: 768px)" srcset="{{ 'hero-desktop.jpg' | asset_url }}">
<img src="{{ 'hero-desktop.jpg' | asset_url }}" alt="Hero image">
</picture>
</div>Resize, optimize, and arrange product images effortlessly with Shogun’s drag-and-drop page builder.
Start Resizing Images NowFor example, a luxury furniture store might want to display a full-width living room shot on desktop but a vertically cropped version focused on the product itself for mobile users. This technique allows them to deliver tailored visual storytelling without compromising performance.
While modifying code gives you deep control, it also requires technical knowledge—and even one small error can disrupt your layout. Shogun Page Builder offers a visual, no-code alternative that’s just as powerful. In fact, it’s the fastest and safest way to show different images for mobile and desktop users in Shopify.
With Shogun, you can easily:
Let’s walk through how it works:
From your Shopify dashboard:
In the Visual Editor:
Tip: You can also duplicate the first image and simply replace the file to keep the layout identical.
Now it’s time to hide each image from the wrong device:
Repeat the same for the mobile image, but this time uncheck Desktop. Visitors will only see the image optimized for their device.
Most ecommerce merchants don’t have time to tinker with code, and Shogun is built for speed, flexibility, and scale.
You can show:
This allows you to tailor your visuals to how shoppers actually experience your store—on small, touch-based screens or large, detail-friendly monitors.
Let’s say you run a DTC skincare brand selling a best-selling vitamin C serum. You’ve invested in professional photography—a gorgeous lifestyle image showing the serum bottle next to fresh citrus slices, a soft towel, and natural sunlight pouring into a modern bathroom.
On desktop, this image looks stunning as a wide hero banner. It fills the screen, sets the mood, and immediately tells a visual story of quality, wellness, and self-care. But when that same image loads on a mobile screen, it shrinks dramatically.
Key elements—like the product itself—might get cropped out or look too small to register. The text overlay becomes unreadable, and your hero section loses its impact in under three seconds.
This is a classic case of good design losing effectiveness simply because of screen constraints.
With Shogun, you can easily fix this:
You’re not just resizing the image—you’re rethinking the experience for each device type. That means:
Tip: Add a short testimonial or value prop (like “#1 serum for glowing skin”) as a mobile-only text element next to the image using Shogun’s visibility settings.
This approach is ideal for beauty, fashion, and wellness brands where high-quality visuals sell the story—and where mobile is often the primary traffic source.
For years, ecommerce teams treated mobile responsiveness as a checklist item: “Does the site shrink down on phones? Great—we’re good.”
But today, mobile-first isn’t a trend. It’s the default. According to Insider Intelligence, mobile commerce sales in the U.S. exceeded $500 billion in 2023, and that number is still climbing. This means most of your customers are seeing your brand—and your product images—on a screen that’s 5 to 6 inches wide.
Serving the right image isn’t just about looking good—it’s about converting.
If an image is too slow to load, it hurts your Core Web Vitals score. If it’s too zoomed out, it fails to grab attention. If it’s cropped poorly, it confuses the customer or hides your product. That’s friction—and friction kills sales.
With Shogun, you can eliminate that friction. You’re not relying on browser logic or hoping a theme handles it well. You’re in full control of what your mobile shoppers see, when they see it, and how it appears.
And the beauty is—you don’t have to create separate mobile pages or duplicate your store. Just drag, drop, and toggle visibility settings.This makes Shogun not only a design solution but also a conversion strategy—helping you capture mobile sales that would otherwise slip away.
Resize, optimize, and arrange product images effortlessly with Shogun’s drag-and-drop page builder.
Start Resizing Images Now
