Hi all,
Can someone please tell me what code to use (and where to put it) so I can use one image for the header on desktop and a different image for the header on mobile. My website is www.bellatte.com
I’ve tried looking at other threads and they are either about a different theme or don’t say exactly where to put this information. Any help is greatly appreciated! Thank you so much
Hello @cmajedicaswell , It can be done through liquid coding. Do you know about liquid and SCSS?
Yes I’m familiar with CSS and HTML. Not familiar with liquid syntax.
@cmajedicaswell , you can use a media query to change the image for desktop and mobile. If you are using the element background-image URL property. otherwise, you can use javascript code for the image changing.
If useful mark please mark as like and accept the solution
Thanks Wahab-Ahmad, I understand that generally, but I need the code for
the media queries and exactly where to place it. Telling me I need to
target different media sizes isn’t helping me, I know that. I don’t know
how to write it or where to put it.
@media screen and (max-width: 768px){
div.hero.hero--large {
background-image: url(https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg) !important;
}
}
Replace URL with image URL for mobile
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: wahabahmadghori@gmail.com
I know this discussion thread is old, but the above solution didn’t work for me unfortunately, so I just wanted to post the solution that did finally work for me (after 3 days of trying every option under the sun) - hopefully this helps someone out.
I am using the Narrative theme but I’m sure this method should work with most themes.
It might seem a bit complicated at first, but it is actually super simple, and so much more simple than basically everything else I tried. You don’t really have to know any code. Backup your code first though, just in case you make a mistake or something unexpected happens.
So this is the solution that worked for me:
Go to Online Store->Theme->Edit code, then Sections->slideshow.liquid
copy the slideshow.liquid code (ctl+a then ctl+c or right click + copy after highlighting everything)
add a new section (under the Sections title), and name it slideshow-desktop
paste the code
inside the code search for “en”: “Slideshow” and change it to “en”: “Slideshow Desktop”. (use ctl+f to open the search field) This occurs twice and you should change both. If you are working with another language then do a similar change but for your language. Save the file.
copy the slideshow.liquid code (yes, again)
add a new section, and name it slideshow-mobile
paste the code
inside the code search for “en”: “Slideshow” and change it to “en”: “Slideshow Mobile”. This occurs twice and you should change both. If you are working with another language then do a similar change but for your language. Save the file.
In your main website customizer space, add these two new sections to your website (under ‘Add Section’). Move them to the top of your website if that’s where you want them.
Right click on the background of each of these new sections that you see, and click Inspect. You will see an alphanumeric code. Either write it down for each of your two new blocks, or you can right click on the inspect area, copy, copy element, and paste that into a word file or somewhere else (just a temporary way to read the code) and copy these two alphanumeric codes to a safe place like at the bottom somewhere. (just a way to get rid of all the extra text and just get those two alphanumeric codes on hand for the next step)
Open the file Assets->theme.scss.liquid and add this code at the very bottom:
@media screen and (max-width: 767px) {
#Slideshow-163872870842042c52 {
display: none;
}
}
@media screen and (min-width: 767px) {
#Slideshow-163872871822bd8a98 {
display: none;
}
}
Replace my alphanumeric codes with your ones (for example 163872870842042c52 and 163872871822bd8a98 for me). The fist code is from your Slideshow Desktop and the second one is from your Slideshow Mobile. Just replace the alphanumeric code but keep the #Slideshow- part of the above code. Once finished, save the file.
I hope this was understandable and easy to follow. I also hope that it isn’t the most complicated solution - if there is a better/easier solution for the Narrative theme then please share it with the community 
Dude can you do this for me? I will pay you lol @LS_Hamburg