How can I set separate banner images for mobile and desktop?

[maxchudleigh]

I am wanting to have separate banner images for desktop and mobile as we have an optimised banner image for mobile. I have asked Shopify support and they told me to ask on this community. 

Does anyone know how I can do this?

Thanks

[Developer-G]

Yes you can do this, you have edit file code and add new area for mobile banner.
And after that write css to hide desktop banner in mobile view and  in desktop view hide mobile banner.
And if you want it dynamic you can add option in settings so you can upload image your own without editing code.
Thanks

[maxchudleigh]

Thanks so much for the reply! I have been trying to find a solution to the issue for ages! 

How do I edit the file code and add new area for mobile banner?

[Developer-G]

File code depends on which theme you are using, Please share store url and name of theme you are using.
If you are using free theme I'll definitely help you in this.

[maxchudleigh]

I am using Brooklyn which is a free theme. 

Can I send you a message directly for URL etc? 

I would love your help, thank you so much

[Developer-G]

1. Go to Online Store->Theme->Edit code
2. Under section add this file using same name File 
3) Edit theme.liquid under layout add this code 

      {% section 'mobile-slideshow' %}

under this one line no. 101

{% section 'slideshow' %}

4) Get back to customization option there you will find new option to upload Mobile banner

Thanks

[maxchudleigh]

Thank you that’s fantastic!

I will have a go and then get back to you.

[maxchudleigh]

Hello, 

I just added that line of code, however when I go onto customisation, I cannot see somewhere to upload a mobile banner? 

[Developer-G]

It means you missed something, code and instructions are 100% accurate If you are not aware about liquid, I suggest please hire someone to implement this.

[maxchudleigh]

Was the code I put in correct?

[Developer-G]

Yes, please confirm where you add this file code 
 ( 2. Under section add this file using same name File  )

[maxchudleigh]

I did not do step 2. 

I do not understand what to do? Please can you explain more. Sorry to be a pain. 

The 'file' text you sent has a link attached to it, do I need to do something with this?

[Developer-G]

Check this screen-shot https://prnt.sc/qaukou
If still if you have any issue, please drop email
Thanks

[maxchudleigh]

How do I copy and paste that file in there?

[maxchudleigh]

Thank you I have done it!!! 

[maxchudleigh]

It has this at the bottom of the screen. 

---

[maxchudleigh]

 This is the edited code: 

[MuzammilMalik]

Check the Shopify Banner Slider App, you can easily customize banner dimensions, apply it on full width. You can change slider animation, slider interval, and add unlimited images for display. You can select from 8 multiple exciting slider effects to make your store more attractive and eye-catching.

[kelseyscrystals]

Is there anyone that can help me do with the Expression theme?