Show Different Banner Images On Mobile & Desktop In Shopify?

How To Show Different Banner Images On Mobile & Desktop In Shopify?


Welcome to WebSensePro! In this tutorial, we’ll guide you through the process of Different banners for both the desktop and mobile versions of your Shopify store. We understand that many of you have been eager to enhance your storefront, and we’ve received numerous comments regarding different sections on desktop and mobile. This tutorial addresses a specific and often challenging aspect: displaying distinct banners for each version.

Step 1: Overview of the Problem

Let’s start with an overview of the issue. You want a unique banner for the desktop version and another for the mobile version of your Shopify store. This can significantly improve the user experience and make your store more visually appealing across different devices.

Step 2: Demonstration

In the accompanying video, we provide a step-by-step demonstration. The narrator takes you through their own 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: Publishing and Previewing

The tutorial includes a walk-through of the backend of a Shopify store, demonstrating how to publish and preview theme changes. The narrator updates the desktop banner, adjusts its settings, and then adds a separate banner for the mobile version.

Step 4: Adding 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.

/* Code for Desktop Banner */

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

/* Code for Mobile Banner */
@media screen and (max-width: 480px) {
#Banner-template--16309149270190__abae02e2-150e-4941-9c89-b7fb8f854e46 {
    display: block !important;
  /* Code contrubution by websensepro.com */
}}

#Banner-template--16309149270190__abae02e2-150e-4941-9c89-b7fb8f854e46 {
    display: none;
}

Step 5: Finding 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: Implementing 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: Previewing 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!

4.8/5 - (13 votes)

About

Leave a Comment

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