Skip to main content

Blog posts

Merchant Developer

Displays a blog's articles in a magazine-style layout with a featured lead article, tag filters, and pagination.

Renders the current blog as a magazine-style feed: an optional masthead (subheading + heading), a tag-filter bar built from the blog's tags, a large featured split card for the newest post, a responsive card grid for the rest, and numbered pagination. Article images, reading time, author, and date are pulled automatically from each article.

storefront previewResult
Blog posts
Blog posts
storefront previewSettings
Blog Posts section settings - masthead heading, tag filter and layout options
Blog Posts section settings - masthead heading, tag filter and layout options

How to use it​

For merchants

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

  1. In the theme editor, open your Blog template (the page that lists articles) and select the Blog posts section.
  2. Enter a Heading and Subheading for the masthead, or leave them blank to hide the header entirely.
  3. Set Articles per page to control how many posts show before pagination appears.
  4. Pick a Color scheme to match the section's colors to your brand.
  5. Adjust Padding top and Padding bottom to control vertical spacing, then save.
tip

The featured split card only appears on page 1 when no tag filter is active; on tagged or later pages every post shows as a normal grid card.

tip

The tag filter bar appears automatically only when the blog's articles have tags assigned - add tags to your articles in the Shopify admin to enable it.

tip

Featured images render up to 1200px wide and grid cards up to 700px; use landscape article images for the cleanest crop. Reading time is estimated at ~200 words per minute.

tip

Content (article title, image, excerpt, author, date) comes from each article, not from this section's settings.

Settings reference​

SettingTypeDefaultWhat it does
Color schemecolor_schemescheme-1Sets the section's background and text colors.
HeadingtextOur BlogMain masthead title; leave blank to hide the header.
SubheadingtextNews, tips, and inspirationSmall eyebrow text shown above the heading; leave blank to hide.
Articles per pagerange6Number of articles per page (4-24, step 2) before pagination is shown.
Padding toprange80pxSpace above the section (0-120px).
Padding bottomrange80pxSpace below the section (0-120px).

Supports only @app blocks, letting you drop in compatible Shopify apps; it has no merchant-editable content blocks.

Developer notes​

Developer note

Loads blog-main.css and renders section-color-scheme; the section id scopes an inline <style> block (#BlogMain-{{ section.id }}) that applies settings.color_accent to tags, hover states, active filters, and active pagination.

  • Iterates blog.articles inside a {% paginate ... by section.settings.articles_per_page %} block; the featured card is blog.articles.first, skipped in the grid loop via {% continue %}.
  • Reading time is computed inline: content | strip_html | split: ' ' | size | divided_by: 200 | at_least: 1.
  • Uses many t: translation strings (e.g. blog.read_more, blog.min_read, accessibility.pagination) and responsive srcset/sizes image markup with lazy loading.
{% paginate blog.articles by section.settings.articles_per_page %}
  {% if paginate.current_page == 1 and current_tags == blank %}
    {% assign featured = blog.articles.first %}
  {% endif %}
  {% for article in blog.articles %}...{% endfor %}
{% endpaginate %}