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

[Alice_Fais]

Hello

I have Brooklyn theme, I'd like to add a button under the product description to link next/previous product page.

I'm ready to edit the code.

Please help me

[KarlOffenberger]

Hi Alice,

You can do that by adding following

{% if collection.previous_product %}
  {{ 'Previous' | link_to: collection.previous_product.url, 'Previous product' }}
{% endif %}

{% if collection.next_product %}
  {{ 'Next' | link_to: collection.next_product.url, 'Next product' }}
{% endif %}

which is also documented here and here for previous and next respectively.

This will only work for products pages that are being viewed within a collection URL.

Best wishes!

[vik7]

This is not working.

[KarlOffenberger]

@vik7

This will only work for products pages that are being viewed within a collection URL.

---

I did mention the caveat emptor 😉

[vik7]

https://tsnmisupply.com/products/tsnmi-dip-dye-hoodie this is my product url.

[KarlOffenberger]

Your site preview is password protected.

But you can already tell from your URL that you are accessing the product directly via its product URL which is what I said won't work because that way you won't know from what collection you came from to view that product and thus you cannot possibly know what the next or previous products in that collection are.

If your product is part of a collection, then navigate to that collection and then view the product. The URL would look something like this

https://store-name.myshopify.com/collections/my-collection-name/products/my-product-name

Instead of what you have now

https://store-name.myshopify.com/products/my-product-name

Alternatively, the code could be re-written only to consider the ALL collection which is always available - but that would be confusing to users IMO.

Best wishes!

[P_MmM]

will this work for minimal theme version 8?

[Carlos6]

Here is how to do it step by step in a video

[Jeremy369]

Can you please direct where I can add your code to?

my goal is to allow people to shift product views within the same collection.

thanks in advance 🙂

[ahmadrsslan]

Sir if i want to put  this back next link in the sub menu page

how to do that plz

[Hannahrose]

Hi, where exactly do you add the code for the next and previous links?

[kub]

Try this is from debut theme should work just check out where to put it. it may mess up layout when you don't have previous/next products.

https://community.shopify.com/c/Shopify-Design/Debut-Theme-Please-help-with-adding-previous-next-but... 

If somebody can help me how to modify the code in way that it does not mess up the layout if there is no next or previous product would be nice

[mariet]

The youtube video above is beyond helpful and helped me add the previous/next prompts on my site! 

Here is the code: 

<div class="product-nav clearfix">
           <span style="float:left;">{% if collection.previous_product %}
       {{ '&larr; See Previous' | link_to: collection.previous_product }}
       {% endif %}</span>
	   <span style="float:right;">{% if collection.next_product %}
       {{ 'See Next &rarr;' | link_to: collection.next_product }}
         {% endif %}</span>
     </div> 
    

Just follow the youtube instructions and it should work for you!

I am using the "Simple" theme. 

[Rubsw]

Hi all,

Tried all the mentioned methods on this forum but they have the same negative effect:

The "back to the collection" button is not only directing to the previously viewed product page instead of the collection page.

Anyone has a solution for that?

Thank you!

[ayellowgiraffe]

I also noticed that the Back to "Collection" doesn't work at the bottom now doesn't work properly.

[A7Sierra]

Is there any idea how to make it functional if the user visiting the product directly?

[websensepro]

Hello Alice! You can try this code it will work for you

Add this code in main-product.liquid file line number 33 :

{%- liquid
assign previous_product = collection.previous_product
assign next_product = collection.next_product
if previous_product or next_product
else
assign collectionList = product.collections[0].handle
assign previous_product = nil
assign next_product = nil
assign last = collections[collectionList].products_count
for p in collections[collectionList].products
if p.handle == product.handle
assign prev = forloop.index | minus: 2
assign next = forloop.index
if prev >= 0
assign previous_product = collections[collectionList].products[prev].handle
endif
if last >= next
assign next_product = collections[collectionList].products[next].handle
endif
break
endif
endfor
endif
-%}

<div id="nextpre">
{%- if previous_product -%}
<a class="next-prev-icon prev-icon" href="{{ previous_product }}">
<---------
</a>
{%- endif -%}
{%- if next_product -%}
<a class="next-prev-icon next-icon" href="{{ next_product }}">
--------->
</a>
{%- endif -%}
</div>

Add CSS in the base.css file :

#nextpre{
display: flex;
justify-content: flex-end;
margin-right: 6%;
}
.next-prev-icon{
margin: 0 0 20px 20px;
padding: 5px 10px;
font-weight: 500;
color: #fff;
box-shadow: #0003 0 20px 30px;
background-color: #000;
border-radius: 10px;
text-decoration: unset;
width: 100px;
text-align: center;
font-size: 15px;
}

[rwestcott]

Question: DO you know if these HTMLs would be able to be added to a Crave 3.0.0 theme?