Blog
The blog page: a header, an optional featured post, a tag filter and the posts as cards with pagination.
munich-demo.myshopify.com
What it does
The main section of the blog page: label, heading and text, the newest post featured across the width, a row of tag pills that filter the list, and the remaining posts as cards with image, date, tag and title in two to four columns, paginated.
When to use it
It is on the blog template already. Every blog you create in the admin uses it.
Setting it up
- Decide on Show featured post and Show tag filter.
- Set Columns on desktop and Posts per page.
- Write a Label such as Journal, or clear it.
Settings
| Setting | Type | What it does |
|---|---|---|
| General | ||
| Color scheme | Color scheme | The surface of the section: background, text, buttons and accent as one contrast-checked set. Schemes are edited under Theme settings, Colors. |
| Width | Select | Fixed width keeps the section inside the page margin so it lines up with the sections around it. Full width runs it to the edge of the screen.Options: Fixed width, Full width · Default: Fixed width |
| Header | ||
| Label | Text | A small kicker above the heading, such as Journal.Default: Journal |
| Heading | Text | Your own heading. Empty shows the blog's name. |
| Size | Select | How large the heading renders, on the shared type scale from Theme settings, Typography.Options: Large, Medium, Small, Extra small · Default: Large |
| Accent font | Select | Highlight words puts the italicized words on the accent font. Whole heading sets the entire line in it. Off keeps the heading font throughout.Options: Highlight words, Whole heading, Off · Default: Highlight words |
| Text | Rich text | A short paragraph under the heading. Keep it to one or two sentences. |
| Content alignment | Select | Whether heading, text and buttons sit left, centered or right inside the section.Options: Left, Center · Default: Center |
| Layout | ||
| Show tag filter | Checkbox | Shows the tags of the blog's posts as pills that filter the list.Default: on |
| Show featured post | Checkbox | Shows the newest post large across the width, above the grid.Default: on |
| Show date | Checkbox | Shows the date on each card.Default: on |
| Show tag | Checkbox | Shows the first tag on each card.Default: on |
| Posts per page | Range | How many posts a page shows before pagination.3 to 24 · Default: 9 |
| Columns on desktop | Select | How many items sit in one row on a desktop screen.Options: 2, 3, 4 · Default: 3 |
| Columns on mobile | Select | How many items sit in one row on a phone.Options: 1, 2 · Default: 2 |
| Section padding | ||
| Top padding | Range | Space between the top of the section and its content. On a phone the theme tightens it by a quarter.0 to 120 px · Default: 40 |
| Bottom padding | Range | Space between the content and the bottom of the section. On a phone the theme tightens it by a quarter.0 to 120 px · Default: 80 |
Tips
- Leave Heading empty and the page shows the blog's name, so one template serves every blog.
- The tag filter shows the tags of the posts in the blog. Tag consistently, four to six tags, or turn the filter off.
- Give every post a featured image. The featured post at the top is the newest post shown large; without an image it is a text card.