Different images for mobile than desktop web

Solved
nooreen
Tourist
7 0 3

Hello,

 

I am wondering what code I need to enter (and where!) to allow for different images on mobile web than desktop web view?

 

I currently am using a custom theme - does this determine where I need to be looking to add the code?

 

Thanks in advance!

Nooreen

 

Replies 188 (188)
PaulNewton
Shopify Partner
3458 230 676

@Giftsy wrote:

Hi @KrazyGear, where did you add this piece of code?


This will vary wildly by theme and sometimes even version of the same theme.

Merchants needing to buy this customization can contact me at paull.newton+shopifyforums@gmail.com with store url and theme name.

Join the discussion - What was learned this Black Friday?


Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org

Problem Solved? ✔Accept and Like solutions to help future merchants

Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
Giftsy
Tourist
3 0 2

Hi Ninthony,

Is there a way to modify this code so that an SVG can be uploaded?

JWFOG
Tourist
4 0 1

Hi @Ninthony ,

So there are so many pages now I cannot find the answer.

How do I show different pictures on mobile vs desktop in the product description on the product page?

Also how do I implement lazy loading?

Thanks a lot for your help!

Jerem1
Tourist
4 0 2

Hello @Ninthony and thanks for your code with link ! I try to add an header (H1) in your code but it's no work...

---

Thanks in advance,

Jeremy

 

MCWeDeveloper
Excursionist
11 0 1

Hello @Ninthony , I know this thread was a long time ago, but if you are still looking into it, I would really apprecciate the help! as you are the hero of the topic haha, I'm using Prestige theme and need the same thing posted here, to display diferent images on Desktop and mobile. The section is "Image with text overlay", is there any chance you are still helping with this?

Thanks in advance, Oscar

Sherryko
Tourist
4 0 2

Hi @Ninthony,

I used one of your solutions and added a section to the Debut theme with the code below. I was wondering if there is anyway to make the images clickable by adding url to them? Your solutions have truly helped me a ton in the past. Thank you so much!

the code:

<style>
.banner-container img{
width: 100%;
}
.hidden-mobile {
display: none;
}
.hidden-desktop {
display: block;
}
@media (min-width: 767px){
.hidden-mobile {
display: block;
}
.hidden-desktop {
display: none;
}
}
</style>
{% if section.settings.desktop_image != blank and section.settings.mobile_image != blank %}
<div class="banner-container">
<img class="hidden-mobile" src="{{ section.settings.desktop_image | img_url: "master" }}">
<img class="hidden-desktop" src="{{ section.settings.mobile_image | img_url: "master" }}">
</div>
{% endif %}

{% schema %}
{
"name": "Desktop Mobile Banner",
"class": "desktop-mobile-banner",
"tag": "section",
"settings": [
{
"type": "header",
"content": "Desktop Settings"
},
{
"type": "image_picker",
"label": "Desktop Image",
"id": "desktop_image"
},
{
"type": "header",
"content": "Mobile Settings"
},
{
"type": "image_picker",
"label": "Mobile Image",
"id": "mobile_image"
}
],
"presets": [
{
"name": "Desktop Mobile Banner",
"category":"Image",
"settings": {
}
}
]

}
{% endschema %}


{% javascript %}
{% endjavascript %}

 

Sherryko
Tourist
4 0 2

@Ninthony

looked through all your comments and figured out the solution!!! Thank you soooo much you are amazing! It doesn't let me copy paste the updated code with url link option for some reason but as of now it is on page 6 of the comments for anyone wondering!

stinem123
Excursionist
6 0 4

Hello, can I please ask where you added this part? 

.template-index main.main-content{
margin-top: -100px;

 

JorgePereiraGap
Tourist
11 0 2

Hello everyone,

I'm new to Shopify and I've "created" my own store. With that said, there is a part that looks bad on mobile, because it's an image with a few key points, which is just far too small for mobile.

 

What I'd like to have is the exact image I have now on desktop, and another one (I still have to make it) to show up on mobile. My website is www.solgap.pt but I'll also add a picture to show what I'm on about (it's the bit with the stars)

It's the long picture with the stars that I'm referring toIt's the long picture with the stars that I'm referring to

 

Thank you in advance.