Solved

Separate banner images on mobile and desktop - Dawn Theme

Novaque
Tourist
9 0 4

Hi,

I am currently using the Dawn 2.0 theme which allows you to have two images on the homepage banner.

What I am trying to do is have one image to show on mobile and the other to show on desktop.

I want the image on the right side (the vertical one) to be shown on mobile and the image on the left (the landscape one) to be shown on desktop. Both images look similar as I have made one for mobile and one for desktop.

Any help would be much appreciated.

The link to my store is fayafij.myshopify.com

Password is: freelo

 

Thanks,

Aaron

@KetanKumar 

Accepted Solutions (2)

LitCommerce
Astronaut
2860 684 732

This is an accepted solution.

Hi @Novaque ,

Please follow these steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > section-image-banner.css and paste this at the bottom of the file:

.banner__media:first-child {
    width: 100%;
}
.banner__media+.banner__media {
    display: none;
}
@media screen and (max-width: 749px) {
	.banner__media:first-child {
		display: none;
	}
	.banner__media+.banner__media {
		width: 100%;
		display: block !important;
	}
}


Hope it helps!

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

LitCommerce
Astronaut
2860 684 732

This is an accepted solution.

Hi @Novaque ,

Please add code:

@media screen and (max-width: 749px) {
	.banner__content::before{
		padding-bottom: 150% !important;
	}
}

it will work fine.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 73 (73)

KetanKumar
Shopify Partner
36839 3635 11972

@Novaque 

yes please try this 

https://www.mojoin.com/show-shopify-banner-image/

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

LitCommerce
Astronaut
2860 684 732

This is an accepted solution.

Hi @Novaque ,

Please follow these steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > section-image-banner.css and paste this at the bottom of the file:

.banner__media:first-child {
    width: 100%;
}
.banner__media+.banner__media {
    display: none;
}
@media screen and (max-width: 749px) {
	.banner__media:first-child {
		display: none;
	}
	.banner__media+.banner__media {
		width: 100%;
		display: block !important;
	}
}


Hope it helps!

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
Novaque
Tourist
9 0 4

Hi @LitCommerce 

Thank you for the help, I really appreciate it.

The code works great apart from when it switches to the mobile banner, the image is cut off and the dimensions of the desktop image still apply.

Is there a way so when it switches to the mobile image, the banner is the same dimensions as the image?

Hopefully this makes sense. I've attached an image to show you what I mean.

Thanks,

Aaron

Screenshot 2021-10-26 at 12.03.12 am.png

LitCommerce
Astronaut
2860 684 732

This is an accepted solution.

Hi @Novaque ,

Please add code:

@media screen and (max-width: 749px) {
	.banner__content::before{
		padding-bottom: 150% !important;
	}
}

it will work fine.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
Novaque
Tourist
9 0 4

Hi @LitCommerce 

That's great, all works! Thank you for your help.

Alinear7
Excursionist
31 0 9

Hi, 

 

I tried the solution you posted, but my image is still cut off.
The text " world full of sunshine" is supposed to be on the image along with the button. 

Screenshot 2021-12-07 at 5.05.08 PM.png

KetanKumar
Shopify Partner
36839 3635 11972

@Alinear7 

you have try this?

https://www.mojoin.com/show-shopify-banner-image/

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
myKidsLounge
Excursionist
26 1 5

Hi @KetanKumar 

 

I have tried this in the DEBUT theme and it worked perfectly fine. 

 

However, this does not apply to the DAWN theme. Is there a solution for DAWN theme? 

Horaciocb
Excursionist
32 0 7

Hi @KetanKumar  i´m trying to implement this solution to dawn theme, but "theme.css" doesn´t exist in this theme. Where should i add the code then? Thank you very very much for your precious time.

 

Logius
Explorer
48 0 14

@LitCommerce 

 

I have the same issue. Thank you for your useful tips. I have tried your method and I was able to add the option to select mobile and desktop images separately successfully. However, the images and cut off on both devices and it is important for us that the selected image fits in the screen as we prefer to add promotional content directly in the image design. Do you have any resolutions for that?Desktop BannerDesktop BannerMobile BannerMobile Banner

KetanKumar
Shopify Partner
36839 3635 11972

@Logius 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Casper0301
New Member
10 0 0

Hello, the banner on desktop seems to have awful quality after implementing this code. Is there a fix to this?

Edwinnn
Tourist
4 0 1

Great work! Well done!
Now i'm trying to find the solution for not displaying the banner at all:
If I add image on the left only, then banner would show up for the desktop mode only.
If I add image on the right only , then the banner would show up for the mobile mode only.

If I add both images, then it would show up on both screens...
To get this solved would be fantastic...

LitCommerce
Astronaut
2860 684 732

Hi @Edwinnn,

You can create a new Question and send me the link. I will check it.

Because when you post a new question, it will help more people find it faster when you have the same question.

Thank you.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
Logius
Explorer
48 0 14

@LitCommerce @Edwinnn Hello! I have the same issue but any solution to the blurry banner image yet? 

LitCommerce
Astronaut
2860 684 732

Hi @Logius,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
daanoptroot
Tourist
3 0 1

Hey, I tried your code. It works fine, however when I upload second image the first image becomes blurry (bad quality) all of a sudden. Any idea how I can fix this? @LitCommerce 

FairBump
Tourist
8 0 2

Hey, I tried this and it doesn't work, the mobile image is still cropped to the desktop banner dimensions. Any help would be much appreciated. 

Joshua2612
Tourist
13 0 1

I tried the code but there is no changes ya. can help me

marcianasl
Visitor
1 0 0

Olá. Preciso de ajuda. Inseri estes códigos, no entanto, no desktop, duplicou a imagem do banner e no desktop, apareceu uma barra cinzenta embaixo da imagem. Porderia me ajudar, por favor? Muito obrigada desde já 

Tinylighter
Tourist
4 0 1

Hey man, I tried your code. It works, however when i upload image #2, image #1 becomes blurry all of a sudden. Any idea how that's possible? @LitCommerce 

 

LitCommerce
Astronaut
2860 684 732

Hi @Tinylighter,

Please send your site and if your site is password protected, please send me the password.

And you can create a new Question and send me the link. I will check it.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
Tinylighter
Tourist
4 0 1

@LitCommerce 

 

Thetinylighter.com

shiesk

Tinylighter
Tourist
4 0 1

I also followed this one since it seemed an easy fix for the problem  but to no succes. I

Show Different Shopify Banner Image on Desktop and Mobile

added the css to the base.css

LitCommerce
Astronaut
2860 684 732

Hi @Tinylighter,

You can create a new Question and send me the link. I will check it.

Because when you post a new question, it will help more people find it faster when you have the same question.

Thank you.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
Afairy
Tourist
5 0 4

@Tinylighter wrote:

Hey man, I tried your code. It works, however when i upload image #2, image #1 becomes blurry all of a sudden. Any idea how that's possible? @LitCommerce 

 


You need in image-banner.liquid  over line 45 for this:

 

{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}

 

to change the 50vw to 100vw.

Joshua2612
Tourist
13 0 1

Works thanks!

King-Kang
Trailblazer
148 8 76

Worked pretty well @LitCommerce 

I noticed that, the email signup banner section, and every section with banner, that doesn't have two banners option, does not show the banner on mobile.

Looks like this code is affecting every mobile banner of every section...

 

@media screen and (max-width: 749px) {
  .banner__media:first-child {
    display: none;
  }
}​

 


Which code should we add to fix this?

Thank you in advance

LitCommerce
Astronaut
2860 684 732

Hi @King-Kang,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
Haseebo
Excursionist
18 0 6

Thank you so much. I took mobile version picture into landscape image and then photo a lot of empty space and the mobile version came exactly as it should me . thank you for helping

KetanKumar
Shopify Partner
36839 3635 11972

@Haseebo 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Haseebo
Excursionist
18 0 6

Hello sir thank you for response. your strategy work absolutely.

my website is alignfoot.com

password siltai

can also please guide me how to remove powered by Shopify. I have try many thing I also try to go to Edit Language and remove it from the powered thing but still it show me this. your help will be really appreciated.

 

KetanKumar
Shopify Partner
36839 3635 11972

@Haseebo 

can you try this way to Desktop and Mobile Image

also, add this code to remove power by

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

.copyright__content a[rel="nofollow"] {
    display: none;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Haseebo
Excursionist
18 0 6

yes thank you so much. it work absolutely perfect. your help means a lot sir

KetanKumar
Shopify Partner
36839 3635 11972

@Haseebo 

its my pleasure to help us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Haseebo
Excursionist
18 0 6

means a lot to have you brother

 

Haseebo
Excursionist
18 0 6

hello Sir. today I realize that my mobile banner in dawn theme is making some issues. The mobile banner is creating extra space which is making the website very unprofessional and annoying to use. any help will be really appreciatedIMG_1054.jpeg

Erynjl
Tourist
6 0 2

Is there a way to change the image banner height of the mobile and desktop banner individually?

 

Thanks

Haseebo
Excursionist
18 0 6

Hello there i was facing the same problem and no coding solution was found. I did added another banner to my homepage and delete the first one and the the dimension came perfect. You can try 

KetanKumar
Shopify Partner
36839 3635 11972

@Haseebo 

can you please send store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Haseebo
Excursionist
18 0 6

Hello Ketan! my website is alignfoot.com I have fixed the problem. but I am having a little problem with Facebook ad do you recommend me something. you help will be really appreciated thank you sir

 

 

KetanKumar
Shopify Partner
36839 3635 11972

@Haseebo 

yes, please show me 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Haseebo
Excursionist
18 0 6

Hello ketan sir. Actually i will start running ads from now on and as i get some result in a day or 2 will send you a picture. Thank you for your support

bencoco
Visitor
2 0 2

Hi

 

I added the code you shared to my section-image-banner.css of my Dawn theme to separate the banner images on mobile and desktop and it works great !

However I now ran into a problem when I set up a slideshow, the images show on the desktop version, but don't appear on the mobile one. I imagine that as you can't set up two images per slide, it simply don't work. 

 

Don't you know a fix for this?

 

Many thanks !

SNEATED
Tourist
3 0 0

same problem, you fix it?

Nat7
Shopify Partner
39 0 4

Hello, i was wondering if you can help. So i added this code and the other smaller one as well, and all works perfect for image banner section, but my slider section went missing from the mobile version, but looks fine on desktop. Any idea what could be wrong? 
thank you so much for your help! 
the url. For the shop is 

gooddess-by-fit-faces.myshopify.com

Password : beauty

KetanKumar
Shopify Partner
36839 3635 11972

@Nat7 

oh can you please share your issue screenshot so i will give proper guideline or code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Nat7
Shopify Partner
39 0 4

BF74F243-709E-4300-A532-7E65DCB59E27.jpeg

  So here under the text, should be the slider, but instead its just an empty space.

thank you