Blog page
Blog page shows the posts from your blog in a grid. You can feature one post, and add a newsletter form and up to three promotion cards between the posts.
How to add it
- In the Theme Editor, open the template where you want the section.
- Select Add section, then choose Blog page.
The package uses this section on the Blog template.
Settings
View the section guide .
General
| Setting | Options | Description |
|---|---|---|
| Show tags list | Shows a row of tag links above the posts, starting with an All link, so shoppers can filter the blog by tag. |
Heading content
| Setting | Options | Description |
|---|---|---|
| Heading size | • Large | Text size of the blog title shown above the posts: Large, Medium or Small. |
| Heading alignment | • Left | Aligns the blog title and its description to the left, center or right. |
Post settings
| Setting | Options | Description |
|---|---|---|
| Image ratio | • Adapt to image | Shape of the post images. Adapt to image keeps each picture's own proportions, and the other options crop all images to the same ratio. |
| Maximum posts | Number of posts on each page. Promotion cards take up some of these places, so a page shows fewer posts when promotions are added. | |
| Posts per row on desktop | Number of post cards in each row on desktop. Tablet shows 2 per row and mobile shows 1. | |
| Card content alignment | • Left | Aligns the text on each post card, and the labels over the image, to the left, center or right. |
| Show author | Shows the author name on each post card. | |
| Show category | Shows the blog name as a label over each post image. | |
| Show tags | Shows the post's tags as labels over the image. They are not shown on the featured card. | |
| Show date | Shows the publish date on each post card. | |
| Show excerpt | Shows the post excerpt under the post title. | |
| Show featured blog | Turns one post in the list into a wide featured card with a button. Its color scheme, position and width settings appear once this is on. | |
| Featured blog color scheme | Color scheme of the featured card. Shown only when Show featured blog is on. | |
| Position | Which post in the list becomes the featured card, counting from 1 for the first post. If the blog has fewer posts, the last post is used. | |
| Width | • 2 | Number of columns the featured card spans on desktop. It cannot be wider than Posts per row on desktop. |
Position sets where the featured post appears in the grid, and Width sets how many columns it spans. Featured blog color scheme applies only to the featured post.
Layout
| Setting | Options | Description |
|---|---|---|
| Column gap | • No gap | Space between the post cards. |
Carousel
| Setting | Options | Description |
|---|---|---|
| Pagination type | • Default | How shoppers reach more posts: numbered page links, a Load more button, or automatic loading as they scroll to the end of the list. |
Appearance
| Setting | Options | Description |
|---|---|---|
| Color scheme | Edit color schemes in Theme settings. |
Section layout
| Setting | Options | Description |
|---|---|---|
| Section width | • Page width | Page width keeps the content inside the standard page container, Wide uses a wider container, and Full width runs edge to edge. |
| Top padding | Space above the section, in pixels. | |
| Bottom padding | Space below the section, in pixels. |
Blocks
Newsletter form (newsletter-form)
Adds a signup form to the post grid at the position set by Form position. The section allows one.
| Setting | Options | Description |
|---|---|---|
| Form position | Slot in the post list where the signup card appears, counting from 1. If the number is higher than the post count, the card goes after the last post. | |
| Show email icon | Shows an envelope icon above the heading of the signup card. | |
| Heading | Main text of the block. On the newsletter signup card it sits above the email field, and on a promotion card it is the large title over the image. | |
| Description | Supporting text under the heading, with rich text formatting. On the signup card it sits above the email field. | |
| Button label | Text on the block's button. On the signup card it labels the subscribe button, and on a promotion card the button appears only when this is filled in. | |
| Note | Small print shown under the email field and button, such as a privacy note. It supports rich text and is hidden when empty. |
Promotion (promotion)
Adds a promotion card to the post grid at the position set by Promotion position. Promotion width sets how many columns it takes. You can add up to three.
| Setting | Options | Description |
|---|---|---|
| Color scheme | Edit color schemes in Theme settings. | |
| Image | 1920px x 840px recommended | |
| Highlight text | Short badge text shown on the promotion card above the subheading. The badge is hidden when this is empty. | |
| Badge icon | • None | Icon placed inside the promotion badge before its text: none, a star or a dot. |
| Background color | Background color of the promotion badge. | |
| Text color | Color of the promotion badge text. | |
| Subheading | Small line above the heading on the promotion card. | |
| Heading | Main text of the block. On the newsletter signup card it sits above the email field, and on a promotion card it is the large title over the image. | |
| Description | Supporting text under the heading, with rich text formatting. On the signup card it sits above the email field. | |
| Button label | Text on the block's button. On the signup card it labels the subscribe button, and on a promotion card the button appears only when this is filled in. | |
| Promotion link | Page that the promotion card and its button open. Without a link they are disabled. | |
| Content position on desktop | • Top left | On mobile, the position adjusts automatically. |
| Promotion position | Slot in the post list where the promotion card appears, counting from 1. The card is shown on the first page of the blog only. | |
| Promotion width | • 1 | Number of columns the promotion card spans on desktop, from 1 to 4. |
Notes
The section accepts up to four blocks: one newsletter form and three promotions.
Promotion blocks use part of the post grid. Each page of posts shows Maximum posts minus the total Promotion width of all promotions, and never fewer than one post.
No comments yet