Blog posts
A blog display section built from a fixed set of blocks — a header, a blog post list, and a View all button. Choose a grid or carousel layout, set the post count, and design the cards.
Settings
Layout
Width
Page — Keeps the content within the page width set in your theme settings. Full — Stretches the content across the full browser width, with a small space at the edges.
Desktop alignment
Horizontal alignment of all content blocks on desktop.
Mobile alignment
Horizontal alignment on mobile, set independently.
Gap
Vertical spacing between the stacked blocks (header, list, button).
Gap — Desktop
Spacing between blocks on desktop.
Gap — Mobile
Spacing between blocks on mobile.
Background
Media
Sets what appears behind the section: an image, a video, or none.
Image
Section background image.
Mobile Image
Separate background image for mobile.
Video
Shopify-hosted background video. Autoplays muted.
Overlay
Adds a color layer over the background media.
Overlay color
Color and opacity of the overlay.
Parallax effect
Adds motion to the background as the page scrolls.
Appearance
Color scheme
Background and text colors for the section.
Spacing
Padding top / bottom
Outer vertical spacing.
Custom padding — Mobile
Override desktop padding with independent mobile values.
Available Blocks
This section is built from three static blocks — Header, View all button, and Blog list. They are always present in this order and cannot be removed, reordered, or added to.
Header
The section header. Add Subheading, Heading, and Text child blocks inside it — see Header.
View all button
The button links automatically to the blog selected in the Blog list block, so the Link and Open link in new tab settings are hidden.
Label
The button text.
Style
Button style. Set separately for desktop and mobile.
Height
Button height. Set separately for desktop and mobile.
Full width
Stretches the button to fill the available width. Mobile only.
Show icon
Adds an icon to the button. Set separately for desktop and mobile.
Icon
Which icon to show.
Icon position
Places the icon before or after the label.
Icon size
Icon size, with a Custom icon size value when set to Custom.
Blog list
Blog
The blog to pull posts from.
Max posts
How many posts to show.
Type
Grid or Carousel. The settings below change with this choice.
Desktop columns / Mobile columns
Number of cards per row on each device.
Enable swipe on mobile
Lets the cards scroll horizontally on mobile. Grid only.
Show next slide preview on desktop
Reveals part of the next card to hint that it can be swiped. Carousel only.
Custom columns
Set the column count per breakpoint yourself, via Columns per breakpoint.
Gap — Horizontal / Vertical
Spacing between cards, with independent mobile values. Grid only.
Gap — Desktop / Mobile
Spacing between cards in carousel mode. Carousel only.
Show navigation on desktop
Previous / next arrows, with Position, Style, Icon, and Behavior. Carousel only.
Show pagination on desktop
Slide indicators, with Type, Top padding, and an optional Limit width / Max width cap on the progress bar. Carousel only.
Auto-rotate slides
Advances the carousel automatically, at a set Speed, and can Pause on hover. Carousel only.
Blog card
Sits inside the Blog list and controls how every post card looks.
Desktop layout
Vertical — the image sits above the text. Horizontal — the image sits beside the text, from tablet up. Mobile always stacks.
Ratio
Crop ratio of the post image — Original, Square (1:1), Portrait (4:5), Portrait (3:4), Portrait (2:3), or Landscape (3:2).
Alignment
Horizontal alignment of the card content.
Desktop gap / Mobile gap
Spacing between the card's title, excerpt, and meta.
Border thickness
Width of the card outline.
Corner radius
Rounding of the card corners, with a Custom corner radius value when set to Custom.
Shadow
Drop-shadow depth.
Type
Inherit the section's color scheme, or apply a separate Color scheme.
Content padding
Inner spacing on all four sides, with independent mobile values via Custom for mobile.
The card's content is built from its own child blocks — Title, Description, Meta, Tag, and Button. Add a Spacer to push blocks apart, or a Group to arrange several of them in a row, for example the meta and tag side by side.
Last updated