Blog

Configure the blog listing, feature story, article cards, tags, and newsletter row.

The Blog template turns a Shopify blog into a browsable editorial index. Use it to introduce the journal, feature one story, organise articles by tags, and collect newsletter sign-ups without changing individual article content.

Open the Blog template

From Shopify admin, go to Online Store > Themes > Customize.
Use the page selector to open Blogs > the blog you want to review.
Select the Blog section.
Preview a blog with several articles, article tags, an article without an image, and an empty blog before saving.

Template order

The current saved Blog template contains one section:

Blog

The section can show an introduction, a feature story, tag links, an article grid, and an optional newsletter row.

Content

Introduction

Controls: Adds the rich-text introduction shown below the blog title.
Use it when: Explain what the blog covers or set expectations for the type of stories customers will find.

Feature post

Controls: Selects the article used as the feature story.
Use it when: Choose a specific article when the editorial priority should not change automatically.
Dependency: If no article is selected, the current section uses the blog's first article as the feature candidate.

Articles

Articles per page

Controls: Sets the number of articles loaded for the listing.
Options: 3–24 articles, in steps of 1. The current default is 9.
Use it when: Choose a count that keeps the listing easy to scan while providing enough content before loading more.

Show feature post

Controls: Shows or hides the feature story at the start of the listing. The current default is on.
Use it when: Keep it on when one story should lead the page; turn it off when every article should have equal weight.
Dependency: A feature story is shown only when a feature candidate exists.

Show tag filter

Controls: Shows or hides the blog tag navigation. The current default is on.
Use it when: Enable it when articles have meaningful tags that help customers choose a topic.
Dependency: The navigation is useful only when the blog has tags. An empty blog may show the accepted placeholder state instead.

Show placeholder content when empty

Controls: Shows placeholder editorial content when the blog contains no published articles. The current default is off.
Use it when: Enable it for a staging or launch presentation that should not look empty while content is being prepared.
Verify later: Confirm the placeholder copy and the transition when the first real article is published.

Cards

Articles per row (mobile)

Controls: Sets the number of article cards per mobile row.
Options: 1 or 2. The current default is 1.
Use it when: Use one column when article imagery and excerpts need room; use two only after checking title wrapping and tap targets.

Articles per row (desktop)

Controls: Sets the number of article cards per desktop row.
Options: 2, 3, or 4. The current default is 3.

Show article image

Controls: Shows or hides article images in the feature and card presentations. The current default is on.
Use it when: Keep it on when imagery is part of the editorial navigation; turn it off when the blog is intentionally text-led.

Image ratio

Controls: Sets the article-card image ratio.
Options: Portrait, Square, or Landscape. The current default is Landscape.
Dependency: Available when Show article image is enabled.

Show date

Controls: Shows publication dates in article metadata. The current default is on.

Show tags

Controls: Shows article tags on the feature and card presentations. The current default is off.
Use it when: Enable it when tags are curated and useful as a second navigation path.

Controls: Adds the newsletter signup row to the blog listing. The current default is on.
Use it when: Enable it when the store has an approved email-capture workflow and the blog is a natural subscription entry point.

Controls: The row's heading. The current default is Join our newsletter.

Controls: Supporting rich text below the heading.

Controls: Short supporting text for the signup row. The current default is You can unsubscribe at any time.

Controls: Message shown after a successful signup. The current default is Thank you for subscribing.
Verify later: Confirm the success and error states with the store's Shopify email-subscription configuration.

Spacing

Section spacing

Controls: Sets the Blog section spacing to None, Small, Medium, or Large. The current default is Medium.

Top spacing

Controls: Adds or removes top spacing. The current default is on.

Bottom spacing

Controls: Adds or removes bottom spacing. The current default is on.

Desktop and mobile behavior

The template exposes separate article-card columns for desktop and mobile. A final guide should compare the same approved blog at both sizes and verify:

feature-story prominence and image crop;
tag navigation when tags wrap or are absent;
one-column and two-column article cards with long titles;
article loading and any load-more state after the first group;
newsletter form focus, validation, and success messaging.

Exact breakpoints and unverified loading outcomes are intentionally not stated here.

Media recommendations

Use article images with a clear subject that survives the selected ratio. Check the focal point on the feature story and on cards. Exact dimensions and crop recommendations require approved fixture testing.

Accessibility and motion

Keep tag links, article cards, and newsletter fields keyboard reachable with visible focus. Provide meaningful alternative text for article images. Verify reduced-motion behavior for image reveal and loading transitions before publishing a motion recommendation.

Common checks

If the feature story is not the expected article, check Feature post and Show feature post before changing article content.
If the tag filter is not visible, confirm that the blog has tags and that Show tag filter is enabled.
If image-ratio controls are unavailable, confirm that Show article image is enabled.
If a newsletter result is unclear, test the form with the store's approved subscription fixture rather than using a real customer address.

[!NOTE] The labels, options, ranges, defaults, and current section order above come from the current Blog template and section schema. The final card geometry, loading interaction, responsive behavior, and form outcomes remain pending accepted browser verification.