Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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.
This is an 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 %}
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.
This is an 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 %}
Thank you so much!
Thank you so much! It worked for me☺️
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.
This code show next previous button at the top of product page.
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.
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.
Hi @mega-licios,
You need update product url as well.
Will this work for Enterprise theme?
Hi,
It works for all themes.
Is there a way to change the chevron icon colour?
Thanks 🙂
You can add code below to change color icon to red
.next-prev-icons svg path { fill: red;}
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?
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>
Yup, that worked. Thank you for your awesomeness.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025