[Product page] Add 2 column layout for desktop and mobile

[andrewetchen]

PR Summary

This PR adds a 2 column media layout option for desktop and mobile on the product page (PDP).

Why are these changes introduced?

• Figma
• Fixes [Product page] Add 2 column media gallery option to the desktop layout #1691
• Fixes [Product page] Add 2 columns media gallery option to mobile layout #1692
• Fixes [Bug] Desktop media position #1903

What approach did you take?

We shouldn't crop merchant images so its expected for the 2 column mobile layout media to look somewhat short (padding-top) in comparison to "Show thumbnails".

Just like the featured collection section, the mobile slider will advance one image at a time.

I used 1.5rem for the following CSS for product__media-item because I think it provides much better spacing compared to 3rem: before / after

Other considerations

This PR also includes a small fix for #1903 here: fe46651

Screenshots

Desktop - Left media (click to view)

Desktop - Right media (click to view)

Tablet - Left media (click to view)

Tablet - Right media (click to view)

Mobile (click to view)

Testing steps/scenarios

• Test different Desktop layout and Mobile layout setting combinations on desktop and mobile
• Test different Desktop media position settings on desktop and mobile
• Test products with no featured image
• Test non-image products
• Quick add: with Desktop layout > 2 columns enabled make sure the "Choose options" modal only displays one image

Demo links

• Editor

Checklist

• Added PR summary for release notes
• Notified the help.shopify.com team about updates to theme settings.
• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[eugenekasimov]

I wonder if it looks okay when a product has only one image and media position set left? May be if there is one image it should fill the whole space?

[YoannJailin]

@eugenekasimov I quite agree with you!

[andrewetchen]

Good catch, @eugenekasimov - should be fixed now: edebc42

[YoannJailin]

Hello! I noticed that in the case of the Quick Add modal, the image seems too small. Is there a way to make sure it takes the same width as before, no matter what layout is selected?

[andrewetchen]

Thanks, @YoannJailin - fix added here: fd2202e

[ludoboludo]

I think it's looking good 👍
I have one comment but otherwise I didn't run into any issue while testing 👌

[ludoboludo]

In main-product.liquid we're doing this (not from this PR):

assign lazy_load = false
if media_position > 1
  assign lazy_load = true
endif

I think it could be useful to change the logic to be based on the number of columns instead of the 1 used.
This way we can tell the two/three first images to not lazy load. 🤔

Could be a follow up though 👍

Ill approve and let you decide whether you want to address those 2 comments before merging or as a follow up.

[kmeleta]

Looks good to me Andrew. I don't mind the quick add sizes fix as much as I thought I might 👍 I'm ok with handling the remaining feedback in related follow ups

[Oliviammarcello]

Looks good to me, but can we rearrange the mobile layout list to have show and hide thumbnails together?

[andrewetchen]

Looks good to me, but can we rearrange the mobile layout list to have show and hide thumbnails together?

I synced with @Oliviammarcello and the labels will be reordered this way: