Two different product pictures for phone and computer

YounesTimitar
Excursionist
45 0 6

Hello,

Is it possible to have 2 different product photos, one for phone and one for computer?

Replies 3 (3)
DP_Development
Pathfinder
83 11 17

Yes, its a little bit tricky, but possible. There are several ways to achieve this.

I suppose that the picture for mobile view is one of the product pictures, but maybe not the first one. Lets say the mobile pic is ALWAYS the second product image. You could iterate through the product pictures in your product template and use the second pic as the current product picture, if you are in your mobile view, and if not, then the regular featured image. 

You could also add an alt tag to the picture, which has to be shown as the product image in the mobile view (i.e. "mobile_product_pic"). Then you could iterate through the product picture alt tags, and use the image with the specific alt tag as a product image. 

Would that solve your issue?

Software Engineer and Frontend Developer
Fast, cheap and straightforward solutions! Shall I do this for you? Just send me a message!
Please click on like and "accepted solution" if my answer helped you.
YounesTimitar
Excursionist
45 0 6

I don't want the mobile product photo to be shown on the computer and the computer product photo to be shown on mobile. It's basically the same picture for mobile and computer but when I have a big picture it's perfect for mobile but way too big for computer. So that's why I want different pictures for mobile and computer, to have one big photo for mobile and on smaller photo fore computer. So is it possible to have a different photos for mobile and computer without showing the other on the other device?

DP_Development
Pathfinder
83 11 17

Yes, of course its possible.

You can find all you need here: https://community.shopify.com/c/shopify-design/different-images-for-mobile-than-desktop-web/td-p/522...

Software Engineer and Frontend Developer
Fast, cheap and straightforward solutions! Shall I do this for you? Just send me a message!
Please click on like and "accepted solution" if my answer helped you.