Quick and easy video guide to add latest blog post code at bigcommerce stencil theme homepage.
Paste below HTML code at before {{/partial}} at home.html
<section class="blog-homepage"> <h2 class="page-heading">{{lang 'blog.recent_posts' }}</h2> <ul class="blogGrid--maxCol4" itemscope itemtype="http://schema.org/Blog"> {{#each blog.recent_posts}} <li> <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting" > <figure> <a href="{{url}}" itemprop="url"> <img src="https://cdn11.bigcommerce.com/s-h7ti6c9310/stencil/0fbdd750-6e7a-0136-6996-71bd3cb7e197/e/435f9b30-2057-0137-158b-0242ac110019/img/loading.svg" class="lazyload" data-src="{{getImage thumbnail 'zoom_size'}}" alt="{{thumbnail.alt}}" width="1280" height="1280" itemprop="image" itemscope itemtype="https://schema.org/ImageObject" /> </a> </figure> <h3 title="{{title}}" itemprop="headline"> <a href="{{url}}" itemprop="url">{{title}}</a> </h3> <p itemprop="description">{{summary}}</p> </article> </li> {{/each}} </ul> </section>
Paste below SCSS at theme.scss last line.
.blog-homepage { margin: 50px 0px 0px; clear: both; ul { list-style: none; margin-left: 0; margin: 0 -0.75rem; max-width: none; width: auto; font-size: 0; margin-bottom: 1.5rem; li { @include breakpoint("medium") { width: 33.33%; } padding-left: 0.75rem; padding-right: 0.75rem; width: 100%; float: none; display: inline-block; font-size: 1rem; vertical-align: top; a { font-weight: 700; text-decoration: none; } } } }