Highlight Latest Post with Shopify Pagination

The trick in getting this to work and still keep the pagination links up-to-date is…tricky. The solution is in offsetting the amount of “latest posts” you want to highlight on the first page in the for loop. Maintaining the limit in the paginate function makes it so the page links stay relevant.

In this example,

• I’m highlighting the first post on page 1 as full-width
• Keeping a grid of subsequent posts to 3 x 3 totaling 9 posts

To achieve this I have to

1. Grab the latest article from blog.articles
2. Offset pagination forloop by 1 (articles being highlighted)
3. Multiply limit by paginate.current_page to grab the last post the forloop offset left out

The Code

{%- assign latest_article = blog.articles[0] -%}
{%- assign all_articles = blog.articles -%}
{%- assign limit = 9 -%}
{%- assign offset = 1 -%}
{%- paginate blog.articles by limit -%}
  {%- if paginate.current_page == 1 -%}
    {%- render 'latest-article-card', article: latest_article -%}
  {%- endif -%}
  <div class="row">
    {%- for article in blog.articles offset: offset -%}
      <div class="col-4">
          {%- render 'article-card', article: article -%}
      </div>
    {%- endfor -%}
    <div class="4">
      {%- assign offset = limit | times: paginate.current_page -%}
      {%- render 'article-card', article: all_articles[offset] -%}
    </div>  
  </div>
{%- endpaginate -%}