Skip to main content

Blogs template

The Blogs template controls the layout of a blog’s main page, where all of its articles are listed. This template helps customers browse your blog content and find posts that interest them, whether it's news, guides, or brand updates.

Blog posts section

Blog posts section shown in the Shopify editor

SettingDescription
Color schemeSelect a predefined color scheme.
Articles per row on desktopPick how many blog posts are visible in a row on desktop.
Highlight first article of each pageShow the first article on each blog page as highlighted. Highlighted blogs are enlarged and use a larger width to breakup the layout and engage readers.
Highlight styleChoose between showing your highlighted article on a blending or contrasting background
Article image aspect ratioControl the aspect ratio of the blog posts featured image.
Show article tagsShow button links displaying article tags. The tags can be used to categorize blogs keeping like content together and helping users find further related content.
Show article publish dateShow when the article was published.
Show article authors nameShow when the article author.
Show article excerptShow a short excerpt from the article.
Section spacing & borderSee shared settings > Section spacing & border. Associated settings below.
Section animationsAnimate section when scrolled into view.

Blog post section settings in use


Shared settings

These settings are common to several sections and work the same way wherever they appear. Once you learn how they work in one place, you'll recognize them elsewhere.

Spacing and border

The section Spacing & Border settings allow you to control how much vertical space line between your sections. Mix and match to find what works for you. Show a stylistic border between sections to emphasize the break between content.

SettingDescription
Top spacingHow much spacing applies to the top of this section.
Bottom spacingHow much spacing applies to the bottom of this section.
Show bottom borderShow a stylistic border at the bottom of the section spacing
Visual example.

Showing section height settings in action