Card
The Card is the card of Highlight's Flex cards section: an image or video on top, your own blocks below, its own width and colors.
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 Card is the card of the Flex cards section: an image or video on top, and the theme blocks you add below it, such as a caption, a heading or a button. Each Card sets its own width in the row and its own colors.
Where to find it: Online Store → Themes → Customize → select a Flex cards section → Card (or Add block → Card).
Media
- Image shows at the top of the card. Its height is the section's Desktop media height and Mobile media height, and the image is cropped from the center to fill it.
- Video file plays a video uploaded to Shopify instead of the image, muted and in a loop.
- To hide the media of all cards, turn on Don't show media in the Flex cards section.
Layout
- Desktop columns sets how wide the card is, 2 to 12 of the row's 12 columns. Default: 2. Cards that no longer fit in a row move to the next one.
- Hide on mobile hides the card on screens narrower than 836 px.
- On phones every card is full width, one under the other.
Custom colors
Every color is transparent by default, which means the card uses the store colors from Colors theme settings.
- Background color fills the card.
- Text color colors the card's text and buttons.
- Accent colors the buttons inside the card when a customer hovers them.
- Border colors the card's border. It shows only when the section's Hide border is off.
Blocks inside a card
Select Add block inside the card to add any of the ten theme blocks: Button, Caption, Content group, Custom Liquid, Divider, Empty space, Heading, Image, Text and Star rating. App blocks work too. The section's Text alignment, Text padding and Text spacing arrange them. See Blocks.
Does the image show when the video cannot play?
No. When Video file is set, the Card shows only the video and does not load the image. If the video may not play, for example on phones in low power mode, use an image instead.
All Card settings
Every setting, with its type and default.
Accepts these blocks: app blocks and any theme block.
Image (image): Sets the image at the top of the card. Its height comes from the section's Desktop media height and Mobile media height.
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.
Card: Layout
Where to find it: Flex cards → Card → Layout
Desktop columns (slider 2 to 12, default: 2): Sets the card's width, in columns of the section's 12-column row. Cards that do not fit move to the next row.
Hide on mobile (checkbox, default: off): Hides the card on screens narrower than 836 px.
Card: Custom colors
Where to find it: Flex cards → Card → Custom colors
Background color (color, default: transparent): Sets the card's background color. Transparent uses the store background color.
Text color (color, default: transparent): Sets the color of the card's text and buttons. Transparent uses the store text color.
Accent (color, default: transparent): Sets the hover color of the buttons inside the card. Transparent uses the store accent color.
Border (color, default: transparent): Sets the color of the card's border. Shown only when the section's Hide border is off.
Related pages
- Flex cards section: the section that holds the cards, with the media height and spacing settings.
- Blocks: the theme blocks a card holds.
- Text card: the card of the Flex grid section, with text over the media.