how to add different images to the same collection?

Tourist
10 0 1

I would like to do a section with an image like the debut theme collection.liquid does. But, i want to display completely different images for mobile and for desktop... so the trick to handle the image resolution won't work. Is there a way to add/handle more than one image for a collection?

0 Likes
Shopify Expert
96 17 12

@marquinhos - The most straight-forward way is to include a second image with a separate class and then hide/show the images based on the viewport.  ex.

<div class="desktop-image">
<img... />
</div>
<div class="mobile-image">
<img... />
</div>

<style>
.desktop-image {
display:block;
}
.mobile-image {
display:none;
}
@media only screen and (max-width: 600px) {
.mobile-image {
display:block;
}
.desktop-image {
display:none;
}
}
</style>

That essentially places 2 images above one another and the CSS handles the visibility based on a screen width of 600px as the breakpoint.  Each theme has different breakpoints in the theme.scss file so you can use what is listed to ensure it aligns with the rest of the site elements.  Hope this helps steer you in the right direction!

0 Likes
Tourist
10 0 1

Thank you for your reply!

 

I mean, where the mobile image and the desktop image will be registered? In the admin dashboard->products->collections->"choose any collection", there is only one field for image, i would like to add one for mobile and other for desktop. 

0 Likes
Shopify Expert
96 17 12

@marquinhos - Would recommend the following approach:

 

1. Generate a URL for the mobile image using the "Files" module in admin

2. Place that URL in the "Alt Text" for the collection image (can be found when clicking an already uploaded collection image)

3. Call the url using {{ collection.image.alt }} and set as the src url for the mobile img.

 

Hope this helps!

0 Likes
Highlighted
Tourist
10 0 1

Thank you for your solution. I will keep it in my mind. But i am afraid that my client doesn't have enough knowledge to follow this steps to add more than one picture to a collection. I find out an app that add custom fields to collection, products, customers... until now i think this is the easiest way to implement that. Unfortunately it's paid. We are from Brasil $1 ,00 = R$4,00, little things can become very expansive here. :/

0 Likes