How to: add next/previous links on the product page

This guide will help you to add next/previous links to your product page. In this way, you will be able to navigate through the different products of each collection.

Example of the next/previous buttons' functionality

1. Access your themes section
2. Open the Loft theme code
3. Add code

1. Access your themes section

Login to your Shopify admin, and then click “Online Store” (on the left side of the admin). This takes you to the “themes” area of your Shopify store.

Example themes section

2. Open the Loft theme code

Next, click the button that says “Actions” - followed by “Edit code” which will load the live code editor. It consists of a left hand sidebar, which lists all the files on Loft, along with a right hand code editing panel.

Shopify code editor

3. Add code

You need to add a few lines of code to the product-details.liquid by doing the following steps:

1. Search for the "Snippets" folder
2. Open the "product-details.liquid" file 
3. On line 32, below the "{%endif%}", add the following block of code

   {% assign nextprevCount = 0 %}
   {% if collection.previous_product%}
   {% assign nextprevCount = nextprevCount | plus: 1 %}
   <strong><span> <a href="{{collection.previous_product.url}}" class="nextprev">&lt;Previous Product</a></span></strong>
   {% endif %}
   
   {% if collection.next_product %}
   {% assign nextprevCount = nextprevCount | plus: 1 %}
   <strong><span> <a href="{{collection.next_product.url}}" class="{% if nextprevCount == 2%}leftmarg{%endif%} nextprev">Next Product&gt;</a></span></strong>
   {% endif%}

   Before

   

   After

    
4. Add the following block of code to the end of the file

   <style>                                                                                                                              .nextprev {
     text-decoration: none;
     color: black;
     display: inline-block;
     margin-top: 15px;
     }
     .leftmarg{
     margin-left: 2em;
     }                                                                                                                                      .hovsymb:hover{
     color: #ea9e33;
     }                                                                                                                        </style> 

5. Click "Save"