Shopify elements – Blog Posts List

In this article, you will learn about the Blog Posts List element, one of Shopify elements in PageFly, and how to use it to grow traffic to your store. 

About the Blog Posts List elementClick to copy

Blog Post List element lets you insert a single, or a list of blogs, from your Shopify store to a page. Above all, it promotes your brand story or announces an upcoming collection. As a result, it can increase the conversion rate.

Even so, you can use this element to promote your blogs on other pages (ex. landing page).

Before jumping to the detailed steps, you can watch this video below:

Access the Blog Post List element

Step 1: Click on the Add Shopify element icon in the Element Catalog

Step 2: Click on the Blog Post List element in the dropdown menu

Step 3: Drag and drop the element into the page editor and then start using it.

Blog Post List element comes with three common variations but we will continue to add more variations to help you save time.

Note that you can search for this element by using the search function instead of finding it in the sidebar.

blog post list element

Blog Post List element’s configurationClick to copy

Blog Post List element offers many variables with the editable layout, so you can achieve a better conversion rate of the page. 

When you drag and drop the Blog Post List element into the editor page, you can choose Custom Blog on the General tab.

blog post list element

In this article, we will show the parameters of the General and Styling tabs for the Blog Posts element.

General configuration

Items per Loading: adjust the number of blog posts displayed
Items per Row: adjust the number of items in a row
Items Spacing: adjust space between items
Reverse Order: Enable to reverse the order of items
Loading mode: 
  • None: this option is chosen by default.
  • Pagination: this option will be displayed as the page’s numbers. This feature only works on the live page.
  • Load more: this option will be displayed as a “Load more” button. This feature only works on the live page.

You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters.

Styling configuration

You can check more information about OVERALL, SPACING, TYPOGRAPHY, BACKGROUND, BORDER, DISPLAY, CUSTOM CSS in the Styling tab.

You can check the video below about creating a blog post page

Navigate this category

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
PageFly Languagues

PageFly Help Center is now available in Chinese, French and Japanese. Please check the flags on the page header.

I got it!
Boost Father's Day Sales: Utilize PageFly's templates to create captivating pages that drive results - Discover Now