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]

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]

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 %}

    

        {% if collection and collection.previous_product %}
        
            
            Prev
        
        {% endif %}
        {% if collection and collection.next_product %}
        
            Next
            
        
        {% endif %}
    

{% 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

[phoenixwil]

Yup, that worked. Thank you for your awesomeness.

[Shereegraham]

Will the Next & Previous buttons work with the Honey Theme. My product pages are mostly collections.

I would like to add them right above the review hearts. Please advise.

[EBOOST]

Hi @Shereegraham ,

This is not free theme. I am not sure theme’s structure. So could you please share code of sections/main-product.liquid file. I help to add code for you.

[Arielle_5]

Any idea if this works with the canyone theme? if so where do I add this?

[EBOOST]

Hi @Arielle_5 ,

This theme is not free. So We are not sure this theme structure. Could you let us access your store? Or send theme to we can check it?