Article

The blog article template: title, publish date, content, and paginated comments with success and error handling.

Merchant-addable

No — template section

Settings

10

Block types

—

File

sections/article.liquid

Used by default on: Article

When to use it

Automatic for every blog article.

Setting it up

1. Choose Article heading size: Small, Medium (default), or Large. It uses the shared editorial scale on desktop and 20/24/28px on mobile. This controls the article title; headings within the article body come from its Shopify content. Color defaults to Scheme 7 (stored as scheme-6), with 24px top padding and 16px bottom padding. Featured image, date, author, tags, sharing, and comments are enabled by default. The article opens with a link back to its blog, an editorial title and metadata, and a wide featured image. The back link uses the global text hover effect and extends its arrow to the left from a fixed right endpoint on hover or keyboard focus, matching the blog’s Read more link. Global No motion and reduced motion keep the arrow static. Body content uses a narrower reading column; native numbered lists provide a clear sequence for how-to guides.
2. Published comments use softly tinted cards with the global card corner radius and comfortable spacing, with the author on the left and localized posting date and time on the right on desktop; timestamps move below the author on mobile. The comment count is smaller beside the section heading. When comments exist, a Leave a comment link with a speech bubble icon uses the global text hover effect and scrolls smoothly to the form using the global interface animation speed. Reduced motion and the global No motion setting keep this navigation immediate, so readers can contribute without scrolling through the current page of comments. Comments are paginated at 20 per page. The comments area aligns with the article’s reading column, with a top divider, a smaller Leave a comment heading, and a Post comment button. Name and email share one row on desktop and stack on phones. Input corners follow the global input radius up to 12px; square settings stay square. Comment behavior is configured in Shopify admin under Content → Blog posts.

Where the content comes from

Shopify 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.