Media
The media block displays either an image or a Shopify-hosted video. For images, it supports a separate mobile source so you can art-direct across breakpoints, along with a full srcset for responsive loading. For video, it offers autoplay and loop toggles. Display settings like aspect ratio, object fit, and loading strategy apply to both media types.
Settings
Section titled “Settings”| Setting | What it does |
|---|---|
| Media type | Choose between image and video. The editor only shows relevant fields for the selected type. |
| Image | The desktop/default image. |
| Mobile image | Optional alternate image for screens below 768px. |
| Video | A Shopify-hosted video file (shown only when media type is video). |
| Autoplay | Whether the video plays automatically on load. Defaults to on. |
| Loop | Whether the video loops continuously. Defaults to on. |
| Aspect ratio | Forces a specific aspect ratio (1:1, 4:3, 3:4, 16:9, 3:2) or keeps the image’s natural ratio. |
| Fit | Object-fit behavior – cover (crop to fill) or contain (show the full image). |
| Loading | Lazy or eager loading. Use eager only for above-the-fold media. |
Used in
Section titled “Used in”- When a section renders this block statically, it can pass
imageandimage_mobileparams to override the block settings – this is how metaobject-driven sections inject media without the editor touching the block. - The mobile image source only applies below 768px. If you leave it empty, the desktop image is used at all sizes.
- Videos are always muted and set to playsinline for autoplay to work on mobile browsers.