Blog posts
Blog posts element lets you showcase articles in a visually appealing card layout. This element is ideal for sharing news, tips, stories, or tutorials while keeping your store engaging and informative. With customizable styles, Blog post cards can be tailored to match your brand’s design and improve the overall browsing experience.
How to add a Blog posts element
Steps:
From the editor, on the left Sidebar > Click Add elements, or press E.
In Quick add, select Blog posts.
Drag the Blog posts onto your canvas.
How to edit a Blog posts element
Once you’ve added the Blog posts, the next step is to edit it to match your desired action.
Steps:
Select the relevant Blog posts element in the editor.
Use the tools bar above the selected element to quickly edit it.
All the formatting tools below can be found in the right hand sided Inspector panel.
General settings
Select blog: Choose the blog collection you want to display posts from.
Number of posts: Set number of posts are displayed in the section using the slider, with a maximum of 24 posts.
Columns: Select number of columns of posts to display.
Gap: Adjust the spacing between posts horizontally and vertically.
Enable carousel on desktop: Toggle to display the posts as a carousel on desktop devices.
Enable swipe on mobile: Toggle to allow swipe navigation for posts on mobile devices.
How to edit an Article card element
Inside the Blog Posts section, each post is displayed as an Article card element.
Steps:
Select the relevant Blog posts element in the editor.
Click on a blog post to edit the article card element.
Use the tools bar above the selected element to quickly edit it.
All the formatting tools below can be found in the right hand sided Inspector panel.
Preset card style
Card style: Choose styling for your article cards.
Apply the product card styles defined in Theme settings > Product cards, ensuring consistent design across your store.
Image ratio: Defines the ratio of article images.
Apply the image ratio defined in Theme settings > Product cards, ensuring consistent design across your store.
Text align: Controls the alignment of text within the article card element.
Custom card style
Manage article card's elements:
Add new elements: Insert additional fields or information into the article card.
Reorder elements: Rearrange the order of elements in the article card to prioritize important content.
Post image:
Image ratio: Defines the ratio of article images.
Post meta:
Format: Define how post meta information is displayed. You can use placeholders like {{ date }} and {{ author }}.
Date format: Choose the display format for dates.
Post title: Define the HTML tag (e.g., span, h2, h3) for the product titles.
Post excerpt:
Show post content as fallback: Display the post content if no excerpt is provided.
Word limit: Set the maximum number of words shown in the excerpt.
Read more: Direct customers to the blog post details when clicked.
Last updated
Was this helpful?