Create a list of blog posts with the Article List element

This article will demonstrate how to use the Article List element to create a list of blog posts.

About Article List element

The Article List is the go-to element to display your list of blog posts created by either GemPages or Shopify.

From the GemPages dashboard, open a template to edit. You can quickly find the Article List element on the left sidebar of the Editor, under the Article section. Drag & drop the element to any position you prefer then custom it by nesting more elements inside.



When clicking on the element, you will find its configuration options in the left sidebar, including the Settings and Design tabs.

The Article List element only shows your existing blog posts. If you don’t have one, check out this article for a detailed guide.

The Article Module and Child Elements

The Article List is a module that comes with various child elements to display the blog posts' information. . Defined by the (A) prefix, these child elements must be placed inside the Article Module to work correctly. 

Below is the list of the Article module's child elements:

  • (A) Title: Displays the title that the article comes in
  • (A) Excerpt: Add an excerpt of content as a preview to your blog post.
  • (A) Content: Add content as a description preview for your blog post.
  • (A) Image: Adds an image as an article banner. Fully customizable.
  • (A) Date: Inserts the date the article was published.

Configure the Settings Tab

Under the Settings tab, you will see effective parameters to control the appearance of your list of articles.

1. Blog

Hit “Pick a Blog” and choose one from the blog list to show on your page. 



The blog category data will be pulled from your Shopify Admin. Besides the default News category from Shopify, you can navigate to Shopify Admin > Online Store > Blog Posts to create a new category.



2. Articles per row

Select an option from the drop-down menu for the number of articles you would like to show on one row. To set different numbers across devices, please click on the Desktop icon on the right corner.


3. Number of articles

Adjust the slider or insert a number into the box to set how many posts you would like to show. 


The blog posts will be automatically sorted by date (newest to oldest).
By using the slider, you can adjust the number up to 20 articles. Feel free to input the larger number into the box to show more, however, please keep in mind that due to the limitation from Shopify, you can show a maximum of 50 articles on your page. 

Configure the Design tab

To style how the element looks, please navigate to the Design tab and follow the instructions in this article


Article List FAQs

  • "This field is dropped to Article Module only" error message: This happens when you drop a child element with the (A) prefix outside of an Article Module.
  • "Article not found" error message: There is no article available. Please check the visibility of your blog post under Shopify Admin > Blog posts or check out this article to create a new one. 

  • Can I apply a blog post template to others? GemPages only supports template assignments for product and collection pages, so each blog post should be built individually.


If you're interested in learning more about the powerful and user-friendly GemPages, feel free to explore the Help Center or get in touch with our delicate customer support via email or live chat.


Was this helpful?