How to display Next AND Previous Product Links within a collection?

Shopify Expert
21 0 3

I have the following code on my Product.liquid page, displaying a Next and/or Previous links to the next/prev product within the collection.

{% if collection %}
{% if collection.previous_product or collection.next_product %}
  <p>
    {% if collection.previous_product %}
    {% capture prev_url %}{{ collection.previous_product}}#content{% endcapture %}
        {{ 'products.general.previous_product_html' | t | link_to: prev_url }} &#47;
    {% endif %}

    {% if collection.next_product %}
    {% capture next_url %}{{ collection.next_product}}#content{% endcapture %}
       {{ 'products.general.next_product_html' | t | link_to: next_url }}
    {% endif %}
  </p>
{% endif %}
{% endif %}

I would both the Next and Previous links to display at all times, and to grey out the Next link if there are no more Next links and vice versa with the Previous. 

Any ideas how I would achieve this? Thank you in advance!

 

 

 

0 Likes
Astronaut
1890 1 393

Try this:

{% if collection %}
{% if collection.previous_product or collection.next_product %}
  <p>
    {% if collection.previous_product %}
      {% capture prev_url %}{{ collection.previous_product}}#content{% endcapture %}
      {{ 'products.general.previous_product_html' | t | link_to: prev_url }}
    {% else %}
      {{ 'products.general.previous_product_html' | t }}
    {% endif %}
    |
    {% if collection.next_product %}
      {% capture next_url %}{{ collection.next_product}}#content{% endcapture %}
      {{ 'products.general.next_product_html' | t | link_to: next_url }}
    {% else %}
      {{ 'products.general.next_product_html' | t }}
    {% endif %}
  </p>
{% endif %}
{% endif %}

 

1 Like
Shopify Expert
21 0 3

That did the trick, thanks very much!

0 Likes
Tourist
22 0 1

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