Blog posts section
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.
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 Blog posts section shows articles from one blog, or a list of articles you pick, as article cards 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 Blog posts presets: Blog posts: classic, Blog posts: editorial, Blog posts: editorial split or Blog posts: slider.
What the section contains
- Article cards: one for each article. Each card is built from article blocks: Article thumbnail, Article title, Article meta (author and date), Article excerpt and Article tags, optionally grouped in a Content group. You edit one article card and Seventh repeats it for every article. See Article card.
- A section header (optional), for a heading, text and a "View all" button. See General section styling.
The four presets are the same section with different starting settings:
- Blog posts: classic: a grid of 4 articles, 4 per row.
- Blog posts: editorial: 2 articles, 2 per row, with Scatter cards on.
- Blog posts: editorial split: 4 articles, 2 per row, scattered, with a sticky section header on the left.
- Blog posts: slider: 4 articles in a slider with Randomize card sizes on.
Choosing the articles
Use one of two sources:
- Blog: Seventh shows the newest articles of that blog, up to Number of articles shown.
- Articles: Seventh shows the articles you pick, in the order you pick them, up to Number of articles shown. When Articles has articles, it replaces Blog.
With neither set, the section shows placeholder article cards, so you can design it before you publish articles. Articles are written in Shopify admin → Content → Blog posts.
Why do some articles not appear?
Number of articles shown is lower than the number of articles, or the articles are hidden. Raise Number of articles shown (1 to 24), and check in Shopify admin that each article is visible (published).
Can the article cards show the full article or its comments?
No. Article cards show the thumbnail, title, meta, excerpt and tags only. The article content, comments and previous/next navigation are blocks of the Article page. See Article page.
All Blog posts settings
Every setting in this group, with its type and default.
Blog (blog picker): Sets the blog whose newest articles the section shows.
Articles (article list, up to 24): Sets a hand-picked list of articles, shown in the order you pick them. When it has articles, it replaces Blog.
Number of articles shown (slider 1 to 24, default: 3): Sets the maximum number of articles shown, from 1 to 24. The limit applies to Blog and to Articles.
Blog posts section: Layout
Where to find it: Blog posts → 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.
Blog posts section: Cards arrangement
Where to find it: Blog posts → Cards arrangement
The Blog posts 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.
Blog posts section: Section header
Where to find it: Blog posts → 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.
Blog posts section: Section design
Where to find it: Blog posts → Section design
The Blog posts 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.
- Article card: the blocks inside each article card.
- Blog page: the page that lists every article of a blog.
- Article page: the page of a single article.