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

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
Shopify Partner
1486 103 299

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!

I turn coffee in to code - since 1998
0 Likes
New Member
2 0 0

This is not working.

0 Likes
Highlighted
Shopify Partner
1486 103 299

@vik7

 

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

I did mention the caveat emptor ;-)

I turn coffee in to code - since 1998
0 Likes
New Member
2 0 0
Shopify Partner
1486 103 299

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!

I turn coffee in to code - since 1998
0 Likes