Blog posts
Blog posts shows the most recent articles from one of your blogs as a row of cards, so writing that would otherwise sit behind a menu link appears where shoppers already are. Each card carries the featured image and the title, and you decide whether it also shows the category, tags, date, author and a short excerpt. Shoppers usually meet it low on the Home page, under the product rows, where it signals that the store is active and gives people a reason to keep reading.
The list fills automatically from the blog you select, so new articles appear without you touching the theme again. You can display the cards as a grid or a carousel.
How to add it
- In the Theme Editor, open the template where you want the section.
- Select Add section, then choose Blog posts.
The package uses this section on the Article template and the Home page.
Settings
View the section guide .
Heading content
| Setting | Options | Description |
|---|---|---|
| Subheading | A short line above the title, often a label such as "Journal" that tells shoppers what kind of content follows. Default: Subheading. | |
| Heading | The title shoppers read first, for example "From the blog". Default: Blog posts. | |
| Description | A sentence under the title, usually the promise of what the writing covers. | |
| Heading size | • Large | Sets how large the title looks. Large is the biggest and Small is the smallest. Default: medium. |
| Heading alignment | • Left | Sets where the title and description sit above the cards. It also decides where the View all button goes: beside the heading with Left or Right, centered under the cards with Center. Default: start. |
| Show View all button | Adds a button that takes shoppers to the whole blog, for blogs with more articles than the row shows. Default: on. | |
| View all button label | The words on the View all button. Default: View all. Appears only when Show View all button is on. | |
| View all button link | Where the View all button leads, normally the blog the posts come from. Appears only when Show View all button is on. |
Blog post
| Setting | Options | Description |
|---|---|---|
| Blog | Picks the blog the articles come from. If no blog is selected, or the blog has no articles, the section shows sample placeholder cards. | |
| Image ratio | • Adapt to image | Sets the shape every featured image is cropped to, so cards with photos of different sizes line up. Adapt to image keeps each photo as uploaded, so card heights can differ. Default: adapt. |
| Show category | Shows the name of the blog as a small label on the card image. The label links to the blog. Default: on. | |
| Show tags | Shows the article's tags as small labels on the card image, up to five per article. Default: off. | |
| Show date | Shows the date the article was published above the title. Turn it off for evergreen guides. Default: on. | |
| Show author | Shows who wrote the article, next to the date. Default: on. | |
| Show excerpt | Shows the opening words of the article under the title, up to 20 words. This makes each card taller. Default: on. |
Layout
| Setting | Options | Description |
|---|---|---|
| Maximum articles | How many articles appear. Three or four is enough on a Home page. Range: 2 - 12, step 1. Default: 8. | |
| Columns on desktop | How many cards sit side by side on a wide screen. More columns mean smaller images. Range: 2 - 4, step 1. Default: 4. | |
| Column gap | • No gap | Sets the space between cards. With No gap the cards touch. Default: medium. |
| Columns on mobile | How many cards fit across a phone screen. A value with a decimal, such as 1.5, shows part of the next card. Appears only when Enable carousel is on. Range: 1 - 2, step 0.1. Default: 1. |
Carousel
| Setting | Options | Description |
|---|---|---|
| Enable carousel | Turns the grid into a row shoppers can swipe or step through with arrows, so more articles fit without making the page longer. Default: on. | |
| Show arrows | Shows the previous and next arrows. Appears only when Enable carousel is on. Default: on. | |
| Arrow position | • Default | Default puts the arrows at the sides of the row. Section header puts them beside the heading. Appears only when Enable carousel and Show arrows are on. Default: section_header. |
| Show pagination | Shows dots under the row so shoppers can see how far through the carousel they are. Appears only when Enable carousel is on. Default: off. | |
| Reveal next item | Leaves part of the next card visible at the edge of the row, as a hint that there is more to scroll to. Appears only when Enable carousel is on. Default: off. | |
| Reveal next item on mobile | Shows part of the next card at the edge of the row on phones. Appears only when Enable carousel is on. Default: off. |
Carousel settings apply when Enable carousel is on. Arrow position can move the arrows into the section header, and the reveal options show part of the next article at the edge of the row.
Appearance
| Setting | Options | Description |
|---|---|---|
| Color scheme | Sets the background and text colors of the section. Edit color schemes in Theme settings. |
Section layout
| Setting | Options | Description |
|---|---|---|
| Section width | • Page width | Sets how far the section spreads across the screen. Page width lines up with the page width from Theme settings, Wide runs close to both screen edges, and Full width fills the browser window. Default: fix_width. |
| Top padding | Space above the section. Increase it when the heading sits too close to the section before it. Range: 0 - 100, step 1 px. Default: 48. | |
| Bottom padding | Space below the section. Increase it when the footer or the next section crowds the cards. Range: 0 - 100, step 1 px. Default: 48. | |
| Show top border | Draws a thin line along the top edge of the section. Useful when this section and the one above share a background color. Default: off. |
Notes
Maximum articles accepts values from 2 to 12. Columns on desktop accepts 2 to 4, and columns on mobile accepts 1 to 2.
No comments yet