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

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

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

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?

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.

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

  1. Go to Online Store->Theme->Edit code
  2. Under section add this file using same name File
  1. Edit theme.liquid under layout add this code
      {% section 'mobile-slideshow' %}

under this one line no. 101

{% section 'slideshow' %}
  1. Get back to customization option there you will find new option to upload Mobile banner

Thanks

Thank you that’s fantastic!

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

Hello,

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

It has this at the bottom of the screen.
Screen Shot 2019-12-14 at 17.57.02.png

This is the edited code:

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.

Was the code I put in correct?

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

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?

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

How do I copy and paste that file in there?

Thank you I have done it!!!

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.

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