Product template media layout update

[melissaperreault]

Context

We'll be offering some flexibility to the product page media and layout through settings update to enable merchant to have more optionality for that important template.

New settings details

Large screens layout

• Stacked: Basically the current collage grid built on Dawn
  • Zoom behaviour
    • When you click on the media, it opens the modal where you can zoom with your fingers or keyboard controls
• Thumbnails: A featured media with thumbnails underneath
  • Zoom behaviour
    • When you tap on the thumbnails, the media is previewed in the featured container.
    • You can click on the featured image, when it is an image, to open the modal and preview the list of all media. You can play 3D models and videos inside the modal.
    • The video or 3D models plays inline (Same behaviour as the other layout except you click on the thumbnail to trigger the play)
  • Media badges
    • They will live on the thumbnails instead of the poster image
  • Featured media height
    • We'll need to set some max-height dependant on the media width to ensure the thumbnails are visible on large screens.

Media size

Similar to settings we can find in Debut, we want to offer media width variations for merchants to pick from.

• A set of sizes to change the media width
  • Small
    • Media column width 45%
  • Medium
    • Media column width 55%
  • Large (default)
    • Media column width 65%

Thumbnails on mobile

Thumbnails can become quite tall and push the product information further down. We want to give merchants the flexibility to show or hide thumbnails regardless of their layout choice.

UX Checklist

• Scott reviewed the accessibility annotations
• Open an issue for Docs update