Media card
The Media card of the Flex grid section in Split shows one image or video that spans the columns and rows you set, with an optional link.
Applies to: Split 5.1.0 and later. Added in: Split 5.0.0. Last checked: 2026-10-13 against Split 5.1.0.
The Media card is a card of the Flex grid section that shows one image or video filling the columns and rows you set, with an optional link on the whole card. It holds no blocks; for text over media, use a Text card.
Where to find it: select a Media card inside a Flex grid section, or select Add block under the section and choose Media card.
Media and link
- Image fills the card and is cropped to its shape. Without an image the card shows a placeholder.
- Video file plays a muted video in a loop instead of the image, cropped the same way. Upload the video to Shopify with the video picker.
- Link makes the whole card clickable, for example to a collection. Open link in a new window shows once a link is set.
When Video file is set, the card does not show the Image, also when the video cannot play. The editor note under Video file says the image shows instead, but Split 5.1.0 has no fallback image in Flex grid cards.
Grid design
- Desktop columns (2 to 12, default 2) and Desktop rows (1 to 4, default 1) set how much of the 12-column grid the card covers on screens 768 px and wider.
- Mobile columns sets 1 column (half the screen width) or 2 columns (the full width) on phones.
- Mobile rows sets 1 or 2 rows on phones.
- Hide on mobile hides the card on phones and on tablets held upright. The mobile settings are hidden while it is on.
The height of one row comes from the section's Desktop card height (minimum) and Mobile card height (minimum). See Flex grid section.
Which image size works best for a Media card?
An image with the same shape as the card crops least.
- At the default row height, a card 2 columns wide and 1 row tall is square.
- A card 4 columns wide and 2 rows tall is square too, and twice as large.
- Split serves images up to 2820 px wide: upload images at least as wide as the card on a large screen.
See Image size recommendations.
All Media settings
Every setting in this group, with its type and default.
Image (image): Fills the card with an image, cropped to the card shape. Without one, the card shows a placeholder.
Video file (video): Fills the card with a muted, looping video instead of the image. With a video set, the image is not shown, also when the video cannot play.
Link (link): Makes the whole card a link.
Open link in a new window (checkbox, default: off). Shown only when Link is set.
Media card: Grid design
Where to find it: Flex grid → Media card → Grid design
Desktop columns (slider 2 to 12, default: 2): Sets how many of the 12 grid columns the card spans on screens 768 px and wider.
Desktop rows (slider 1 to 4, default: 1): Sets how many grid rows the card spans on screens 768 px and wider. The row height is the section's Desktop card height (minimum)
Hide on mobile (checkbox, default: off): Hides the card on phones and on tablets held upright.
Mobile columns (dropdown, default: 1 column): Sets whether the card takes half the screen width (1 column) or the full width (2 columns) on phones. Options: 1 column, 2 columns. Shown only when Hide on mobile is off.
Mobile rows (dropdown, default: 1 row): Sets how many grid rows the card spans on phones. The row height is the section's Mobile card height (minimum) Options: 1 row, 2 rows. Shown only when Hide on mobile is off.
Related pages
- Flex grid section: the presets, the row height and how cards fill the grid.
- Text card: a Flex grid card with theme blocks over optional media.
- Image size recommendations: image sizes for Split.
Flex card
The Card block of the Flex cards section in Split holds media and theme blocks and sets how many of the 12 grid columns it takes on desktop.
Text card
The Text card of the Flex grid section in Split holds theme blocks over an optional image or video and spans the grid columns and rows you set.