Solved

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

JPSilver
Visitor
3 0 0

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!

 

Accepted Solutions (2)

Arif_Shopidevs
Shopify Partner
133 18 13

This is an 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.

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers

View solution in original post

EBOOST
Shopify Partner
817 224 251

This is an accepted solution.

Hi,

May I suggest to update code these steps:

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

EBOOST_1-1672356985580.png

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

 

Hope can help


If you find my reply helpful, please hit Like and Mark as Solution


https://www.eboosttech.net


EBOOST

View solution in original post

Replies 7 (7)

Arif_Shopidevs
Shopify Partner
133 18 13

This is an 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.

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers

EBOOST
Shopify Partner
817 224 251

This is an accepted solution.

Hi,

May I suggest to update code these steps:

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

EBOOST_1-1672356985580.png

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

 

Hope can help


If you find my reply helpful, please hit Like and Mark as Solution


https://www.eboosttech.net


EBOOST
JPSilver
Visitor
3 0 0

Thank you so much! 

JPSilver
Visitor
3 0 0

Thank you so much!  It worked for me☺️

mega-licios
Tourist
3 0 2

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
Shopify Partner
133 18 13

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

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
EBOOST
Shopify Partner
817 224 251

Hi @mega-licios,

You need  update product url as well.

EBOOST_0-1715685441267.png

 

Hope can help


If you find my reply helpful, please hit Like and Mark as Solution


https://www.eboosttech.net


EBOOST