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

Highlighted
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
Highlighted
Shopify Partner
1866 181 748

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 and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
1 Like
Highlighted
Shopify Partner
2 0 0

This is not working.

0 Likes
Highlighted
Shopify Partner
1866 181 748

@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 and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
0 Likes
Highlighted
Shopify Partner
2 0 0
Highlighted
Shopify Partner
1866 181 748

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 and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
1 Like
Highlighted
New Member
3 0 0

will this work for minimal theme version 8?

0 Likes
Highlighted
Shopify Partner
31 0 29

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

2 Likes
Highlighted
Shopify Partner
22 0 2

Hello,
you can also try App Previous and Next Product.
This App generate previous/next buttons to redirect to previous/next product pages from the same collection.
You can set lot of options in App configuration, without coding skills.
App is free for first 7 days.

 

0 Likes
Highlighted
Explorer
51 1 16

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