Skip to main content

Blog article

Merchant Developer

Renders a single blog article with hero banner, reading progress bar, auto table of contents, share buttons, related posts, and comments.

The main content section for a blog article. It pulls the article's title, tags, author, date, hero image, and body from Shopify and adds reading enhancements: a sticky reading-progress bar, an auto-generated table of contents, social share buttons, previous/next navigation, related articles, and a native comments form.

storefront previewResult
Article
Article
storefront previewSettings
Blog Article section settings - reading progress, table of contents, share buttons and related articles
Blog Article section settings - reading progress, table of contents, share buttons and related articles

How to use it​

For merchants

In the Shopify theme editor, add or open this section, then:

  1. Open Online Store > Themes > Customize, then use the top page selector to switch to a Blog post (article) page.
  2. Select the Article section to open its settings.
  3. Under Features, toggle Show breadcrumbs, Show share buttons, and Show related articles to taste.
  4. Under Banner image, pick a Banner image height (Original, Small, Medium, Large, or Full screen) to control how the article's featured image displays.
  5. Under Spacing, adjust Padding top and Padding bottom, then Save.
tip

The hero banner uses the article's featured image (set on the article in the Shopify admin), not a section setting. Upload a wide, high-resolution image (~2000px wide) for best results.

tip

The table of contents only appears when the article body contains at least 3 H2/H3 headings; otherwise it stays hidden.

tip

Comments only show if they are enabled for the blog in the Shopify admin; the Pinterest share button only appears when the article has a featured image.

Settings reference​

SettingTypeDefaultWhat it does
Color schemecolor_schemescheme-1Sets the background and text colors for the section.
Show breadcrumbscheckboxtrueShows a Home / Blog / Article breadcrumb trail above the title.
Show share buttonscheckboxtrueDisplays X, Facebook, Pinterest, email, and copy-link share buttons below the article.
Show related articlescheckboxtrueShows up to 3 other posts from the same blog in a card grid.
Banner image heightselectoriginalControls the featured-image hero height: Original (natural height), Small (300px), Medium (450px), Large (600px), or Full screen (100vh).
Padding toprange40pxSpace above the section (0-120px).
Padding bottomrange80pxSpace below the section (0-120px).

Accepts only Shopify @app blocks, letting apps inject content at the end of the section; there are no theme-defined blocks to add.

Developer notes​

Developer note

Styles are inline-scoped to #ArticleMain-{{ section.id }} via a {% style %} block; colors read from global settings.color_accent, settings.color_text, and button settings.

  • Renders section-color-scheme at the top and reuses the pagination snippet for paginated comments (20 per page).
  • An inline vanilla-JS IIFE handles the copy-link button (Clipboard API), the scroll-driven reading-progress bar (rAF-throttled), and building the TOC from H2/H3 headings; it respects prefers-reduced-motion.
  • Comments use Shopify's {% form 'new_comment' %} and honor blog.moderated? and blog.comments_enabled?; hero, related, and share output only render when the relevant objects exist.
<div class="article-main__content" data-article-body>
  {{ article.content }}
</div>
<nav class="article-main__toc" data-article-toc hidden></nav>