Blog posts
The "Blog posts" is a valuable section for displaying the list of articles from the necessary blog.
Note! Before setting up the "Blog posts" section, ensure you have created articles in your Shopify admin -> Content -> Blog posts. Learn how to add and edit Blogs and Blog posts here.
Tip: To hide the title, description, or button, leave the corresponding fields blank.
Heading
Use the "Heading" placeholder to add a section title. Additional settings will be shown after entering a title.
The font size of the title can be changed to "Small", "Medium", or "Large" in the "Size" drop-down.
Set up the title color using the "Color" picker. Here you can paste the hex code into the corresponding field or choose the color using the paint palette. The color settings will be applied for both desktop and mobile.
Description
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 "Color" picker. The color you apply to the item will be used for both desktop and mobile.
Content
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 blog post images, enable the "Show featured image" option.
Use the "Height" options to adapt a media to the desired size. If an option includes a corresponding setting, it will appear underneath the drop-down after selecting an option:
"Adapt to image". Displays an image in its original aspect ratio.
"Proportion of height". Select the option to adjust a media height as a percentage using the "Proportion of height" scale. The parameters can be changed from 10% to 210%*.
"Proportion of height" indicators:
* 100% = Square image
* Less than 100% = Landscape
* More than 100% = Portrait
* 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.
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.
Section layout
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 alignment" settings to change the alignment of the heading and description to "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 when you select the "None" option.
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.
Button "View All"
Activate the "Enable "View all" checkbox to show the "View All" button on desktop and mobile if the blog contains more articles than are displayed in the section. The following settings will be expanded after activating the option:
Use the "Style" drop-down to change the button's appearance in the sections. The theme includes three styles that can fit your store design: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following help page.
Use the "Color" picker to change the button background color for the "Primary" style. For the "Secondary" style, colored text and a border will be added to the button. 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:
Last updated