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