Put in Previous / Next navigation buttons on product page to get to next/previous product?

[JPSilver]

Hi, 

I am wondering how to put  Previous / Next navigation buttons on product page to get to next/previous product so my customer can click to the next product without having to go back to the collection? Ideally above the image and under the breadcrumb (or on the breadcrumb line) 

I am aware it will only work for products pages that are being viewed within a collection URL. Which I think I have! 

I have the Vision Theme 

I am good with inputting a CSS code. Any help would be very much appreciated!

[Arif_Shopidevs · Accepted solution]

For accessing the next or previous product, different logics can be used. Some utilize identification-based methods, while others opt for similar collections to determine the next or previous product ID. Which approach do you prefer?

Also, which theme are you currently working on? Knowing this will make it easier for me to provide a suitable response.

[Arif_Shopidevs · Accepted solution]

For accessing the next or previous product, different logics can be used. Some utilize identification-based methods, while others opt for similar collections to determine the next or previous product ID. Which approach do you prefer?

Also, which theme are you currently working on? Knowing this will make it easier for me to provide a suitable response.

[EBOOST · Accepted solution]

Hi,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

2. Snippets/card-product.liquid

3. update all 'href="{{ card_product.url }}' to 'href="{{ card_product.url | within: collection }}"'. NOTE: added "| within: collection"

4.  Go to sections/main-product.liquid

5. Add code below to top of file

{% if collection.previous_product or collection.next_product %}
<div class="next-prev-product page-width">
    <div class="next-prev-icons">
        {% if collection and collection.previous_product %}
        <a class="prev-icon" href="{{ collection.previous_product }}" data-next-prev-icon data-target="#prev-product-modal" aria-label="link">
            <svg viewBox="0 0 551.13 551.13" class="icon icon-chevron-left" id="icon-chevron-left"><path d="m189.451 275.565 223.897-223.897v-51.668l-275.565 275.565 275.565 275.565v-51.668z"></path></svg>
            <span>Prev</span>
        </a>
        {% endif %}
        {% if collection and collection.next_product %}
        <a class="next-icon" href="{{ collection.next_product }}" data-next-prev-icon data-target="#next-product-modal" aria-label="link">
            <span>Next</span>
            <svg viewBox="0 0 551.13 551.13" class="icon icon-chevron-right" id="icon-chevron-right"><path d="m361.679 275.565-223.896 223.897v51.668l275.565-275.565-275.565-275.565v51.668z"></path></svg>
        </a>
        {% endif %}
    </div>
</div>
<style>
  .next-prev-product .next-prev-icons { display: flex; justify-content: space-between;}
  .next-prev-product .next-prev-icons  svg { width: 20px; height: auto;}
  .next-prev-product .next-prev-icons a {
    color: #000;
    display: flex;
    text-decoration: none;
  }
</style>
{% endif %}

[JPSilver]

Thank you so much! 

[JPSilver]

Thank you so much!  It worked for me☺️

[mega-licios]

Does this code provide a side bar or a “next product” button on each individual product? I added it to my store and it didn’t do anything. 

[Arif_Shopidevs]

This code show next previous button at the top of product page.

[EBOOST]

Hi @mega-licios,

You need  update product url as well.

[FeelingLikeASir]

Will this work for Enterprise theme?

[EBOOST]

Hi,

It works for all themes.

[Steve_wine]

Is there a way to change the chevron icon colour? 

Thanks 🙂

[EBOOST]

You can add code below to change color icon to red

.next-prev-icons svg path { fill: red;}

[phoenixwil]

It works but needs a slight tweak. The problem is, if it is the first product in the collection, Next is on the left side but it should be on the right side with Prev on the left side and greyed out/hidden. If you go to next product, Next is on the right side and Prev is on the left side (as it should be). The last product in the collection is fine since Prev is on the left. How to keep Next on the right side when it is the first product in the collection?

[EBOOST]

Hi @phoenixwil,

You can add code below to top sections/main-product.liquid file

<style>

  .next-prev-product .next-prev-icons a.next-icon { margin-left: auto;}
</style>

[phoenixwil]

Yup, that worked. Thank you for your awesomeness.