Can I Upload Different Images for Mobile Site Shopify?

Want to boost your Shopify sales quickly? TikTok Ads is one of the most effective ways to reach a global audience and drive instant traffic to your store. If you’re looking to make the most out of your TikTok marketing strategy, check out our step-by-step TikTok Ads tutorial! From setting up your account to launching your first ad campaign, we’ve got you covered. Get ready to see your sales soar with the power of TikTok Ads!

👉 TikTok Ads Tutorial 2025 for Beginners ⮕

Yes, you can upload different images for your mobile site in Shopify, but it requires some customization. Shopify themes are responsive by default, meaning they automatically adapt to different screen sizes. However, if you want to display specific images on mobile devices that differ from those shown on desktop, there are several approaches you can take:

1. Use Shopify Theme Settings

Many Shopify themes allow you to upload different images for mobile in the theme editor:

  • Go to Online Store > Themes in your Shopify admin.
  • Click Customize next to your current theme.
  • Check if your theme has separate options for mobile images under sections like “Slideshow” or “Banner.”

2. Use Custom Code (CSS and Liquid)

If your theme doesn’t support this natively, you can customize the theme using Liquid and CSS:

  • Add the images in the HTML/Liquid code of your theme.
  • Use media queries in CSS to display different images based on screen size.

Example CSS:

css
/* Hide desktop image on mobile */
.desktop-image {
display: none;
}/* Show mobile image only on smaller screens */
@media (max-width: 768px) {
.desktop-image {
display: none;
}
.mobile-image {
display: block;
}
}

In your Liquid code:

liquid
<div class="desktop-image">
<img src="{{ 'desktop-image.jpg' | asset_url }}" alt="Desktop Image">
</div>
<div class="mobile-image" style="display: none;">
<img src="{{ 'mobile-image.jpg' | asset_url }}" alt="Mobile Image">
</div>

3. Use an App

There are Shopify apps available that provide more flexibility in managing your storefront, including displaying different content or images for mobile vs. desktop. Examples include:

  • PageFly: A drag-and-drop page builder with responsive controls.
  • Shogun Page Builder: Offers advanced customization options for mobile layouts.

4. Create Separate Sections for Mobile

Some themes allow creating duplicate sections and hiding/showing them based on device type:

  • Create one section for desktop with the desktop image.
  • Create another section for mobile with the mobile image.
  • Use the “Visibility Settings” in the theme editor to hide/show based on the device.

Summary

You can achieve this by either:

  1. Utilizing your theme’s built-in settings.
  2. Customizing the theme using Liquid and CSS.
  3. Using a third-party app for advanced customization.

If you’re unfamiliar with coding, it’s best to consult a Shopify Expert or use an app for seamless implementation.

 

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *