Blog posts
Use the section to display the list of articles from a specific blog.
Blog posts
Content
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.
Blog Choose a blog to display blog posts in the section.
Posts per row Set the number of articles displayed per row: 2, 4, or 6. Note! Works only for large screens. By default, the theme displays one article per row on mobile.
Set item count manually Enable this option to manually specify the number of articles displayed instead of using the automatically generated amount.
Maximum posts Set the maximum number of articles to display.
Layout options
Check the layout option examples here.
Layout Change the "Header" content group position using the picker:
"Split". Puts the "Header" group in the content grid while keeping it on the right.
"Stacked". Displays title elements above the media content and aligns them to the left.
"Centered". Shows the centered title elements above the media content.
Mobile alignment Align the elements from the "Header" content group using one of the options:
"Auto". Uses the setting applied in the "Layout".
"Left". Displays content on the left. Note! The call-to-action button displays in full width on mobile by default.
"Center". Centers content. Note! The call-to-action button displays in full width on mobile by default.
Use swipe on mobile Enable this option to add a scrollbar on mobile devices instead of displaying content in a grid.
Dividing line Add a divider by setting its position: "Top", "Bottom", or "Both". Select "None" to hide the divider.
Top spacing / Bottom spacing Decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.
Transparent header
Allows the header to overlay the section when a transparent header is used.
Use inverted header colors Enable the option to link the color of the Header elements, such as navigation menus, Search, Compare, Account, and Cart icons, with the "Background" item under Theme settings -> Colors -> Primary colors. If the option is disabled, the color of the Header elements is related to the "Base" item.
Post list
Set the changes to the blog cards using the block.
Show image Enable the option to display an image related to each article in the blog. The recommended image size is 3:2. The details about the image aspect ratio can be found here.
Image ratio Use the options to adapt media to the desired size. Several available options can be selected from the drop-down. If an option includes additional settings, they appear underneath the drop-down after selecting an option:
"Adapt to image". Displays an image in its original aspect ratio.
"Aaspect ratio". Select the option to adjust a media height as a percentage using the "Aspect ratio" scale. The parameters can be changed from 10% to 210%*.
*The "Aspect ratio" option is applied to mobile by default.
"Aspect ratio" 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.
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 content Enable the option to center title, date/author, and excerpt.
Last updated