Media card
The Media card of the Flex grid section shows one image or video, with a link, across the columns and rows you set on desktop and mobile.
Applies to: Kingdom 6.2.0 and later. Added in: Kingdom 6.0.0. Last checked: 2026-10-13 against Kingdom 6.2.0.
The Media card is the image or video card of the Flex grid section. It shows one image or video across the columns and rows you set, on desktop and on mobile, and the whole card can link to a page. It holds no blocks and no text.
Where to find it: select a Flex grid section in the theme editor, then select a Media card in it, or select Add block → Media card to add one.
Where you can use it
Only inside the Flex grid section, next to Text cards. The Flex grid, Media collage and Text cards collage presets start with Media cards. The section sets the row height, the gap between cards and the border.
Image, video and link
- Image fills the whole card and is cropped to the card's shape, around the focal point you set on it in Shopify.
- Video file plays a video you uploaded to Shopify instead of the image, muted and in a loop. When a video is set, the card shows only the video; a video that cannot play leaves the card empty, even though the editor note says the image shows.
- Link makes the whole card clickable. Open link in a new window opens the link in a new browser tab.
A Media card with neither an image nor a video shows a placeholder drawing.
Setting up the card size
Set the desktop size
Under Grid design, set Desktop columns (2 to 12, default 2) and Desktop rows (1 to 4, default 1). The card spans that many of the grid's 12 columns and rows on screens wider than 768 px.
Set the mobile size
Set Mobile columns (1 or 2 of the 2 mobile columns) and Mobile rows (1 or 2). Or turn on Hide on mobile to leave the card out on screens 768 px wide or less; the mobile size settings then disappear.
Check the shape
The height of one row comes from the section's Desktop card height (minimum) and Mobile card height (minimum). Change them on the section if every card should be taller or lower.
Why is there an empty Colors header in the Media card?
Because the Media card's settings end with a Colors header that has no settings under it in Kingdom 6.2.0. It does nothing. To color a card, use a Text card, which has Overlay and Text colors.
Can I add text on a Media card?
No. The Media card holds no blocks. Use a Text card with an Image or a Video file: it shows the same media behind a heading, a text and buttons.
All Media card settings
Every setting in this group, with its type and default.
Image (image): Fills the whole card and is cropped to its shape, around the image's focal point.
Video file (video): Plays a video uploaded to Shopify instead of the image, muted and in a loop. The editor note says the image shows if the video cannot be played, but in Kingdom 6.2.0 the card then stays empty.
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 grid's 12 columns the card spans on screens wider than 768 px.
Desktop rows (slider 1 to 4, default: 1): Sets how many grid rows the card spans on screens wider than 768 px. The row height is the section's Desktop card height (minimum)
Hide on mobile (checkbox, default: off): Hides the card on screens 768 px wide or less.
Mobile columns (dropdown, default: 1 column): Sets whether the card spans one or both of the 2 mobile columns. 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 screens 768 px wide or less. Options: 1 row, 2 rows. Shown only when Hide on mobile is off.
Related pages
- Flex grid section: the grid that holds Media cards and Text cards.
- Text card: theme blocks over an optional image or video.
- Flex card: the card of the Flex cards section.