Different images for desktop and mobile view

Luvita
Excursionist
55 0 9

Hi There

We are trying to set up desktop and mobile banners using the slideshow, but we ran into some issues with the code from this guide: https://community.shopify.com/c/Shopify-Design/Different-images-for-mobile-than-desktop-web/td-p/522...

We would be grateful if someone could please kindly help us with setting this up.

We're using the Debut theme.

Thank you.

Luvita

0 Likes
Luvita
Excursionist
55 0 9

Bump

0 Likes
Mircea_Piturca
Shopify Partner
1489 42 317

I am not sure about your setup and this may not work for you.

The <picture> element can be used to show different images (sources) at different screen resolutions.

<picture>
  <source srcset="image-large.jpg" media="(min-width: 800px)">
  <img src="image-small.jpg" alt="" />
</picture>

 

In this example image-small is shown up to the assigned media breakpoint: "min-width: 800px". After that image-large.jpg will kick in.

Hope it helps

Finally—Add variant descriptions to your products
0 Likes
Luvita
Excursionist
55 0 9

Thanks for this. We have multiple pictures which are displayed on the slideshow, so not quite sure how this piece of code would work for multiple images for desktop and mobile.

 

0 Likes
Luvita
Excursionist
55 0 9

We'd be super grateful if someone could please help us with this.

Thank you!

0 Likes
Luvita
Excursionist
55 0 9

Bump

We'd be truly grateful if someone could please help us with this.

Thanks!

0 Likes
CANDISOFT
Shopify Partner
1103 146 480

@Luvita  add me as a staff in your store using below email id, i will add the options to upload images for desktop and mobile for you.

If helpful, Please Like and accept The Solution.
0 Likes
Luvita
Excursionist
55 0 9

Thanks Candisoft, I've message you.

Best

Luke

0 Likes