In:
Post Tags

Display Most Recent Posts on Homepage (Stencil)

A lot of BigCommerce users want to add the most recent posts on their store’s homepage. It is a great way to promote your content and latest news to people visiting your site, since most people come to the site to browse your products and categories and usually spend much time going to the blog area. In this short tutorial we will show you how you can display the three most recent blogs on your homepage.

Step 1: Add Front-Matter Attribute

You will need to add a front-matter attribute to the top of your home.html, as shown in the screen below.

front-matter-blog

To do that navigate to Storefront Design -> My Themes -> Advanced -> Edit Theme Files. By default the home.html file will open in a tab.

And here is the code:

blog:
recent_posts:
limit: 3

Step 2: Create a Loop

Now that you have access to the blog posts, you will need to loop through each post and display the info that we need. In our case that will be the title of the article, which we will make clickable and a short summary. The code below needs to be added again to the home.html in the place where you want the recent blog posts to appear.

<div class=”blog”>
<h3>Latest Blog Posts</h3>
{{#each blog.recent_posts}}
<h5><a href=”{{url}}”>{{title}}</a></h5>
<p>{{summary}}</p>
{{/each}}
</div>

Say Hello!