Blog

The blog index: article cards with linked titles, images, and excerpts, with pagination.

Merchant-addable

No — template section

Settings

16

Block types

—

File

sections/blog.liquid

Used by default on: Blog

When to use it

Automatic for every blog.

Setting it up

1. Enable Show tag filters (on by default) to display All stories and the blog’s native tags to the right of the heading on desktop, sitting directly on its bottom divider. The active underline overlaps the divider without a gap. Filters appear only when tags exist, move below the heading and wrap on mobile, and use Shopify tag pages with normal pagination and no JavaScript requirement. The active link has one underline, with the same single-line treatment on hover or keyboard focus. Shopify blog posts own the tag names; add or edit tags in the admin. Selecting a tag resets pagination.
2. Set Page heading size to Small, Medium (default), or Large. This control appears when Show blog title is enabled. Under Card content, set Blog post heading size for the regular cards and Featured post heading size for the first story on page one independently to Small, Medium, or Large. Regular post headings default to Small and featured post headings default to Medium. On desktop, the featured story uses the editorial scale and the remaining cards use the compact scale. The featured heading size control appears only while Show featured image is enabled. With images turned off, every post uses the regular card width and Blog post heading size, and Read more links align at the bottom of each row. Both scales reduce to 20/24/28px on mobile. Titles always wrap in full.
3. Set Layout, including Content alignment: Left (default) or Center aligns each card’s title, metadata, excerpt, and Read more link. The journal masthead stays left aligned. When featured images are enabled and the first story has an image, the first story on page one opens as a full-width spread; the selected column count controls the remaining cards. All rows start from the left, including incomplete rows, with images enabled or disabled, to keep the stories on a consistent reading grid. Numbering continues across pages, and each folio uses the article’s first tag or the blog title. When comments are enabled for the blog in Shopify admin, each card displays a localized comment count linking to that article’s comments.
4. Choose the visible details under Card content. With Show featured image enabled, set Image layout to Landscape (3:2, default), Square (1:1), Portrait (4:5), or Adapt to image (original proportions). Fixed layouts crop using the image focal point; Adapt to image shows the full image and uses a landscape placeholder for articles without an image. The defaults show images, dates, authors, and excerpts, with 10 posts per page and three columns on desktop. Color defaults to Scheme 7 (stored as scheme-6), and top and bottom Padding both default to 52px.
5. Article titles stay free of underlines. Hovering anywhere within a story card, or focusing one of its links with the keyboard, activates the image and Read more effects selected under Theme settings → Motion, including None. The Read more arrow extends from a fixed starting point on card hover and keyboard focus, using the global interface animation speed. Reduced motion and the global No motion option keep it static.

Where the content comes from

Shopify blog and article data.

Section settings

Every setting on the section itself, in the order it appears in the theme editor. Group headings match the editor's own grouping.