Product media

Overview

A versatile product media block that renders product images or videos with extensive customization options. Features include hover effects with secondary media, aspect ratio control, flexible padding and spacing, comprehensive color schemes, and responsive visibility settings. The block automatically detects and handles both image and video media types from the product's media collection.

Common use cases

• Display product images on product pages and product cards

• Show product videos with autoplay and loop functionality

• Enable hover effects to show secondary product images

• Control aspect ratios for consistent product image display

• Use object-fit settings to control how images fill their containers

• Configure appropriate padding based on the block's container context

Block settings

Content

Setting	Description	Options
Product	Select the product to display media for	Product picker
Show second image on hover	Displays the second product image when hovering over the first	Checkbox (default: true)

Spacing

Setting	Description	Options
Enable horizontal padding	Adds horizontal padding around the media	Checkbox (default: false)
Enable top padding	Adds top padding around the media	Checkbox (default: false)
Enable bottom padding	Adds bottom padding around the media	Checkbox (default: false)

Color

Setting	Description	Options
Color scheme	Controls the background color scheme	• Body • Neutral • Accent 1 (default) • Accent 2 • Accent 3 • Shade 1 • Shade 2 • Shade 3 • Primary • Secondary • Tertiary • Blur
Color border	Controls the border color	• Body • Subtle (default) • Strong • Primary • Secondary • Tertiary • None Visible when border position is not blank

Style

Setting	Description	Options
Border position	Controls where borders appear	• None (default) • Top • Bottom • Left • Right • Top and bottom • Left and right • All
Enable aspect ratio	Forces the media to maintain a specific aspect ratio	Checkbox (default: false)
Show entire image	Uses object-contain instead of object-cover to show full image	Checkbox (default: true) Visible when enable aspect ratio is true
Aspect ratio	The aspect ratio to maintain	• Square • Landscape • Portrait • None Visible when enable aspect ratio is true

Display

Setting	Description	Options
Visibility	Controls when the block is visible	• All (default) • Mobile only • Desktop only