How to Use Different Banners for Desktop and Mobile in Shopify

In today’s mobile-first world, optimizing your Shopify store for both desktop and mobile views is crucial. One common challenge store owners face is displaying different banner images for desktop and mobile devices. This article will guide you through the process of achieving this in the Shopify Dawn theme, ensuring your store looks great on all devices.

Understanding the Challenge

The Importance of Device-Specific Banners

Having separate banner images for desktop and mobile is essential for several reasons:

1. Screen size differences
2. User experience optimization
3. Performance considerations

Default Behavior in Dawn Theme

By default, the Dawn theme doesn’t provide a straightforward way to display different images for desktop and mobile. This can lead to compromised visuals on one or both device types.

The Goal: Seamless Banner Switching

Our objective is to implement a solution that automatically switches between desktop and mobile banner images based on the user’s device.

The Solution: Custom CSS for Banner Switching

Implementing the Code

To achieve our goal, we need to add some custom CSS to the Dawn theme. Here’s the step-by-step process:

1. Go to your Shopify admin panel
2. Navigate to Online Store > Themes
3. Click on “Actions” for your active theme and select “Edit code”
4. Locate the file Assets > section-image-banner.css
5. Add the following code at the bottom of the file:

.banner__media:first-child {
  width: 100%;
}

.banner__media+.banner__media {
  display: none;
}

@media screen and (max-width: 749px) {
  .banner__media:first-child {
    display: none;
  }
  .banner__media+.banner__media {
    width: 100%;
    display: block !important;
  }
}

Understanding the Code

This CSS code does the following:

• Sets the first banner image (desktop) to 100% width
• Hides the second banner image by default
• On screens smaller than 749px (mobile devices):
  • Hides the first (desktop) image
  • Displays the second (mobile) image at full width

Additional Mobile Optimization

To ensure proper sizing on mobile devices, add this additional CSS:

@media screen and (max-width: 749px) {
  .banner__content::before {
    padding-bottom: 150% !important;
  }
}

This code adjusts the aspect ratio of the banner on mobile devices, preventing image cropping.

Setting Up Your Banner Images

Preparing Your Images

To make the most of this solution:

1. Create two versions of your banner image:

   • A landscape version for desktop
   • A portrait or square version for mobile

2. Optimize both images for web use to ensure fast loading times

Uploading and Configuring Images

In your theme customizer:

1. Add your desktop image to the left slot of the banner section
2. Add your mobile image to the right slot
3. Adjust text and button positioning as needed for both versions

Troubleshooting Common Issues

Blurry Desktop Images

Some users reported blurry desktop images after implementation. To fix this:

1. Ensure your desktop image is high quality and properly sized
2. Check that the image isn’t being stretched or compressed by the theme

Slideshow Compatibility

The provided solution may affect slideshow functionality. If you’re using slideshows:

1. Consider creating a separate CSS rule for slideshows
2. Test thoroughly on both desktop and mobile devices

Image Cropping on Mobile

If your mobile image appears cropped:

1. Adjust the aspect ratio in the additional CSS provided earlier
2. Experiment with different image dimensions to find the best fit

Advanced Customization

Adjusting Breakpoints

The current solution uses 749px as the breakpoint. You can adjust this to suit your needs:

@media screen and (max-width: YOUR_DESIRED_BREAKPOINT) {
  /* existing mobile CSS rules */
}

Creating Multiple Breakpoints

For more granular control, consider adding multiple breakpoints:

@media screen and (max-width: 749px) {
  /* mobile styles */
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  /* tablet styles */
}

@media screen and (min-width: 990px) {
  /* desktop styles */
}

Best Practices for Banner Images

Optimizing for Performance

1. Compress your images without sacrificing quality
2. Use modern image formats like WebP where supported
3. Implement lazy loading for images below the fold

Design Considerations

1. Maintain brand consistency across desktop and mobile versions
2. Ensure text is readable on both versions
3. Test your banners on various devices and screen sizes

By following this guide, you’ll be able to display different banner images for desktop and mobile views in your Shopify store using the Dawn theme. This enhancement will significantly improve your store’s visual appeal and user experience across all devices.