Blog posts settings

This guide describes the Blog posts section.

The Blog Posts section allows you to feature selected blog articles on your store’s pages. It helps you engage your audience with relevant content, improve SEO, and drive traffic to your blog.

Demo Example:

How to access the Blog posts section

Access this section through the theme customizer:

Navigate to Online Store > Themes
Select “Customize” on your active theme
On any theme template, click “Add section”
Search and select “Blog posts”

To insert a new section between existing ones, follow the steps in the article "Add a section"

Once the blog posts section is added, you can customize its appearance and functionality using the available settings.

How to configure the Blog posts section

Basic Components

The “Blog posts” section consists of general settings.

To start customizing your blog posts, click on the “Blog posts” section to access its settings.

General settings:

Settings	Description
Color scheme	You can apply different color schemes to your store: After creating color schemes in the theme settings under the 'Colors' tab, you can assign them to different sections of your store. In each template, section, or block, you'll find a 'Color Scheme' dropdown. Simply select the appropriate color scheme to maintain consistency and align with your brand's identity.
Background image	Upload an image to display it as the background of the section.
Heading	This field is for adding a heading to the section. In the top menu of the field, you can find options to customize the heading. Furthermore, you can click the dynamic source button to insert a dynamic source as the heading of the section.
Heading size	The heading size setting offers three options to control the size of your section heading: Small Medium Large
Blog	Select blog with blog posts to be displayed on the page, or create a new blog.
Number of blog posts to show	Choose the desired number of blog posts that you want to display in this section. This option allows you to control the quantity of blog posts visible to your visitors.
Slides per view	Set the number of blog posts displayed per page without scrolling.
Enable "View all" button if blog includes more blog posts than shown	Swipe the button to the right to display a “View All” button (on demo store label “See All blogs”) if there are more blog posts than what is currently shown. This allows users to access additional blog posts easily.
"View All" label	Enter a label to direct customers to the blog detail page.
Button style	In Shopify, Button style can be customized by using the primary and secondary button color sets, which are defined in the theme settings. These color sets allow you to style buttons consistently across your store.
Button type	Button type: Choose how the button will be displayed: Button – a solid button. Button with icon – a button that includes an icon. Link – text styled as a hyperlink. Link with icon – a hyperlink that includes an icon.
Icon	Select an icon from the dropdown list; it will be displayed in the button before the text.

Card settings

Settings	Description
Show featured image (For best results, use an image with a 3:2 aspect ratio).	Swipe the button to the right to showcase the featured image from the blog post page on the homepage or other pages. If left unchecked, heading, description, and comment count will be visible without image. Also, we can add date and author to show them on a card.
Show excerpt	This setting controls the display of blog post excerpts. Enable – Excerpts will not be displayed. Disable – Excerpts will be shown for every blog post.
Show date	Enable this option to display the publication date of the blog post.
Show author	Enable this option to display the author's name of the blog post.
"Read more" label	Decide whether the blog cards include a "Read more" link: To display the link, enter text into the field as the label. To hide the link, leave the text field empty.

Section padding

Setting	Description
Top padding	The 'Top padding' setting allows you to adjust the amount of space at the top of the section using a slider.
Bottom padding	The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section.
Top padding mobile	The 'Top padding mobile' setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile	The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the section for mobile devices.