General section styling
General section styling in Seventh: the Section design, Cards arrangement and Section header settings that most sections share, explained once.
Applies to: Seventh 4.0.0 and later. Added in: Seventh 1.0.0. Last checked: 2026-10-12 against Seventh 4.0.0.
Most Seventh sections share the same Section design, Cards arrangement and Section header settings. They work the same way everywhere, so this page explains them once and each section page links here.
Where to find it: select a section in the theme editor. The groups appear in the section settings under the headers Section design, Cards arrangement and Section header.
Which sections have these settings
- Every section you add with Add section has the Section design group, except the Vertical slider section.
- The grid sections also have the Cards arrangement group: Custom grid, Featured collection, Featured collection: tabs, Collections list, Blog posts, Product recommendations and the grids of the Collection, Blog, Search and Collections list templates.
- Sections that can show a section header have the Position and Stick to top settings and a Section header block.
A section page lists only the settings that differ from the standard ones described here.
Card alignment
When a section shows several cards in a row, Cards alignment sets how cards of different heights line up:
- Top lines up the top edges. Best when card heights vary a lot.
- Center centers the cards in the row.
- Bottom lines up the bottom edges, for example so buttons at the bottom line up.
- Stretch makes every card in a row as tall as the tallest one.
With Stretch, Stretch alignment type sets where the blocks sit inside each card. Space between pins the first block to the top and the last block, for example a button, to the bottom.
If buttons or headings look “floating,” switch between Top and Space between until the card’s internal blocks match your design.
Scattered cards and grid gap
Grid gap sets the space between cards in a grid. The Cards arrangement settings turn a regular grid into a scattered (editorial) layout, or give slider cards different sizes.
With Scatter cards on, Seventh moves every card up or down by a different amount, in a repeating pattern. Three settings shape the result:
- Horizontal spacing sets the space between cards in a row. A larger value makes the cards narrower.
- Vertical scattering sets how far each card moves up or down.
- Gap between rows sets the vertical space between one row of cards and the next.
Example: a Custom grid with 4 promo cards, Cards size Small (4 per row), Scatter cards on, Horizontal spacing Medium and Vertical scattering Large. On desktop the 4 cards form a staggered row, like photos laid on a table. With Scatter cards on mobile devices off, the cards line up in regular rows on mobile.
On mobile, the scatter offset is half of the desktop offset. On screens narrower than 375 px, cards always line up in regular rows.
- Grid gap is hidden while Scatter cards is on, because the scattered layout sets its own spacing.
- Randomize card sizes is the slider version of the same idea: with Layout set to Slider, cards get different widths in a repeating pattern.
Section header
The section header is the optional heading area at the top or left of a section. It is a block: select Section header inside the section to set its alignment and spacing. Add Heading, Text, Button, Icon or Content group blocks inside it.
Keep this area focused: one clear heading plus short supporting text often outperforms long paragraphs beside a product grid.
Two settings in the section itself, under the header Section header, place it:
- Position places the header above the cards (Top) or in a column beside them (Left). With Left, Cards size has no XSmall option, because the header takes part of the row.
- Stick to top keeps the header in view while customers scroll through a long section. It works on screens 1024 px wide and larger. Turn it off if the sticky header covers a short or crowded section.
Section design
The Section design settings set the frame of a section: its color scheme, vertical spacing, width and an optional background image or video.
Extend section width to the edges of the screen appears only when the section header is at the top (or, in sections with a card height setting, when the card height is above 1). It never appears in Multicolumn, Scrolling text, Product comparison, Shop the look: product list or the header sections of the Collection, Blog, Article, Search and Pages templates.
To add a background image or video to a section:
Turn on the media background
Select the section, then turn on Show media background under Section design.
Choose the media
Select a Background image, a Background video, or both. When both are set, the video plays and the image is used while it loads. Add a Background image (mobile) to show a different image on screens narrower than 768 px.
Make the text readable
Set Media overlay to Color or Gradient, then set Overlay color or Overlay gradient. Lower the transparency until the text in the section reads clearly over the media.
Since Seventh 2.1.0, sections have Background image (mobile). Since Seventh 3.0.0, Media overlay can be a gradient.
Why is the Grid gap setting missing?
Scatter cards is on. Grid gap shows only when Scatter cards is off or Layout is Slider. Turn off Scatter cards to set the gap between cards.
Why is the text hard to read on my background image?
The overlay is missing or too light. Set Media overlay and Overlay color or Overlay gradient to a darker value, or choose a Color scheme whose text color contrasts with the image. You can also place the text in a card that has its own color scheme.
Can I hide a section on mobile?
No. Seventh does not support hiding a whole section on mobile or desktop. In the Flexible grid section, turn on Hide on mobile in a Flex card to hide that card on screens narrower than 768 px. See Flexible grid section.
All General section styling settings
Every setting on this page, one list per section or block, with its type and default.
Where to find it: Any section → 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.
Where to find it: Any grid section → 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.
Where to find it: Custom grid → Section header. It is also available in: Animated heading, Blog posts, Collections list, Featured collection, Producst list, Features viewer, Flexible grid, Links list, Product comparison, Product recommendations, Rich text grid, Multicolumn, Grid blank, Shop the look.
Accepts these blocks: Content group, any theme block and app blocks.
Text alignment (alignment, default: Left): Sets the alignment of the blocks inside the section header: left, center or right.
Spacing (dropdown, default: Small): Sets the vertical space between the blocks inside the section header. Options: XXSmall, XSmall, Small, Regular, Large, XLarge.
Text container width (dropdown, default: Large): Sets the maximum width of the section header content on screens 1024 px wide and larger: Small 50, Medium 70 and Large 100 percent of the section width. Options: Small, Medium, Large.
Bottom margin (dropdown, default: XLarge): Sets the space between the section header and the cards or content below it. Options: Small, Regular, Large, XLarge, XXLarge.
Related pages
- Sections: every section and preset you can add with Add section.
- Custom grid section: the section that these settings are measured against.
- Content group block: groups blocks inside a section header or card.
- Heading block: the usual first block inside a section header.
- Colors theme settings: where the color schemes are defined.