DAWN Theme - Home Page - Display different Banner image on mobile and desktop

Store Design
1

Hello,

I would like to display different images on mobile and desktop for the banner image. I have created one for mobile and one for desktop.

Hope someone can help

Thank you

2

@daconn
Hello,
Please Refer this blog

https://www.oscprofessionals.com/shopify-ready-solution/different-banner-image-for-desktop-and-mobile-view/

3

@daconn

Welcome to Shopify Community
Try out this code or like this, this will help you.
You have to build a solution for your theme.

Add Image Picker to the section

Click the above created yx-desktop-banner.liquid file to edit it. Delete all the default codes in the file, replace them with the below lines:


 

   {% for block in section.blocks limit: 1 %}
    
   {% endfor %}

{% schema %}
  {
    "name": "YX Desktop Banner",
    "class": "yx-desktop-banner-section",
    "max_blocks": 1,
    "blocks": [
    {
      "type": "image_picker",
      "name": "Desktop Banner Image",
      "settings": [
        {
          "label": "Desktop Banner Image",
          "id": "yx_image_picker",
          "type": "image_picker"
        }
      ]
    }
  ],
 "presets": [
    {
      "name": "YX Desktop Banner",
      "category": "Home",
"blocks":[{"type" : "image_picker"}]
    }
]
  }
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}

Let me, DM if you have any query, we are happy to help you.

4

Thanks for the reply, I tried out the code but it didn’t work.

In the theme customizer - I added image 1 in the first image section and image 2 in the second image section.

Is that correct?

5

@daconn

if it, didn’t work you can hire a developer or take developer help.
to add it, to make a custom section what you want.

Thank you.

6

No, worries. Thanks for you help

7

@devtalk is sorta right sorta I think what you need to do is fine in the image-banner.liquid find where it says {%- if section.settings.image != blank -%} and find the image inside there notice how in Dawn it shows 750px and 375 those are mobile views so basically you need to change that however I still think you need CSS show and hide

find the

{%- if section.settings.image.width >= 375 -%}{{ section.settings.image | img_url: '375x' }} 375w,{%- endif -%} and the 750 to the example above 

something like  {%- if section.settings.xy_image_picker.width >= 375 -%}{{ section.settings.image | img_url: '375x' }} 375w,{%- endif -%}

 however you still have to set it in the CSS i think but i havent tired it
8

@oscprofessional

Thanks for the reply and the details. So everything has worked so far except: Pasting the code into theme.css, I don’t find that in the DAWN theme.

The sections xy desktop banner and xy mobile banner do show up in the theme editor, but once I upload the images - they do not display.

Anything you recommend I do?

Thanks again

9

@amorlett Thanks for the help, I can’t find : '{ section.settings.image | img_url: ‘375x’ }} 375w, you mentioned in the code. But I do find {%- if section.settings.image.width

What would I need in the CSS?

10

@daconn
Hello,
Can You Please Share Your Store URL..
Its Customization work

11

@oscprofessional

cryptopixl.co

password in your PMs

12

Would you mind sharing what you did to fix the problem? Looks like you fixed it on your website

13

Hey Devtalk - thanks for this. I tried your instructions and something is off. I do get two sections and can pick images. I also have it so it switches between mobile and desktop correctly. However, even though I can select an image for the sections, they do not appear on the page. The section does appear - just a narrow blank section.

Thoughts?