Previous and next article buttons

Last updated: Feb 21, 2019

Merchants may want to add an extra layer of navigation to blog posts. Previous and next article buttons allow for an easy way to navigate to additional articles within the same blog.

Locate the file that contains your theme's blog article listing, and paste the code below into this file. Code can be placed in the most appropriate position (such as above the social sharing buttons).
Ensure code within schema tags is within the existing schema tags for the section.
By default, buttons for all articles will appear. Buttons can be enabled or disabled from the theme editor.

{%- if section.settings.blog_show_previous_and_next_buttons -%}
  <ul>
    <li>
      <a href="{{ blog.previous_article }}">Previous post</a>
    </li>
    <li>
      <a href="{{ blog.next_article }}">Next post</a>
    </li>
  </ul>
{%- endif -%}

{% schema %}
{
  "name": "Blog posts",
  "settings": [
    {
      "type": "checkbox",
      "id": "blog_show_previous_and_next_buttons",
      "label": "Show next/ previous buttons",
      "default": true
    }
  ]
}
{% endschema %}

Please note: We have intentionally limited CSS and JavaScript, and removed translation strings in order to keep these examples compatible with any theme. Any CSS we have included is for accessibility or rendering purposes.