Blog listing

Overview

The blog listing page template. Displays a grid of blog post cards with an optional section header. Supports a "featured first two" layout that highlights the first two posts at larger size. No blocks.


Section Header

Tagline

Setting Description
Text Tagline text. Default: "Add a tagline".
Text Size Large, Medium, or Small. Default: Medium.
Text Weight Thin (100) to Black (900). Default: Normal (400).
Text Case None, Uppercase, Capitalize, or Lowercase. Default: Capitalize.
Text Font Family Default or Heading font.
Text Color Style Default, Heading, or Body color preset.

Heading

Setting Description
Heading Heading text. Supports inline rich text. Default: "Featured blog".
Heading Size H1–H6 or Large, Medium, Small. Default: H1.
Heading Weight Thin (100) to Black (900). Default: Bold (700).
Heading Case None, Uppercase, Capitalize, or Lowercase. Default: Uppercase.
Heading Tag Semantic HTML heading level (H1–H6). Default: H2.
Heading Font Family Default or Body font.
Heading Color Style Default or Body color preset.
Heading Link Style Default or Link style when heading contains a hyperlink.

Description

Setting Description
Description Rich-text body content.
Text Size Large, Medium, or Small. Default: Large.
Text Weight Thin (100) to Black (900). Default: Normal (400).
Text Case None, Uppercase, Capitalize, or Lowercase. Default: None.
Text Font Family Default or Heading font.
Text Color Style Default or Heading color preset.

Header Spacing

Setting Description
Desktop Header Margin Space below the header on desktop. Default: 35 px.
Mobile Header Margin Space below the header on mobile. Default: 15 px.

Card Settings

Image

Setting Description
Media Ratio Card image aspect ratio: Adapt, Square, Portrait, Landscape, or Fit to Box. Default: Adapt.
Desktop Height Fixed card height on desktop. Range: 100–400 px, default 265 px. Visible only when Media Ratio is Fit to Box.
Mobile Height Fixed card height on mobile. Range: 100–400 px, default 265 px. Visible only when Media Ratio is Fit to Box.

Post Title

Setting Description
Heading Size H1–H6 or Large, Medium, Small. Default: H5.
Heading Weight Thin (100) to Black (900). Default: Normal (400).
Heading Case None, Uppercase, Capitalize, or Lowercase. Default: Capitalize.
Heading Tag Semantic HTML heading level (H1–H6). Default: H3.
Heading Font Family Default or Body font.
Heading Color Style Default or Body color preset.

Card Text

Setting Description
Text Size Large, Medium, or Small. Default: Medium.
Text Weight Thin (100) to Black (900). Default: Normal (400).
Text Case None, Uppercase, Capitalize, or Lowercase. Default: None.
Text Font Family Default or Heading font.
Text Color Style Default or Heading color preset.
Desktop Text Alignment Content alignment on desktop. Default: Left.
Mobile Text Alignment Content alignment on mobile. Default: Left.

Card Options

Setting Description
Show Featured Image Displays the post's featured image. Enabled by default.
Enable Border Adds a border to the card. Enabled by default.
Show Tags Displays post tags. Enabled by default.
Show Date Displays the publish date. Enabled by default.
Show Author Displays the post author. Enabled by default.
Show Excerpt Displays the post excerpt. Enabled by default.
Show Comments Count Displays the comment count. Enabled by default.

Grid Settings

Setting Description
Feature First Two Posts Displays the first two posts at a larger featured size. Enabled by default.
Desktop Columns Number of columns on desktop. Range: 1–4, default 3.
Desktop Rows Number of rows per page on desktop. Range: 2–6, default 3.
Mobile Columns Number of columns on mobile: 1 or 2. Default: 2.
Desktop Grid Spacing Gap between cards on desktop. Range: 0–100 px, default 10 px.
Mobile Grid Spacing Gap between cards on mobile. Range: 0–100 px, default 10 px.

Layout Settings

Setting Description
Container Layout Page Width, Contained Content, or Container Fluid. Default: Contained Content.
Border Style None, Top, Bottom, or Top & Bottom. Default: None. Visible when container is not Page Width.
Container Size Max container width as a percentage of page width. Range: 50–100%, default 100%.
Desktop Text Alignment Section-level content alignment on desktop. Default: Left.
Mobile Text Alignment Section-level content alignment on mobile. Default: Left.
Color Scheme Shopify color scheme applied to the section. Default: Scheme 1.

Inner Spacing

Setting Description
Desktop Top Padding Default 60 px.
Desktop Bottom Padding Default 60 px.
Desktop Left Padding Default 75 px.
Desktop Right Padding Default 75 px.
Mobile Top Padding Default 35 px.
Mobile Bottom Padding Default 35 px.
Mobile Left Padding Default 15 px.
Mobile Right Padding Default 15 px.

Outer Spacing

Setting Description
Desktop Top Spacing Default 0 px.
Desktop Bottom Spacing Default 0 px.
Desktop Left Spacing Default 0 px.
Desktop Right Spacing Default 0 px.
Mobile Top Spacing Default 0 px.
Mobile Bottom Spacing Default 0 px.
Mobile Left Spacing Default 0 px.
Mobile Right Spacing Default 0 px.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us