Custom Banner Image for Mobile

Highlighted
New Member
14 0 0

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

0 Likes
Highlighted
Shopify Partner
1083 221 285

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

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Highlighted
New Member
14 0 0

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?

0 Likes
Shopify Partner
1083 221 285

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.

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Highlighted
New Member
14 0 0

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

0 Likes
Highlighted
Shopify Partner
1083 221 285

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

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Highlighted
New Member
14 0 0
Thank you that’s fantastic!

I will have a go and then get back to you.
0 Likes
Highlighted
New Member
14 0 0

Hello, 

 

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

0 Likes
Highlighted
New Member
14 0 0

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


0 Likes
Highlighted
New Member
14 0 0

 This is the edited code: 

Screen Shot 2019-12-14 at 17.57.58.png

0 Likes