Solved

Different images for mobile than desktop web

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

 

Accepted Solution (1)
Ninthony
Shopify Partner
2332 350 1031

This is an accepted solution.

It's completely understandable you're lost. At first the way that shopify does things doesnt make a whole lot of sense. Your template pages are they key parts of your site. So when you want to edit the homepage, you want to edit index.liquid. Now, if you have not developed the theme yourself, probably all you're going to even see inside of index.liquid is "{{ content_for_index }}" <--- That's a liquid object. Basically that renders everything that you've specified inside of your Customize section, your visual editor.

 

Take the section you posted, "banner.liquid" -- That's probably one of your sections you can edit when you open your visual editor. All of that:

{{ section.settings.link }}

 stuff is referring to all the options in your customize editor.  All that stuff underneath it inbetween the {% schema %} tags are where you define what kinds of things you want to have in your section. I have not worked with sections much, but I'm fairly certain I can walk you through so you can make this change. Duplicate your theme just to be sure you have a copy in case anything goes wrong.

 

First go into your {% schema %} tags and look for this portion:

 

{
"type": "image_picker",
"id": "image",
"label": "Banner Image"
},

Copy that and paste it below it and change the ID to "mobile_image":

 

{
"type": "image_picker",
"id": "image",
"label": "Banner Image"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Banner Image"
},

Be sure to keep the comma after the closing curly bracket. 

 

Then you're going to want to go into the html and duplicate the image portion kind of the same way and we're going to set it up so image 2 displays. You're also going to give your <img> tags  a class name of "hidden_desktop" and "hidden_mobile" -- I separated the duplicate part with a comment:

 

<style>
.hidden_desktop{
  display:block;
}
.hidden_mobile {
  display: none;
}
@media (min-width:992px){
  .hidden_desktop{
    display:none;
  }
  .hidden_mobile {
    display: block;
  }
}
</style>
<div class="velaBanner" style="{% if section.settings.margin_block !=blank %}margin:{{section.settings.margin_block}}; {% endif %}
{% if section.settings.padding_block !=blank %}padding:{{section.settings.padding_block}}; {% endif %}">
<div class="container{% if section.settings.full_with %}-full{% endif %}">
<div class="{{ section.settings.effect }}">
{% if section.settings.link != blank %}<a href="{{ section.settings.link }}" title="{{ block.settings.image.alt | default: shop.name }}">{% endif %}
{% if section.settings.image != blank %}
<img class="img-responsive hidden_mobile" alt="{{ section.settings.image.alt | default: shop.name }}" src="{{ section.settings.image | img_url: '2000x' }}" />
{% else %}
<img class="img-responsive hidden_mobile" alt="{{ shop.name }}" src="//placehold.it/{{ section.settings.image_size }}" />
{% endif %}
{% comment %}Above will be the desktop image and below will be the mobile image{% endcomment %}
{% if section.settings.mobile_image != blank %}
<img class="img-responsive hidden_desktop" alt="{{ section.settings.image.alt | default: shop.name }}" src="{{ section.settings.mobile_image | img_url: '992x' }}" />
{% else %}
<img class="img-responsive hidden_desktop" alt="{{ shop.name }}" src="//placehold.it/{{ section.settings.image_size }}" />
{% endif %}
{% if section.settings.link != blank %}</a>{% endif %}
</div>
</div>
</div>

Now you should be able to go into your customize section and find the portion for mobile image and upload an image there. I think this will work, like I said I have not worked in sections a whole lot but the logic seems there for me. I didn't change the other sections like image_size and whatnot, but this shouldn't matter unless you don't have an image uploaded there. Like I said, be sure to duplicate your theme and give this a shot.  Let me know how it turns out.

 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄

View solution in original post

Replies 203 (203)
Sherryko
Tourist
5 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!

GillesB
Tourist
4 0 1

Hello @Ninthony 
Thanks a lot for your help on this quite common issue for newbees !
I've copy/paste your code in my cart page and it's working almost well. 
It's fine on desktop, but on on mobile, the 2 images are displayed.

Here is the code I put in my CustomHTML field of www.pepites.co/cart

<style>
.mobile-image{
display: block;
}
desktop-image{
display: none;
}
@media (min-width:992px){
.mobile-image{
display: none;
}
desktop-image{
display: block;
}
}
</style>
<div class="image-container">
<div class="mobile-image">
<img src="https://cdn.shopify.com/s/files/1/0514/4258/1682/files/Icones-panier-mobile.jpg?v=1654039866">
</div>
<div class="desktop-image">
<img src="https://cdn.shopify.com/s/files/1/0514/4258/1682/files/Icones-panier-desktop.jpg?v=1654040550">
</div>
</div>

Do you have any idea of what I've missed ?

Many thanks in advance for your help, 

Gilles 



MDNGT-FNTSY
Excursionist
26 0 5

Hi @Ninthony ,

I am also trying to do this, but the instructions below do not work, as it will not allow me to save the slideshow.liquid. Can you please help me do this for my website? 

my website is: midnight-fantasy.co.uk and password is: seucau

Kind regards

websensepro
Shopify Partner
1045 144 149

I think it's easier to implement Different Banner Image for Mobile and Desktop with CSS, checkout the video tutorial which I created:

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here