Flex cards section
The Flex cards section of Local shows a grid of cards, each with media, theme blocks and its own width in a 12-column layout.
Applies to: Local 4.2.1 and later. Added in: Local 3.1.0. Last checked: 2026-10-13 against Local 4.2.1.
The Flex cards section shows a row of cards with media on top and theme blocks below, for promotions, categories or collections. Each card sets its own width on a 12-column grid, so you can mix wide and narrow cards.
Where to find it: Online Store → Themes → Customize → Add section → Flex cards
Heading
The section heading has Heading, Subheading, Text alignment and an optional section link (Show section link, Link text, Link). See General section styling.
Content
These settings set the media area at the top of every card:
- Desktop media height sets its height on desktop, 100 to 600 px (default 300 px). The image is cropped to fill it.
- Preserve media height on mobile (on by default) shows each image at its own proportions on phones, uncropped.
- Mobile media height (100 to 500 px, default 200 px) appears when you turn off Preserve media height on mobile, and gives every card the same media height on phones.
- Don't show media hides the media of all cards, for a grid of text cards.
Text style
- Text alignment aligns the blocks inside the cards: Left, Center or Right.
- Text spacing sets the space between the blocks: Small (default) to Extra large.
- Text padding sets the space around the content: Regular or Large.
Card block
Each Card is one card of the row. It holds theme blocks and app blocks under its media; see Blocks.
- Image is the card media. Video file plays a Shopify-hosted video instead, muted and looping, with the image as fallback. Use different media on mobile plays Mobile video file on phones, at its Mobile video aspect ratio.
- Desktop columns (2 to 12, default 2) sets the width of the card on the 12-column grid. Cards wrap onto a new row when the columns add up to more than 12. On phones every card is full width.
- Hide on mobile hides the card on screens narrower than 768 px.
- Custom card design overrides the card colors (Background, Text, Accent, Border, Shadow) and can hide the border or shadow.
The Card block has no link of its own. To make a card lead somewhere, add a Button block or a Quick buy button block inside it.
Setting up Flex cards
Add the section
Select Add section and choose Flex cards. It starts with three cards.
Set the media height
In Content, set Desktop media height. Turn off Preserve media height on mobile if all cards should have the same media height on phones, then set Mobile media height.
Size the cards
Select each Card and set Desktop columns. Three cards of 4 fill one row; a card of 8 and a card of 4 make a wide and a narrow card.
Fill the cards
Pick the Image of each card, then add blocks inside it with Add block (Caption, Heading, Text, Button) and drag them into order.
Can I change the corner radius of the cards?
Not in the section. The card corners follow Theme settings → Borders → Cards, like every card in the theme. See Borders theme settings.
How do I make the whole card clickable?
You cannot: the Card block has no link setting. Add a Button block with the link inside the card. If the whole card must be clickable, use a Text card of the Flex grid section, which has a Link.
All Flex cards settings
Every setting, with its type and default.
Accepts these blocks: Card.
Flex cards section: Heading
Where to find it: Flex cards → Heading
The Flex cards section uses the standard Heading settings, listed in General section styling.
Heading (text field, default: "Promotion cards").
Subheading (text field, default: "Share your best offers").
Text alignment (dropdown, default: Left). Options: Left, Center.
Show section link (checkbox, default: off): Adds a text link next to the section heading. Fill Link text and Link too.
Link text (text field). Shown only when Show section link is on.
Link (link). Shown only when Show section link is on and Link text is set.
Open link in a new window (checkbox, default: off). Shown only when Link is set and Show section link is on and Link text is set.
These settings differ from the standard ones or exist only here:
Heading (text field, default: "Promotion cards").
Subheading (text field, default: "Share your best offers").
Flex cards section: Content
Where to find it: Flex cards → Content
Desktop media height (slider 100 to 600 px, step 10, default: 300 px): Sets the height of the media area of every card on desktop. The image is cropped to fill it. Shown only when Don't show media is off.
Preserve media height on mobile (checkbox, default: on): Shows each image at its own proportions on phones. Turn it off to give every card the Mobile media height. Shown only when Don't show media is off.
Mobile media height (slider 100 to 500 px, step 10, default: 200 px). Shown only when Don't show media is off and Preserve media height on mobile is off.
Don't show media (checkbox, default: off): Hides the media of all cards, for a grid of text only.
Flex cards section: Text style
Where to find it: Flex cards → Text style
Text alignment (dropdown, default: Left). Options: Left, Center, Right.
Text spacing (dropdown, default: Small). Options: Small, Medium, Large, Extra large.
Text padding (dropdown, default: Regular): Sets the space between the content and the edge of the cards. Options: Regular, Large.
Flex cards section: Section design
Where to find it: Flex cards → Section design
The Flex cards section uses the standard Section design settings, listed in General section styling.
Background color (color, default: transparent).
Background gradient (gradient).
Heading text color (color, default: transparent): Sets the color of the text outside the cards, mostly the section heading.
Descrease top margin (checkbox, default: off): Sets the space above the section to the grid gap of Theme settings → Layout → Horizontal space, instead of the full space between sections. Shown only when Remove top margin is off.
Remove top margin (checkbox, default: off): Removes the space above the section, so it touches the section before it. Shown only when Descrease top margin is off.
Flex cards section: SEO
Where to find it: Flex cards → SEO
The Flex cards section uses the standard SEO settings, listed in General section styling.
Heading tag (dropdown, default: H2): Sets the HTML tag of the heading for search engines. It does not change how the heading looks. Options: H1, H2, H3, H4, span.
Flex cards section: Visibility
Where to find it: Flex cards → Visibility
The Flex cards section uses the standard Visibility settings, listed in General section styling.
Section visibility (dropdown, default: Show always): Shows the section on every screen, only below 768 px (mobile) or only from 768 px (desktop, tablets included). A hidden section is still in the page. Options: Show always, Show only on mobile, Show only on desktop.
Where to find it: Flex cards → Card.
Accepts these blocks: app blocks and any theme block.
Image (image).
Video file (video): Plays a Shopify-hosted video in place of the image, muted and looping.
Use different media on mobile (checkbox, default: off). Shown only when Video file is set.
Mobile video file (video). Shown only when Use different media on mobile is on.
Mobile video aspect ratio (dropdown, default: Natural). Options: Natural, Wide (16:9), Short (4:3), Square (1:1), Tall (5:6), Taller (2:3), Tallest (9:16). Shown only when Use different media on mobile is on and Mobile video file is set.
Card: Grid design
Where to find it: Flex cards → Card → Grid design
Desktop columns (slider 2 to 12, default: 2): Sets how many of the 12 grid columns the card covers on desktop. Cards wrap when a row adds up to more than 12. On phones every card is full width.
Hide on mobile (checkbox, default: off): Hides the card on screens narrower than 768 px.
Card: Custom card design
Where to find it: Flex cards → Card → Custom card design
Background (color, default: transparent).
Text (color, default: transparent).
Accent (color, default: transparent).
Border (color, default: transparent).
Shadow (color, default: transparent).
Hide border (checkbox, default: off).
Hide shadow (checkbox, default: off).