Blog posts shows the newest articles from one of your blogs, each with its image, date, title and excerpt, and a link to the blog. Use it to bring a journal or lookbook notes onto the home page.
Where to find it
In the theme editor, click Add section and choose Blog posts. You can add it to the home page or any other page that takes sections, as many times as you like.
Layout options
Articles sit in a row, with Columns on desktop setting how many share it. On mobile they swipe sideways, or stack with Enable swipe on mobile off. The image, date and excerpt can each be turned off for a quieter list.
Section settings
Select the section in the theme editor to see these settings, in this order.
| Setting | Options | What it does |
|---|---|---|
| Blog | Blog. | The blog whose newest articles are shown. |
| Eyebrow | Text. | A short label above the heading, such as "New in". With Number sections on in theme settings, the section's number is shown before it. |
| Heading | Text. | The section's heading. Select a word and make it italic for emphasis. Leave it empty to show no heading. |
| Heading size | Small, Medium, Large or Extra large. Default: Medium. | How large the heading is set. |
| Posts to show | 2 to 6. Default: 3. | How many articles are shown, newest first. |
| Columns on desktop | 2 to 4. Default: 3. | How many articles sit in a row on desktop. |
| Show featured image | On or off. Default: on. | Shows each article's featured image. |
| Show date | On or off. Default: on. | Shows each article's publication date. |
| Show excerpt | On or off. Default: on. | Shows each article's excerpt. |
| Show link to the blog | On or off. Default: on. | Adds a link to the blog at the top of the section. |
| Enable swipe on mobile | On or off. Default: on. | Lets customers swipe through the articles on mobile. When off, they stack. |
| Color scheme | Color scheme. | Which of your color schemes the section uses. Schemes are edited in theme settings under Colors. |
| Background image | ||
| Image | Image. | An optional image behind the whole section, cropped around its focal point. Text keeps the color scheme's text color, so darken or lighten the image with the overlay until everything reads clearly. |
| Overlay color | Color. Default: #000000. | The color laid over the background image. |
| Overlay opacity | 0% to 90%. Default: 40%. | How strong the overlay is. 0% shows the image untouched. |
| Section spacing | ||
| Top spacing | None, Small, Medium or Large. Default: Medium. | The space above the section, as a share of Space between sections in theme settings. None lets the section touch the one above it. |
| Bottom spacing | None, Small, Medium or Large. Default: Medium. | The space below the section. None lets it touch the one below. |
Image sizes
| Image | Recommended | Notes |
|---|---|---|
| Article featured image | 1600 x 1200 px (4:3 landscape) | Set on each article in your Shopify admin. Cropped to 4:3. |
Upload JPG or PNG files. Shopify resizes and compresses each image for the customer's screen, so there is no need to make smaller copies yourself.
Tips
- Write a short excerpt for every article in Shopify, so each card says what the article is about.
- Match Posts to show to Columns on desktop for one tidy row.