Media card
The Media card is the image or video card of Highlight's Flex grid section, with its own size in the grid and an optional link.
Applies to: Highlight 4.1.0 and later. Added in: Highlight 4.0.0. Last checked: 2026-10-13 against Highlight 4.1.0.
The Media card is the image or video card of the Flex grid section. It fills the grid area you give it, with an optional link on the whole card.
Where to find it: Online Store → Themes → Customize → select a Flex grid section → Media card (or Add block → Media card).
Media and link
- Image fills the card and is cropped from the center to the card's shape.
- Video file plays a video uploaded to Shopify instead of the image, muted and in a loop.
- Link makes the whole card a link, for example to a collection.
- Open link in a new window opens the link in a new browser tab. It shows when Link is set.
Grid design
The Flex grid has 12 columns on desktop and 2 on phones. All rows have the same height, set by the section's Desktop card height (minimum) and Mobile card height (minimum).
- Desktop columns sets the card's width, 2 to 12 columns. Default: 2.
- Desktop rows sets how many rows tall the card is, 1 to 4. Default: 1.
- Hide on mobile hides the card on screens narrower than 836 px.
- Mobile columns makes the card half (1 column) or full width (2 columns) on phones.
- Mobile rows makes the card 1 or 2 rows tall on phones.
Does the image show when the video cannot play?
No. When Video file is set, the Media card shows only the video. If the video may not play, for example on phones in low power mode, use an image instead.
How do I add text over the image?
Use a Text card instead. It has the same image, video and grid settings, plus blocks for a heading, text and buttons over the media.
All Media card settings
Every setting, with its type and default.
Image (image): Sets the image that fills the card, cropped from the center to the card's shape.
Video file (video): Plays a video uploaded to Shopify instead of the image, muted and in a loop. When a video is set, the image is not shown.
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 the card's width on desktop, in columns of the 12-column grid.
Desktop rows (slider 1 to 4, default: 1): Sets how many grid rows tall the card is on desktop.
Hide on mobile (checkbox, default: off): Hides the card on screens narrower than 836 px.
Mobile columns (dropdown, default: 1 column): Sets the card's width on phones, where the grid has 2 columns: half width (1) or full width (2) Options: 1 column, 2 columns. Shown only when Hide on mobile is off.
Mobile rows (dropdown, default: 1 row): Sets how many grid rows tall the card is on phones. Options: 1 row, 2 rows. Shown only when Hide on mobile is off.
Related pages
- Flex grid section: the grid that holds the cards, with the card height and spacing settings.
- Text card: a card with blocks over the media.