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.
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 Flex card is the card of the Flex cards section; the theme editor calls it Card. It shows an image or video on top and theme blocks below it, and sets how many of the 12 grid columns it takes on desktop.
Where to find it: select a Card inside a Flex cards section, or select Add block under the section and choose Card.
Media
- Image shows at the top of the card, cropped to the media height set in the section. Without an image the card shows a placeholder.
- Video file plays a muted video in a loop instead of the image. Upload the video to Shopify with the video picker.
- The media height and Don't show media are section settings, shared by every card. See Flex cards section.
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 cards.
Width on desktop and mobile
- Desktop columns (2 to 12, default 2) is the share of the 12-column grid the card takes on screens 768 px and wider. Make the cards of one row add up to 12.
- On screens narrower than 768 px every card takes the full width.
- Hide on mobile hides the card on phones and on tablets held upright, for example a card that repeats another one.
Blocks inside the card
A card accepts every theme block (Heading, Text, Button, Caption, Image, Divider, Empty space, Star rating, Content group, Custom Liquid) and app blocks. Select Add block inside the card to add one; drag them to reorder.
- The blocks sit under the media, aligned by the section's Text alignment.
- The space around and between them comes from the section's Text padding and Text spacing.
- A card without blocks shows only its media.
Every block has its own page under Theme blocks.
Custom colors
- Background color paints the card behind its blocks.
- Text color sets the color of the blocks' text, the solid and outline buttons, and the card's border lines.
- Leave both transparent (the default) to use the body colors from Colors theme settings.
Can I link the whole card?
No. The Card has no link setting. Split does not make a Flex card clickable as a whole. Add a Button block with a Button link, or use a Media card or Text card in the Flex grid section, which have a Link for the whole card.
Why does my card have no text area?
Because the card has no blocks. The text area is printed only when the card has at least one block. Select Add block inside the card and add a Heading or a Text block.
All Flex settings
Every setting in this group, with its type and default.
Accepts these blocks: app blocks and any theme block.
Image (image): Shows an image at the top of the card, cropped to the media height of the Flex cards section. Without one, the card shows a placeholder.
Video file (video): Plays a muted, looping video at the top of the card instead of the image. With a video set, the image is not shown, also when the video cannot play.
Card: Layout
Where to find it: Flex cards → Card → Layout
Desktop columns (slider 2 to 12, default: 2): Sets how many of the 12 grid columns the card takes on screens 768 px and wider. Below 768 px every card is full width.
Hide on mobile (checkbox, default: off): Hides the card on phones and on tablets held upright.
Card: Custom colors
Where to find it: Flex cards → Card → Custom colors
Background color (color, default: transparent): Sets the card background behind its blocks. Transparent uses the body background from Theme settings → Colors.
Text color (color, default: transparent): Sets the color of the card's text, buttons and border lines. Transparent uses the body text color from Theme settings → Colors.
Related pages
- Flex cards section: the media height, alignment and spacing shared by all cards.
- Theme blocks: the blocks you can add inside a card.
- Text card: the Flex grid card with blocks over the media.
Customer account pages
The customer account templates of Split: login, register, account, order, addresses, activation and password reset, and Sign in with Shop.
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.