Custom grid section
The Custom grid section is the flexible Seventh section behind many presets: a grid or slider of cards with its own layout settings.
Applies to: Seventh 4.0.0 and later. Added in: Seventh 1.0.0. Last checked: 2026-10-12 against Seventh 4.0.0.
The Custom grid section shows cards in a grid or a slider on any page of the store. It is the section behind 16 Add section presets, from Grid blank to Promotions, Testimonials and Newsletter.
Where to find it: select Add section in the theme editor, then choose one of the Custom grid presets listed below. In the editor the section is called Custom grid, whatever preset you started from.
Presets
Each preset is a Custom grid section with a ready-made set of cards and blocks. After you add it, all presets have the same settings, listed on this page.
| Preset in Add section | What it adds | Page |
|---|---|---|
| Grid blank | An empty Custom grid. Add your own cards. | This page |
| Promotions: overlays, Promotions: cards | Cards with text and a button, over an image or below it | Promotions section |
| Testimonials: slider, Testimonials: editorial | Cards with star ratings, quotes and author names | Testimonials section |
| Shop the look: editorial, Shop the look: slider | Shop the look cards with product hotspots | Shop the look section |
| Media gallery: slider, Media gallery: social | Cards with images, or a social feed style grid | Media gallery section |
| Image comparison, Image comparison: split | A before and after image slider | Image comparison section |
| Link cards | Links cards that each open a page | Link cards section |
| Newsletter | A card with a heading, text and a newsletter form | Newsletter section |
| Image | One card with an image | Image section |
| Video | One card with a video | Video section |
| Countdown | A card with a countdown timer | Countdown section |
Cards in the grid
The Custom grid section holds a section header and any number of cards. Each card is one item in the grid or slider. It accepts these cards:
- Card: a container for any blocks, with its own style. See Blank card.
- Links card: a card that links to a page. See Links card.
- Collection card: shows one collection. See Collection card.
- Product card: shows one product. See Product card.
- Article card: shows one blog article. See Article card.
- Shop the look card: an image with product hotspots. See Shop the look card.
- Image comparison: a before and after image slider. See Image comparison section.
The section header is described in General section styling.
Building a grid from Grid blank
Add the section
Select Add section, then choose Grid blank.
Add the cards
Select Add block inside the section and choose a card, for example Card or Product card. Repeat once for each item in the grid.
Fill each card
Select a card, then Add block inside it to add a Heading, Text, Image or Button block.
Set the layout
Select the Custom grid section and set Layout, Cards size and Cards size on mobile.
Where can I use the Custom grid section?
In any template and in the Footer group. Seventh does not support the Custom grid section in the Drawers group, the Overlay group or the Password page. Use the Navigation drawer promo blocks, the Modals section or the Popovers section for content in those areas.
How do I show the cards as a slider?
Set Layout to Slider. The cards then show in one row, which customers swipe on mobile or scroll with the slider arrows on desktop. The arrows and pagination style come from Sliders navigation theme settings. With Slider, Scatter cards is replaced by Randomize card sizes.
All Custom grid settings
Every setting in this group, with its type and default.
Accepts these blocks: Card, Links card, Collection card, Product card, Article card, Shop the look card and Image comparison.
Custom grid section: Layout
Where to find it: Custom grid → Layout
Layout (dropdown, default: Grid): Sets how the cards are arranged: Grid shows rows of cards, Slider shows one row that customers swipe or scroll sideways. Options: Slider, Grid.
Cards size (dropdown, default: Medium): Sets how many cards fit in one row on desktop: XSmall 5, Small 4, Medium 3, Large 2, XLarge 1. Seventh shows fewer cards per row on smaller screens. Options: XSmall, Small, Medium, Large, XLarge. Shown only when Position is Top.
Cards size (dropdown, default: Medium): Sets how many cards fit in one row on desktop when the section header is on the left: Small 4, Medium 3, Large 2, XLarge 1. Seventh shows fewer cards per row on smaller screens. Options: Small, Medium, Large, XLarge. Shown only when Position is Left.
Cards size on mobile (dropdown, default: Small): Sets the card size on mobile: Small shows 2 cards per row, Large shows 1. On screens narrower than 375 px, cards always show one per row. Options: Small, Large. Shown only when Cards size is not XLarge.
Cards alignment (dropdown, default: Top): Sets how cards of different heights line up in a row. Stretch makes every card in a row as tall as the tallest one. Options: Top, Center, Bottom, Stretch.
Stretch alignment type (dropdown, default: Space between): Sets where the blocks sit inside each stretched card. Space between pins the first block to the top and the last block to the bottom. Options: Top, Center, Bottom, Space between, Space around. Shown only when Cards alignment is Stretch.
Grid gap (dropdown, default: Default): Sets the space between cards. None places the cards edge to edge. Options: None, Default, XXSmall, XSmall, Small, Regular, Large, XLarge, XXLarge. Shown only when Scatter cards is off, or Layout is Slider.
Custom grid section: Cards arrangement
Where to find it: Custom grid → Cards arrangement
Scatter cards (checkbox, default: off): Turns on the scattered (editorial) layout: each card moves up or down by a different amount, so the cards no longer sit in straight rows. Shown only when Layout is Grid.
Scatter cards on mobile devices (checkbox, default: off): Keeps the scattered layout on mobile, with half the desktop offset. When off, cards line up in regular rows on mobile. Shown only when Layout is Grid and Scatter cards is on.
Horizontal spacing (dropdown, default: Medium): Sets the space between scattered cards in a row. A larger value makes the cards smaller. Options: XSmall, Small, Medium, Large, XLarge. Shown only when Scatter cards is on and Layout is not Slider.
Vertical scattering (dropdown, default: XSmall): Sets how far each scattered card moves up or down. Options: XSmall, Small, Medium, Large, XLarge. Shown only when Scatter cards is on and Layout is not Slider.
Gap between rows (dropdown, default: XSmall): Sets the vertical space between rows of scattered cards. Options: XSmall, Small, Medium, Large, XLarge. Shown only when Scatter cards is on and Layout is not Slider.
Randomize card sizes (checkbox, default: off): Gives the slider cards different widths in a repeating pattern. Shown only when Layout is Slider.
Randomize card sizes on mobile devices (checkbox, default: on): Keeps the different card widths on mobile. When off, all slider cards have the same width on mobile. Shown only when Layout is Slider and Randomize card sizes is on.
Custom grid section: Section header
Where to find it: Custom grid → Section header
Position (dropdown, default: Top): Sets where the section header sits: Top places it above the cards, Left places it in a column beside them. Options: Top, Left.
Stick to top (checkbox, default: off): Keeps the section header in view while customers scroll through the section, on screens 1024 px wide and larger.
Custom grid section: Section design
Where to find it: Custom grid → Section design
Color scheme (color scheme, default: Scheme 1): Sets the background, text and button colors of the section. Cards inside the section can use their own color scheme.
Top padding (dropdown, default: Default). Options: Default, None, Smaller, Larger, Largest.
Bottom padding (dropdown, default: Default). Options: Default, None, Smaller, Larger, Largest.
Extend section width to the edges of the screen (checkbox, default: off): Stretches the section to the full width of the browser window instead of the theme's container width. Shown only when Position is Top.
Show media background (checkbox, default: off): Shows a background image or video behind the section content.
Background image (image). Shown only when Show media background is on.
Background image (mobile) (image): Replaces the background image on screens narrower than 768 px. Shown only when Show media background is on and Background image is set.
Background video (video): Plays a muted, looping video behind the section content. When both a video and an image are set, the video is shown. Shown only when Show media background is on.
Media overlay (dropdown, default: Color): Sets the layer over the background media: a flat color or a gradient. Options: Color, Gradient. Shown only when Show media background is on.
Overlay color (color with transparency): Sets a color layer over the background media. Use the transparency slider to keep the media visible and the text readable. Shown only when Show media background is on and Media overlay is Color.
Overlay gradient (gradient, default: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%)): Sets a gradient layer over the background media. The default fades from 50 percent black at the bottom to transparent at the top. Shown only when Show media background is on and Media overlay is Gradient.
Parallax effect (dropdown, default: Medium): Moves the background media at a different speed than the page while customers scroll. Subtle, Medium and Strong move it by up to 5, 10 and 20 percent. Options: None, Subtle, Medium, Strong. Shown only when Show media background is on.
Push content down (checkbox, default: off): Replaces Top padding with a larger top space, so more of the background media shows above the content. Shown only when Show media background is on.
Make section full height (checkbox, default: off): Makes the section at least as tall as the screen and centers the content vertically.
Related pages
- General section styling: the Section design, Cards arrangement and Section header settings in detail.
- Sections: every Add section preset and the page that documents it.
- Flexible grid section: a grid where each card sets its own width and height.
- Multicolumn section: columns of blocks without cards.
- Blank card: the Card block and its presets.