Debut Theme - Please help with adding previous/next buttons or arrows to my product pages with collection.next_product and collection.previous_product

Yvonne_McKenzie
New Member
4 0 0

Hi all

I'm new to Shopify and am about to go live with my shop. I have set-up my shop with the Debut Theme.
I am fairly weak with actual coding, but when I can follow steps, I'm ok.

I would like to add previous/next arrows or buttons on my product pages.

I found a few old forums and one recent forum, but no complete answer.

Is someone able to provide me with the code information and the steps to take to allow for previous/next links on my product pages...including the recognition to grey out "previous" when first image of collection and "next" when last image of collection please.

Can you also please tell me where exactly I need to paste this code e.g. code document and lines?

Greatly appreciated, thank you.

0 Likes
Bo
Shopify Staff
Shopify Staff
1704 181 503

Hey there, Yvonne.

Bo here from Shopify Support.

That is a really great question and an even better idea. Reducing the number of clicks to get to the next product really makes the site more customer friendly and makes casual browsing that bit easier, which should, by all means, help increase your conversion rate.

I took a look into this and figured out how to add these buttons to the top of your product page so it shows up like so:

  • You will need to go to Online Store > Actions > Edit Code.
  • Open up the Sections folder and select product-template.liquid.
  • Scroll to line 40 and paste the following code:
    <div class="product-nav clearfix">
       {% if collection.previous_product %}
       <div class="left">{{ '&larr; Previous Product' | link_to: collection.previous_product }}</div>
       {% endif %}
       {% if collection.next_product %}
       <div class="right">{{ 'Next Product &rarr;' | link_to: collection.next_product }}</div>
       {% endif %}
     </div>       
    
  • Hit Save.

And that's it! You will now have Next/Previous buttons on each product page. If you would instead like the buttons to appear on the bottom of the product page I would recommend pasting the code on line 228 instead :)

Another feature that would make your site more user-friendly and accessible would be adding Alt Descriptions. Luckily adding an alt description is super easy to do and can be done so as outlined in this doc which can be found in our help center the home of all our help docs!

The long and short of it is that adding alt descriptions helps you rank better in Google because it is telling Google what your images are and so your products can show up in Google image searches. Having the descriptions there also makes your site more accessible for anyone with any kind of visual impairment as their screen readers can read what the image is for them. So while making your page that bit more accessible you are also improving your SEO. Here is a great guide to writing truly effective alt descriptions for your product images.

Let me know how this goes and if there is anything else I can help you with, I'm happy to help!

All the Best,
Bo

Bo | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Yvonne_McKenzie
New Member
4 0 0

Hi Bo

Thank you for the thorough instructions and tips/info. Greatly appreciated!

I just tried to follow your steps, but it doesn't like it! It doesn't want to save because of the following:

This file contains the following errors:

  • Line 48 — Liquid syntax error: Unknown tag 'endif'

Can you please help out to see what's wrong.

I just copied and pasted...

Thanks
Yvonne

0 Likes
Bo
Shopify Staff
Shopify Staff
1704 181 503

Thanks for getting back to me, Yvonne! 

I took a look into this and I found what appears to be the issue, the last {% endif %} tag was unnecessary. I have gone ahead and edited the code in my previous comment so you can simply copy that code again and paste it in the same space on your theme as previously mentioned! I really appreciate you pointing this out as it means we were able to rectify it for anyone else in our Forums Community who may need this guide. 

Let me know how it goes this time and if there is anything else I can help you with, I'm happy to help!

All the Best,

Bo

Bo | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Yvonne_McKenzie
New Member
4 0 0

Hi Bo

Thanks for getting back to me.

It worked, but two issues...

1. Both previous and next are on the left side of the screen (at the top).
Can "next" go to the right side of the screen please? 

 2. The bottom button is now not working properly. That should take people back to the collection, but it's going back to the previous image only. Without the previous/next button this does work. So for example if I'm in my third image, it goes back to the second image and then the first instead of back to the main collection overview.

See attached image that states "back to Kalbarri ..." (basically back to collection view) of which one I mean.

0 Likes
Bo
Shopify Staff
Shopify Staff
1704 181 503

Hey there, Yvonne! 

I checked in with our theme team to see how to best rectify this. It would appear that this level of customization would fall outside of our design policy. I was, however, able to find this app that will allow your customers to wipe through your products.

If this isn't satisfactory I would recommend reaching out to a Shopify Expert to build this for you. You could also check out the team at HeyCarson or Task Husky, they are experts that specialize in small tasks such as this! 

All the best,

Bo

Bo | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
select-prints
Tourist
3 0 2

In case it helps anyone else, I took this solution and edited it to get the desired result.

<div class="product-nav clearfix">
    <span style="float:left;">{% if collection.previous_product %}
       {{ '&larr; See Previous' | link_to: collection.previous_product }}
       {% endif %}</span>
	   <span style="float:right;">{% if collection.next_product %}
       {{ 'See Next &rarr;' | link_to: collection.next_product }}
         {% endif %}</span>
     </div>  
Carlos6
Shopify Partner
31 0 32

Here is how to do it step by step in a video

NF1
New Member
8 0 0

This fixes the left/right alignment, but then the bottom "Back to..." Button takes you to the last page rather than back to the main page.

0 Likes
Carlos6
Shopify Partner
31 0 32

Back button to takes you to the product page before the one you are in, depending on the collection order regardless of what page you are coming from. But if you want to come back home you can press the icon of your shop.

If you want to go back to the page you were before your browser should do the job.

If you want the back button to go back to the collection you just need to modify the code where it says "link_to: collection.previous_product".

If you want to do something different let me know, maybe I can help you.