Blogs
A few recent posts shown on another page, usually the homepage, to send traffic into the blog.
At a glance: Add it to any page with Add section.
Good for
- Showing your latest posts on the homepage
- An editorial layout with one large featured story and a list beside it
- Linking to guides and how-tos from a product or collection page
How to add the section
- From your Shopify admin, go to Online Store → Themes and click Customize on Sublime.
- Open the page you want to edit from the dropdown at the top of the editor.
- In the left sidebar, click Add section.
- Search for Blogs and select it.
- Drag it into position, adjust the settings below, and click Save.
Section settings
Blog settings
| Select blog | The blog whose posts appear here. Posts show newest first; if no blog is selected, the section shows no posts. |
| Blogs to show | How many of the latest posts to show. In Editorial mode the first post is the large featured one and the rest fill the list beside it.
Adjustable from 2 to 12 (default 4). |
Content
| Caption | Small label above the heading, used for eyebrow text like a category or a date. |
| Heading | The section title. Leave it empty to hide the heading row entirely and let the content start at the top. |
| Heading size | Picks one of the heading sizes defined in Theme settings → Typography, so headings stay consistent across sections instead of being sized one by one.
Choose Default (default), H1, H2, H3, H4, H5 or H6. |
| Description | Body copy shown under the heading. Supports bold, italic and links. |
| Text alignment | Aligns the heading and body text left, center or right.
Default: Left. |
| Button label | Text on the button. Leave it empty to hide the button. Two or three words reads best. |
| Button link | Where the button goes. A button with no link is not shown. |
| Open link in new tab | Opens the link in a new browser tab. Best kept for links that leave your store, so shoppers don't lose their place.
Off by default. |
| Button style | Picks one of the button styles defined in Theme settings → Buttons: primary, secondary or tertiary.
Choose Primary, Secondary (default) or Tertiary. |
| Button icon | Optional icon shown after the button label.
Choose None, Arrow left, Arrow right (default), Arrow up, Arrow down, Chevron left, Chevron right, Chevron up, Chevron down, Arrow up right, Plus, Minus, Cross, Check, Play, Cart, Shopping cart, Search, Link, Download, Envelope, Home, Edit, User, Login, Heart, Chat, Filter, Trash, Share, Phone, Map pin or Eye. |
Layout
| Mode | Switches the section between its available display modes.
Applies to desktop only. The blog image ratio setting has no effect. Choose Normal (default) or Editorial. |
| Image layout | Arrangement of the images in the section.
Choose Left (default) or Right. Only appears when Mode is Editorial. |
| Desktop columns | How many items sit side by side on desktop.
Choose 2, 3 (default) or 4. Only appears when Mode is Normal. |
| Card padding | Space between a card's border and its content.
Choose Default (default) or None. |
| Enable image padding | Adds space around the image inside its frame.
Off by default. Only appears when Card padding is Default. |
| Enable carousel on desktop | Turns the row into a swipeable carousel on desktop instead of wrapping items onto a second line.
Off by default. Only appears when Mode is Normal. |
| Enable carousel on mobile | Turns the row into a swipeable carousel on mobile.
Off by default. |
Card settings
| Show tags | Shows the post tags.
On by default. |
| Show excerpt | Shows the post excerpt. Excerpts are written per post in the admin; without one, the first lines of the post are used.
On by default. |
| Show date | Shows the publish date.
On by default. |
| Show author | Shows the post author.
On by default. |
| Show read more button | Adds a read-more link under the excerpt.
On by default. |
| Heading size | Heading size on each card, from the sizes in Theme settings → Typography.
Choose H1, H2, H3, H4 (default), H5 or H6. |
Appearance
| Color scheme | Sets the background, text, border and button colors for the section. Schemes are defined once in Theme settings → Colors and reused everywhere, so changing a scheme updates every section using it. |
| Card color scheme | Color scheme for cards inside the section, so they can sit apart from the section background. |
Spacing
Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.
Tips
- Give every post a featured image. Cards without one look empty next to cards that have one.
- Write a short excerpt for each post in the blog post editor. Without one, the first lines of the post are used, which rarely make the best teaser.
- Use Editorial mode for a strong lead story. It's desktop only; on mobile the posts fall back to the regular grid or carousel.
Troubleshooting
The section is empty
Pick a blog in Select blog, and check that blog has published posts.
I set a number of posts but fewer appear
The section shows as many posts as the blog has, up to your Blogs to show number.