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)
InesBourgeois
Excursionist
36 1 12

Yes ! The store is lesizmoor.com and password shopifylesizmoor2021

The code has been changed a bit from the brooklyn theme

Ninthony
Shopify Partner
2247 339 900

I don't see double images or anything. This published theme doesnt appear to be using the code I provided.

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 :D
InesBourgeois
Excursionist
36 1 12

Sorry, forgot to mention it's on the product page: https://lesizmoor.com/products/garment-02?variant=40562091655351

And it only appears double for mobile

User3423523r35
New Member
1 0 1

Ninthony,

 

Your solutions seems to have worked perfectly for us. Thank you for all your help. We have been searching months for a solution.

 

I have a question for you. How can we get this code to appear under a separate page on our website (pages.section)?

 

Edit: For some reason this was posted under the wrong thread - Here is the thread and code I am referring too: https://community.shopify.com/c/shopify-design/different-images-for-mobile-than-desktop-web/td-p/522...

RachelHSS
Tourist
5 0 2

Hi @Ninthony , just wondering if this section ever got finished/posted? I've read through all 18 pages of this thread and didn't see it but want to make sure  I'm not missing something. This solution would be great for me as I don't think I have the knowledge to follow the original solution you posted, especially as I am using a different theme than any of the ones you've previously referenced. Thanks in advance!

Ninthony
Shopify Partner
2247 339 900

I posted a suboptimal solution on page 6. It's merely a section with 2 image pickers and you can link from them, it's a starting point for whoever is trying to develop their own sections or a simple way to display a desktop and mobile image that's not optimized for different screen resolutions:

https://community.shopify.com/c/shopify-design/different-images-for-mobile-than-desktop-web/m-p/8144...

 

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 :D
RachelHSS
Tourist
5 0 2

Saw that, thanks. I thought after that you had said you were working on a full section code we could use instead. Thanks though.

Ninthony
Shopify Partner
2247 339 900

Honestly I have no idea, it was quite some time ago and I may have worked on something for a bit and got distracted with life stuff. If I do get time I will expand on it and make it a stand alone topic/tutorial as I would likely make it a functioning slideshow as well.

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 :D
HALLOPUPPY
New Member
1 0 1

Hey !

I did what you said and it went perfect, the only problem is that I want to display differnt pictures for desktop and phone in the SLIDESHOW.

is there any code with schema that I can put in ? tried the one that you posted and it didnt work in that section...

thank you for your help! (:

Giftsy
Tourist
3 0 2

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