Blog posts

What is the blog posts section?

The Blog Posts section allows Shopify store owners to showcase recent or featured articles from their blog. This section enhances content visibility, improves engagement, and drives traffic to the blog by displaying articles in an organized layout with customizable design options.

How to add blog posts section

Quick Start Guide

‍

Access the Theme Editor: Navigate to `Online Store > Themes > Customize`.
Add a Section: Click on `Add section` and select the desired section from the list of available sections.
Customize Your Section: Adjust the settings such as display type, alignment, and visibility according to your preferences.
‍

If you need a more detailed, step-by-step guide on accessing the theme editor, adding sections and blocks, refer to our Setting up theme sections and blocks article.

General section settings

Within this section, you'll find common settings like section headers, containers, visibility options, and color settings that are consistent across all sections. For more detailed information on these shared settings, please refer to the Common settings between all sections article.

Section Settings

Blog: Select the blog from which posts will be displayed.
Blog Posts to Show: Choose how many blog posts should be displayed (1-4).
Spacing Between Posts on Desktop: Adjust the horizontal spacing between blog posts on desktop (10-50px).
Spacing Between Posts on Mobile: Adjust the vertical spacing between blog posts on mobile (10-50px).

Blog post Settings

Image Ratio: Set the aspect ratio for blog post images (Square, Portrait, Landscape).
Blog Post Heading Size: Customize the heading size for each blog post (Small, Medium, Large).
Content Alignment on Mobile: Adjust how text content is aligned within blog post previews on mobile.
Show Tags: Enable or disable the display of blog post tags.
Show Date: Display or hide the blog post publication date.
Show Author: Display or hide the author's name.
Show Excerpt: Show a short summary of the blog post.
Show Comments Count: Display the number of comments for each post.
Show Read More: Add a "Read More" link to each post.

Featured blog post Settings

Featured Heading Size: Customize the heading size for featured blog posts (Small, Medium, Large, Extra-Large).
Featured Content Position on Desktop: Choose the positioning of featured blog content on desktop (Top, Middle, Bottom, Left, Center, Right).
Featured Content Position on Mobile: Adjust where featured blog content appears on mobile (Top, Middle, Bottom).
Featured Content Alignment on Desktop: Define how the featured blog post text is aligned.
Featured Content Alignment on Mobile: Adjust the featured content alignment on mobile (default: Center).
Featured Overlay Opacity: Set the transparency level of the overlay on featured blog posts (0-100%).

Color Settings

Color Scheme: Select a color scheme for the blog section.
Featured Blog Post Color Scheme: Set a different color scheme for featured posts.
Tag Background Color: Adjust the background color of blog post tags.
Tag Text Color: Customize the text color of blog post tags.
Featured Tag Background Color: Set a background color for featured post tags.

Featured Tag Text Color: Customize the text color for featured post tags.

Can't find what you're looking for?

Our support staff are here to answer your queries, so don't hesitate to write to us!