Blog posts
The "Blog posts" is a valuable section for displaying the list of articles from the necessary blog.
Last updated
The "Blog posts" is a valuable section for displaying the list of articles from the necessary blog.
Last updated
Note! Before setting up the "Blog posts" section, make sure you have created articles in your Shopify admin -> Content -> Blog posts. Learn how to add and edit Blogs and Blog posts .
Tip: To hide the title, description, or button, leave the corresponding fields blank.
Use the "Heading" placeholder to add a section title.
The font size of the title can be changed to "Small", "Medium", or "Large" in the "Heading font size" drop-down.
If you need to set up the color of the title, use the "Heading color" picker. Here you can paste the hex code to the related field or choose the color using the paint pallet. The color settings will be used for both desktop and mobile.
Use the "Description" input field to add some descriptive text strings to the section that will appear under the heading.
The color of the description can be set in the "Description color" picker. The color you apply for the item will be used for a desktop and mobile.
In the "Blog", choose any blog to display blog posts in the section.
The number of posts in a row can be set in the "Posts in row". Choose whether to display 2, 4, or 6 items in each row.
To control the number of posts displayed in the section, use the "Number of blog posts to show" scale. It can be changed from 2 to 12 blog posts.
If you need to showcase a featured image of the blog posts, enable the option "Show featured image".
The "Height" setting allows you to decide whether to use the default image size by choosing the "Adapt to image" option. Alternatively, select the option "Fixed aspect ratio" to change the image size using the "Fixed aspect ratio" scale. The parameters vary from 50% to 150%, where 50% is a square image, 100% - is a landscape, and 150% is a portrait.
Here you can decide if to show the blog's details by enabling or disabling each option:
Show date
Check the option to show the release date of each blog post.
Show author
Enable the option to display a blog's author.
Centered info
If you activate the option, the title, date/author, and excerpt will be centered.
Enable swipe on mobile
Check the box to add scrollbars instead of displaying the list of blogs on mobile view.
The layout settings change the look and feel of the section.
Choose one of the options "In-grid heading", "Heading on top", or "Heading top center" in the "Layout" drop-down.
Use the "Mobile align" settings to change the alignment of the heading and description to the "Left" or "Center". Leave the "Auto" option to use the pre-designed theme settings.
To add a divider between sections, use the "Dividing line" to set the position: "Top", "Bottom", or "Both". The dividing line will be hidden once you use the option "None".
On the "Top spacing" and "Bottom spacing" scales, decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.
Activate the "Enable "View all" checkbox to show the "View All" button on desktop and mobile if the blog contains more articles than is displayed in the section.
Use the "Color" picker to change the button background color for the "Primary" style. For the "Secondary" style the colorized text and border inside the button will be added. If you used the "Link style", the color will be applied to the text link.
Check the following examples of how the section might display on desktop and mobile:
Use the "Style" drop-down to change the button's appearance in the sections. The theme includes three styles that can work out in your store: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following .
