how do i upload collection images for desktop and then separate sized images for mobile

[animatehair]

how do i upload collection images for desktop and then separate sized images for mobile
my web page is
www.animatehairandbeauty.com

wanting the appearance to be stream lined for user friendliness so being able to upload 2 different sizings would be ideal - thankyou

[ankitpateldev]

Hello @animatehair ,

To add a separate image for mobile size, you can create a collection metafield as a file type and assign the desired image to it. Then, call the metafield value in the collection file where the desktop image is being called. Right after the desktop image, you can create a new image tag and add the metafield value in the src attribute.

Once it's done, you can set the display property to none for the desktop image in mobile size, and vice versa for the mobile image in desktop size.

That's how you can achieve separate sized images for mobile and desktop.

Let me know if you need further help.