How Seventh is built: sections, cards and blocks
How Seventh is built: sections, cards and blocks explained, how they nest in the theme editor, and where Theme settings fit in.
Applies to: Seventh 4.0.0 and later. Added in: Seventh 1.0.0. Last checked: 2026-10-12 against Seventh 4.0.0.
Seventh builds every page from three levels: sections, cards and blocks. Each level has its own settings, and the store-wide defaults live in Theme settings.
Where to find it: the theme editor sidebar, where each section opens into a tree of its cards and blocks.
Sections
Sections are the main building blocks of your pages. Each section is a distinct area that serves a specific purpose. You can add, remove, and reorder sections to build your pages exactly how you want.
- A section is a full-width area of a page, for example the Header, a Featured collection or a Custom grid.
- Add one with Add section in the theme editor.
- Section settings set the layout of the section: columns, spacing, colors and background.
- Seventh 4.0.0 has 22 sections you can add, offered as 67 presets. See Sections for the full list.
A preset is a ready-made starting point of a section. For example, "Featured collection: classic" and "Featured collection: slider" are two presets of the Featured collection section.
Section header
Many sections start with a Section header block, the heading area at the top of the section.
- Add a Heading, Text or Button block inside it for a title, an intro text or a link.
- It has its own settings: Text alignment, Spacing, Text container width and Bottom margin.
- Sections that have it include Custom grid, Multicolumn, Rich text grid, Flexible grid, Featured collection, Blog posts and Collections list.
See General section styling for the Section header settings.
Cards
Cards are the middle layer - they're styled containers that hold your content blocks. Cards provide structure, styling, and layout options for your content.
- A card is a block that holds other blocks.
- It has its own style: alignment, spacing, padding, corner radius and color scheme.
- Card settings set the look of that one card.
- Examples: Promo card, Product card, Collection card. Every card type is listed in Cards.
Blocks
Blocks are the individual pieces of content you add inside cards. They're the actual text, images, buttons, and other elements that customers see on your store.
Block settings set one piece of content. Seventh has two kinds of blocks.
Blocks you can add anywhere. Seventh has 22 public blocks that you can add from Add block inside most sections and cards:
Accordion, Attribute meter, Button, Caption, Contact form, Countdown, Custom HTML / Liquid, Divider, Empty space, Heading, Icon, Image, Menu, Newsletter form, Popup button, Product item, Social icons, Star rating, Table, Testimonial author, Text and Video.
Each block works the same way wherever you add it. Once you know the Heading block settings, they apply in every card. See Blocks.
Blocks that exist only inside one section or card. Seventh 4.0.0 has 120 of them. They cannot be added anywhere else. Examples:
- Product blocks such as the product title, price and badges: only on the product page and inside a Product card.
- Article blocks (title, excerpt, meta, tags): only inside an Article card.
- Collection blocks (title, description, product count): only inside a Collection card.
- The rows of the Header section (Top row, Main row, Breadcrumbs): only in the Header section.
These blocks are documented on the page of the section or card that holds them, for example Product information blocks and Product card.
How the levels fit together
A section holds cards or blocks, and a card holds blocks. In the theme editor sidebar, a typical Custom grid section looks like this:
Custom grid (section)
├── Section header (block, optional heading area at the top)
│ ├── Heading
│ └── Text
├── Card (card)
│ ├── Image
│ ├── Heading
│ └── Button
└── Product card (card)
└── product blocks: title, price, swatchesEach level has its own Add block button:
- The section's Add block adds cards or blocks to the section.
- A card's Add block adds blocks inside that card.
Build a new layout
Add a section
In the theme editor, open the page and select Add section. Choose the preset closest to what you want, for example "Promotions: cards" for a row of promo cards or "Rich text: simple" for text and media.
Add cards or blocks to the section
Select Add block in the section. In card-based sections such as Custom grid, add a card for each item in the grid.
Add blocks to each card
Select Add block inside a card and add the content: Heading, Text, Image, Button or a content-specific block.
Set the style on each level
Set the section layout in the section settings, the card style in the card settings and the text style in the block settings. Select Save.
Remember: Building your store is like building with blocks - start simple, experiment, and have fun creating something unique!
Where do Theme settings fit in?
Theme settings hold the defaults for the whole store. They cover page width and spacing, color schemes, fonts, buttons, product cards, badges, swatches, the cart and more.
Sections, cards and blocks use these defaults until you change their own settings. For example, a section uses Default spacing between sections from Theme settings → Layout until you change its own padding. Open Theme settings from the gear icon in the theme editor sidebar. See Layout theme settings and Colors theme settings to start.
Which sections appear on every page?
The sections in the four section groups. They are not part of one page template, so Seventh shows them in groups in the theme editor:
- Header area: the Announcement bars and Header sections at the top of the sidebar. See Header area.
- Drawers group: the Navigation drawer, Cart drawer and Search drawer. See Drawers group.
- Footer group: the sections at the bottom of every page, including the Copyright bar. See Footer group.
- Overlay group: the Popovers and Modals sections. See Overlay group.
Related pages
- Seventh video guides: a video walkthrough of sections, cards and blocks.
- General section styling: the Section design and Cards arrangement settings shared by most sections.
- Custom grid section: the most flexible card-based section.
- Blank card: the general-purpose card.
- Blocks: every public block.