The Blog documentation covers the individual article page. This template turns Shopify article data into a polished reading experience with a back-to-blog link, article title, featured image, rich text content, author and publish date metadata, tags, comments, related articles, app blocks, and configurable typography.
templates/article.json contains a single
Article section named main. The section does not require merchants to select
a specific article manually; it uses the currently viewed article, its parent blog, comments, tags, image,
content, and neighboring blog articles.
Template
The article template should stay focused on reading. Keep the Article section first because it contains the article title, media, body content, comments, and related story discovery. Merchants can add supporting sections below it if they need a newsletter signup, featured products, or campaign content after the article.
The page renders article.title, article.image,
article.content, article.author, article.published_at,
article.tags, and article.comments. Related cards are pulled from
blog.articles while skipping the current article.
The JSON template keeps the page compatible with Shopify Online Store 2.0 section editing. The main Article section also supports app blocks for article-level integrations.
Section settings
Article settings control the page palette, spacing, visible metadata, back link label, typography, comments, related articles, and translated fallback labels. Most settings are optional and can be left blank to use the theme's locale strings.
Keep Follow theme default color scheme enabled when article pages should inherit the storewide palette. Choose a dedicated Color scheme when editorial pages need a more distinct reading surface.
Top padding and Bottom padding control the vertical breathing room around the article section. Defaults keep the article close to the header while leaving room after comments and related articles.
Show publish date, Show author, and Show tags decide which article details appear below the content. Tag links route customers back to the parent blog's tagged view.
Back link label customizes the pill-shaped link above the title. When blank, the section uses the translated back-to-blog label.
Use Enable header font override for the back link and article title. Use Enable content font override for article body, metadata, comments, related cards, and app blocks.
Reading experience
The article layout starts with a compact back-to-blog link, then centers the article title with a decorative divider. If the article has a featured image, it appears as a wide responsive image before the article body. The body renders Shopify rich text directly, so headings, paragraphs, images, lists, and embedded content should be authored cleanly in Shopify admin.
The image uses Shopify image filters with responsive widths and eager loading because it is near the top of the article. If no article image exists, the layout simply continues into the content without a blank media frame.
Article body content is wrapped in the theme's rte styling. The first paragraph receives
editorial treatment on larger screens, while mobile removes the drop-cap effect for easier reading.
Tags appear as small linked chips when enabled and when the article has tags. Use tags for topic browsing such as buying guides, care tips, releases, interviews, or announcements.
Community
The comments area appears only when Show comments section is enabled and Shopify blog comments are enabled for the parent blog. This prevents an empty comment form from appearing on stores that do not use blog comments.
Comments heading overrides the translated comments title. The rendered heading includes the live comment count when comments exist.
Comments per page controls comment pagination from 5 to 30 comments. Pagination links include the comments anchor so customers return to the comment area after changing pages.
The form includes required name, email, and body fields with proper labels and browser autocomplete. Comment success message can be customized, or left blank to use the translated moderated or unmoderated success message.
Quality check