Flex card
The Card of the Flex cards section holds an image or video and theme blocks, with its own width in a 12-column grid and its own colors.
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 Flex card is the card of the Flex cards section: an image or a video on top, theme blocks such as a heading, a text and a button below, a width on the section's 12-column grid and its own colors. The theme editor shows it as Card.
Where to find it: select a Flex cards section in the theme editor, then select a Card in it, or select Add block → Card to add one.
Where you can use it
Only inside the Flex cards section. A new Flex cards section starts with four cards. The section sets what all its cards share: the media height, the gap, the text alignment, the border and the spacing inside the cards.
Media
- Image sets the picture at the top of the card. It fills the media area, which the section's Desktop media height sets, and is cropped 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.
- A card with neither shows a placeholder drawing. To make text-only cards, turn on Don't show media in the section.
The editor note under Video file says that the image shows if the video cannot be played. In Kingdom 6.2.0 the Card shows only the video when one is set, so a video that cannot play leaves the media area empty. Use a short MP4 file, and test the card on a phone.
Size and colors
- Desktop columns sets the card width on screens 768 px wide or more, 2 to 12 of the section's 12 columns (default 2). The cards of one row should add up to 12; a card that does not fit moves to the next row.
- On screens narrower than 768 px, every card takes the full width. Hide on mobile leaves the card out on those screens.
- Custom text color sets the text color of the card and the color of its solid buttons.
- Custom background color sets the card background behind the blocks.
- Accent sets the color that buttons take when the mouse is over them.
- Border sets the color of the card's thin border. It shows only when the section's Hide border is off.
Every color is transparent by default, which means the card uses Theme settings → Colors → Body: the body background, text and accent, and a light border.
Blocks you can add
Inside a Card, select Add block to add theme blocks, in the order you drag them:
- Heading, Text, Caption and Button for the content.
- Image, such as a logo or a badge, and Star rating.
- Content group to put buttons, images and captions next to each other.
- Divider and Empty space for spacing.
- Custom Liquid for your own code, and app blocks from your installed apps.
A card without blocks shows only its media.
Why does my card show an empty area instead of the image?
Because the card has a Video file that cannot play, for example a format the browser does not support. When a video is set, the Card does not show the image. Remove the video, or upload it again as an MP4 file.
All Flex card settings
Every setting in this group, with its type and default.
Accepts these blocks: app blocks and any theme block.
Image (image): Sets the picture at the top of the card. It fills the media area set by the section's Desktop media height and is cropped around its 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 shows an empty media area.
Card: Size & alignment
Where to find it: Flex cards → Card → Size & alignment
Desktop columns (slider 2 to 12, default: 2): Sets the card width on screens 768 px wide or more, in columns of the section's 12-column grid.
Hide on mobile (checkbox, default: off): Hides the card on screens narrower than 768 px.
Card: Colors
Where to find it: Flex cards → Card → Colors
Custom text color (color, default: transparent): Sets the text color of the card and the color of its solid buttons. Transparent uses the body text color.
Custom background color (color, default: transparent): Sets the card background color. Transparent uses the body background color.
Accent (color, default: transparent): Sets the color buttons take when the mouse is over them. Transparent uses the body accent color.
Border (color, default: transparent): Sets the color of the card's border. Transparent uses a light tint of the body text color. Shown only when the section's Hide border is off.
Related pages
- Flex cards section: the section that holds the cards.
- Blocks: every theme block you can add inside a card.
- Text card: the card of the Flex grid section.
- Colors theme settings: the body colors that cards use by default.