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

Alice_Fais
New Member
2 0 0

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

0 Likes
KarlOffenberger
Shopify Partner
1868 183 818

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!

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
vik7
Shopify Partner
2 0 0

This is not working.

0 Likes
KarlOffenberger
Shopify Partner
1868 183 818

@vik7

 

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

I did mention the caveat emptor ;-)

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
0 Likes
vik7
Shopify Partner
2 0 0
KarlOffenberger
Shopify Partner
1868 183 818

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!

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
P_MmM
New Member
3 0 0

will this work for minimal theme version 8?

0 Likes
Carlos6
Shopify Partner
31 0 33

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

kub
Pathfinder
83 2 27

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

0 Likes
mariet
Tourist
4 0 1

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. 

0 Likes