Seventh > Sections > General section styling

Most of the sections in Seventh share the same layout options. This gives you a predictable editing experience, in which you can design your entire store with clarity and focus.

Layout options

Cards alignment

When a section renders multiple cards in a row (for example product cards, article cards, or rich text cards), their vertical alignment is controlled by Cards alignment:

• Top — Rows align to the top edge. Best when card heights vary a lot and you want a clean top line.
• Center — Cards center vertically within the row. Useful for mixed content height without stretching.
• Bottom — Aligns the bottom edges. Less common; helpful when bottom-aligned CTAs should line up.
• Stretch — All cards in a row stretch to the height of the tallest card in that row. Good for uniform “tiles” and equal-height backgrounds.

Stretch alignment type

This control appears only when Cards alignment is set to Stretch. It defines how content inside each stretched card is distributed vertically:

• Top — Inner content stays pinned to the top of the card.
• Center — Inner content sits vertically centered in the card.
• Bottom — Inner content sits at the bottom of the card.
• Space between — First and last items pin to top and bottom; space is distributed between (typical for title at top and button at bottom).
• Space around — Similar distribution with space also above the first and below the last block.

Grid gap

Grid gap sets the space between cards in a grid (not always shown when the section uses a scattered/editorial layout or certain slider modes—see the in-editor tip where present).

Typical values run from None (flush cards) through Default to stepped sizes (XXSmall … XXLarge). Larger gaps add breathing room and hierarchy; None suits dense, magazine-style grids.

Related layout controls (section-specific): Many grid sections also expose layout (grid vs slider), cards size per breakpoint, scatter cards, and mobile variants. Those are documented in each section’s own file; they combine with Grid gap and Cards alignment to produce the final layout.

Section header options

Position

Position controls where the optional section header (title area) sits relative to the main content:

• Top — Header spans above the grid or slider (default in most sections).
• Left — Header sits beside the content, often narrowing the content column. Card counts per row may use a separate “with left header” size setting where the theme provides it.

Stick to top

When enabled, the section header can remain visible while scrolling (sticky), so the title or intro stays on screen as users move through long grids or sliders. Disable it if the sticky bar overlaps content on small viewports or feels distracting on short sections.

Section header block content

The Section header is a block area, not a single title field. Inside it you can usually add:

• Heading — Main section title
• Text — Supporting copy
• Button — Primary or secondary CTAs
• Icon and other shared blocks where the schema allows

Section design options

These settings control the section’s visual frame—colors, spacing, full-bleed width, and background treatment.

Color scheme

Color scheme applies one of your theme’s predefined schemes to the section shell (and often inherited by nested cards unless a card overrides it). Pick a scheme with enough contrast for text, buttons, and links inside the section.

Top / bottom padding

Top padding and Bottom padding add vertical space around the section’s content. Options are usually stepped (for example None, Smaller, Default, Larger, Largest). Use None or Smaller when stacking tight hero-style sections; use Larger / Largest to separate major page bands.

Extend section width

When Extend section width (sometimes labeled Full width in compact sections) is enabled, the section spans the full browser width. When off, content stays within the theme’s main container width. Full width pairs well with background media; container width improves readability for text-heavy sections.

Show media background / background image / video

Show media background toggles whether the section can use a photo or video behind the content. When on, you can assign Background image and/or Background video (wording may vary slightly by section). Without media, the section relies on the Color scheme fill.

Tips: Use high-resolution, compressed imagery; avoid busy videos that distract from foreground content; respect autoplay policies for video (muted loops work best for backgrounds).

Background overlay

When background media is set, Background overlay adds a semi-transparent color layer to improve text contrast or to tint the image. If text is hard to read, increase overlay opacity or choose a darker scheme before adding heavy text shadows.

Parallax effect

Parallax effect moves the background media at a different rate than the scroll, adding depth. Options often include None, Subtle, Medium, and Strong. Strong parallax can feel disorienting on long pages or on mobile; prefer Subtle for commerce pages with lots of scrolling.

Push content down

Push content down (when present) nudges foreground content lower relative to the background—useful when you want more of the image visible above the fold or when pairing with overlapping headers. If content feels too low, reduce padding instead of stacking both aggressively.

Make section full height

Make section full height forces the section to occupy at least the viewport height—common for heroes and bold statements. If content overflows (tall text stacks, many blocks), the section will still grow taller than the viewport; pair with concise copy or disable full height for dense layouts.

Practical usage guidance

• Decide width first: Choose Extend section width and Color scheme before fine-tuning padding so you are not fighting the container edge.
• Then background: Add media, then Overlay, then Parallax—this order matches how contrast issues usually appear.
• Align cards last: After real products or articles are loaded, adjust Cards alignment and Stretch alignment type; placeholder content often hides misalignment.
• Test mobile: Sticky headers, full height, and parallax behave differently on small screens; always preview phone breakpoints.

Troubleshooting

• Grid gap missing from the editor — Often tied to Scatter cards or Slider layout. Disable scatter or switch layout to see if the control returns; see that section’s doc for the exact rule.
• Cards different heights / ragged rows — Try Stretch plus Stretch alignment type; alternatively use Top alignment and shorten uneven card copy.
• Text unreadable on background — Increase Background overlay, switch Color scheme, or move text into a card with its own background.
• Section feels cramped vertically — Increase Top / bottom padding before adding extra blocks; padding is cheaper than duplicate spacers.
• Sticky header covers content — Disable Stick to top for that section or reduce content below the header on small screens.
• Parallax looks janky — Set parallax to None or Subtle; heavy parallax plus large images can stress low-end devices.