How To Show Different Banner Images for Desktop & Mobile Versions Separately on the Shopify Website

Welcome to Ecomhardy! In this tutorial, we’ll guide you through the process of Different banners for both the desktop and mobile versions of your Shopify store. This tutorial addresses a specific and often aspect: displaying distinct banners for each mobile and desktop version separately.

Step 1: Overview

By displaying a unique banner for the desktop version and another for the mobile version of your Shopify store can significantly improve the user experience and make your store more visually appealing across different devices.

Step 2: What do you expect?

In the video, we provide a step-by-step guide to the Shopify store, showing the desktop version with one banner and the mobile version with a completely different image. The goal is to help you achieve this customization seamlessly.

Step 3: Publish and Preview the front-end

The tutorial includes a walk-through of the backend of a Shopify store, demonstrating how to publish and preview theme changes. You will see how to update the desktop banner, adjust its settings, and then add a separate banner for the mobile version.

Step 4: Here is the required Custom CSS Code

This code ensures that the desktop banner appears only on desktops and the mobile banner only on mobile devices. The tutorial emphasizes updating the section IDs in the code to match your specific banners. Copy Code

/* Code for Desktop Banner */

@media screen and (max-width: 480px){
  #Banner-template--1234567890__image_banner {
    display: none;
    /* Code contrubution by ecomhardy.com */
}}

/* Code for Mobile Banner */
@media screen and (max-width: 480px) {
#Banner-template--1234567890__abcd01e1-120e-1234-1c01-a1bc0f124e12 {
    display: block !important;
  /* Code contrubution by ecomhardy.com */
}}

#Banner-template--1234567890__abcd01e1-120e-1234-1c01-a1bc0f124e12 {
    display: none;
}

Step 5: Find Section IDs

The video illustrates how to find the section IDs for your banners using the browser’s inspect element feature. This step is crucial for tailoring the CSS code to your store’s unique structure.

Step 6: Implement CSS Code

With the section IDs in hand, the tutorial demonstrates how to edit the base.css file by adding the provided CSS code. It’s a straightforward process that even those new to coding can follow.

Step 7: Preview the Changes

After saving the changes, the narrator previews the Shopify store on both desktop and mobile devices. The result is a seamless display of different banners based on the device being used.

Conclusion:

This tutorial provides a comprehensive guide for Shopify store owners seeking to enhance their storefront’s visual appeal. The step-by-step instructions, accompanied by a video demonstration, make it accessible to users with varying levels of technical expertise. Don’t forget to check out our other tutorials and let us know in the comments if you have any questions or suggestions for improvement. Happy customizing!