Collections list section
The Collections list section shows the collections you choose as cards in a grid, editorial layout or slider in Seventh. This page lists its 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 Collections list section shows the collections you pick as collection cards, with image, title and product count, in a grid or a slider on any page.
Where to find it: select Add section in the theme editor, then choose one of the four Collections list presets: Collections list: classic, Collections list: editorial, Collections list: editorial split or Collections list: slider.
What the section contains
- Collection cards: one for each collection in Collections. Each card is built from collection blocks: Collection image, Collection title, Collection count and optionally Collection description, grouped in a Content group. You edit one collection card and Seventh repeats it for every collection. See Collection card.
- Promo cards (optional), placed between the collections. See Promo card.
- A section header (optional), for a heading, text and a button. See General section styling.
Presets
The four presets are the same section with different starting settings:
- Collections list: classic: a regular grid, 3 cards per row.
- Collections list: editorial: the grid with Scatter cards on.
- Collections list: editorial split: scattered cards, 2 per row, with a sticky section header on the left.
- Collections list: slider: a slider with Randomize card sizes on.
Choosing and ordering the collections
- Select the section, then select the collections in Collections.
- The cards appear in the order of the list. Drag the collections in the list to reorder them.
- With no collections selected, the section shows 3 placeholder cards.
Adding a promo card between the collections
Add the block
Select the Collections list section, select Add block and choose Promo card.
Set its position
Set Custom placement in the grid in the promo card to the position you want. With 0, the card goes after the last collection.
Promo cards appear only once Collections has collections.
Which image does a collection card show?
The collection image set in Shopify admin → Products → Collections. A collection without an image shows the image of its first product. You can override both in the Collection image block of the card. See Collection card.
How is the Collections list section different from the Collections list page?
The section shows the collections you pick, on any page. The Collections list page is the template at /collections that lists all collections of the store. See Collections list page.
All Collections list settings
Every setting in this group, with its type and default.
Accepts these blocks: Promo card.
Collections (collections picker): Sets the collections the section shows, one collection card each, in the order of the list.
Collections list section: Layout
Where to find it: Collections list → 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.
Collections list section: Cards arrangement
Where to find it: Collections list → Cards arrangement
The Collections list section uses the standard Cards arrangement settings, listed in General section styling.
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): A larger value will make 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). Shown only when Layout is Slider.
Randomize card sizes on mobile devices (checkbox, default: on). Shown only when Layout is Slider and Randomize card sizes is on.
Collections list section: Section header
Where to find it: Collections list → 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.
Collections list section: Section design
Where to find it: Collections list → Section design
The Collections list section uses the standard Section design settings, listed in General section styling.
Color scheme (color scheme, default: Scheme 1).
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). 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). 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%)). 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 and Cards arrangement settings this section shares with others.
- Collection card: the blocks inside each collection card.
- Promo card: the Promo card this section can hold.
- Collections list page: the template that lists every collection.
- Links list section: large text links with an image on hover.
Blog posts
The Blog posts section shows articles from one of your blogs as cards in a grid, editorial layout or slider in Seventh. This page lists its settings.
Contact form
The Contact form section in Seventh is a Multicolumn preset with a contact form, a heading and text. Messages go to your store email.