Categories
blog code cornerstone

How to display latest blog post on homepage bigcommerce theme?

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;
        }
      }
    }
  }