Blog Post Grid

File: sections/blog-post-grid.liquid

Templates: page.resources.json

Description

Blog Post Grid

Displays a grid of up to 3 blog articles from a configurable blog handle, each shown as a card with image, title, truncated content, and a read-more link. Includes a section header with optional “See All” link.

Features:

• Configurable blog handle to pull articles from any blog
• Responsive 3-column grid (1 column mobile, 2 on md, 3 on lg)
• Card layout with image, title, truncated body text, and CTA link
• Section header with customizable heading and “See All” link
• Selectable background color (white or gray)

Settings:

• heading (text) — Section heading, default “Blog Posts”
• link_text (text) — Header link text, default “See All”
• link_url (url) — Header link URL
• blog_handle (text) — Blog handle to fetch articles from, default “blog”
• button_text (text) — Per-article CTA text, default “Read more”
• background_color (select) — Background color class, default “bg-white”

Blocks: None

Snippets Used:

• section-title — Renders the section heading with optional link

Dependencies:

• Tailwind CSS for utility classes

Tailwind Status: Full All styling uses Tailwind utility classes for grid layout, cards, spacing, and typography.

Settings

ID	Type	Label	Default	Info
heading	text	Heading	Blog Posts
link_text	text	Link Text	See All
link_url	url	Link URL
blog_handle	text	Blog Handle	blog	The handle of the blog category (e.g., ‘ebooks’, ‘news’)
button_text	text	Button Text	Read more	The text for the button that appears under each article.
background_color	select	Background Color	bg-white

Presets

• Blog Post Grid (Category: Custom Sections)

Usage

This section can be added via the Shopify theme editor.

{% section 'blog-post-grid' %}