Shopify elements – Blog Posts List – To attract traffic and grow sales

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 element

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).

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’s configuration

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.

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

General configuration

CONTENT 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 here

Styling configuration

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

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