Product media layouts
The Media block of the Product section sets how the product's images, videos and 3D models are laid out. Choose the layout with Product media style. On phones every layout becomes a swipe slider (with thumbnails if they are on), so this choice is about desktop and tablets.
How to set it up
Step 1: Choose a layout
- In the theme editor, open a product and click the Media block of the Product section.
- Open Product media style (1) and choose a layout. The preview updates at once. The layouts are described in the table below.
Step 2: Set the image shape and fit
- Media ratio sets the shape of every media frame: Square, Landscape (4:3), Landscape (16:9), Portrait (3:4), Portrait (4:5), Portrait (9:16), or Adapt to media, which keeps each image's own shape, uncropped.
- With a fixed ratio, Image fit decides what happens when an image has another shape: Fill the frame crops it to fill the frame; Show whole image shows all of it inside the frame, with space around it. Use Show whole image for products shot on white that must not be cropped.
Step 3: Fill the screen (desktop)
- Turn on Fit media to the screen. On desktop the main media is as tall as the screen below the header, so it is seen whole without scrolling.
- With Slideshow, Carousel, 2 column and Collage of three, the media also stays in view while the product details scroll beside it, and grows into the space the header leaves when the page scrolls.
- The setting has no effect with One image and on phones.
Step 4: Set the thumbnails and gap
- Turn Show thumbnails on or off, and choose their size and placement (inside or outside the media) where the layout has them. Turn on Sticky thumbnails to keep them in view while the page scrolls.
- Set the Media gap between images and the Media corner radius.
Step 5: Set the mobile gallery
- Under the mobile settings, turn on Enable horizontal scroll to swipe through media, choose Full width or 75% (a peek of the next image), and hide the thumbnails or show a scroll progress bar.
The layouts
Product media style
| Slideshow | One large media at a time with thumbnails (left or bottom) to switch. |
|---|---|
| 1 Full / 2 Split | A stack down the page: one full-width media, then two side by side, repeating. |
| 2 column | Media in two columns down the page. |
| One image | Only the first media (the selected variant's, with variant media groups). Others open in the lightbox. |
| Large image over image tiles | A large main media with large tiles of the other media below it. Clicking a tile shows it above. With more than six tiles they become two rows that scroll sideways. |
| Collage of three | One large media beside two smaller ones. The third shows how many more there are, for example "+4"; clicking it opens them all in the lightbox. |
| Large image beside a column | The first media large on the left, staying in view, beside a column of the other media that scrolls past it. |
| Carousel | A row of media to swipe or drag, with a peek of the next one. |
| Two-column grid | The first media across both columns, then the rest in pairs. |
Settings reference
Media block
| Product media style | Options: Slideshow, 1 Full / 2 Split, 2 column, One image, Large image over image tiles, Collage of three, Large image beside a column, Carousel, Two-column grid. |
|---|---|
| Fit media to the screen | Desktop. The main media fills the screen below the header, or the quick view window. On the product page, Slide, Carousel, 2 column and Collage of three also stay in view while the details scroll and grow into the room freed when the page scrolls. |
| Playback | Options: Manual, Autoplay, When in view. |
| Show thumbnails | Turns this on or off. |
| Show only selected variant media | Shows shared media plus the media group for the selected variant. Variant image order requires each group to begin with an image assigned to a variant. |
| Group variant media by | Color alt text uses the color option names configured in Theme settings > Variants & swatches > Color mapping. Only text before | is read, as in Navy | Front view. Media without a recognized color value, or with #all, remains shared. Options: Variant image order, Color value in alt text. |
| Thumbnail size | Options: Small, Medium, Large, Extra large. |
| Thumbnail placement | Options: Inside media, Outside media. |
| Sticky thumbnails | Turns this on or off. |
| Thumbnail position | Options: Left, Bottom. |
| Media ratio | Sets the shape of the media frame. Adapt keeps each image's original shape. Options: Adapt to media, Square, Portrait (4:5), Landscape (4:3), Landscape (5:4), Landscape (16:9), Portrait (3:4), Portrait (9:16). |
| Image fit | Options: Fill the frame, Show whole image. |
| Corner radius | Slider. |
| Media gap | Slider. |
| Lightbox | |
| Enable cursor zoom | Zooms the lightbox image toward the cursor on devices with a mouse. |
| Zoom scale | Slider. |
| Enable horizontal scroll | Turns this on or off. |
| Full-width media | Turns this on or off. |
| Mobile media width | 75% shows part of the next media so shoppers can see there is more to swipe. Options: Full width, 75%. |
| Hide thumbnails | Turns this on or off. |
| Show scroll progress | Turns this on or off. |
| Spacing | |
| Top spacing (desktop) | Slider. |
| Bottom spacing (desktop) | Slider. |
| Top spacing (mobile) | Slider. |
| Bottom spacing (mobile) | Slider. |
How it works
- Every layout works with Show only selected variant media (see Variant media groups), the lightbox, videos and 3D models.
- The Featured product section and Quick add have the same Media block, with every layout, Fit media to the screen, Sticky thumbnails and the lightbox. In quick view, Fit media to the screen fits the main media in the popup.
- With Carousel and Adapt to media, every frame takes the first image's shape so the row stays even.