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

Highlighted
Excursionist
42 0 10

Hi . I solved the problem in debut that the return link on the bottom of the page gets back to the previous product and not to the collection as it would be logic.

 

this is the original code of the botton in product.liquid

{% if collection %}
<div class="text-center return-link-wrapper page-width">
<a href="{{ collection.url }}" class="btn btn--secondary btn--has-icon-before return-link">
{% include 'icon-arrow-left' %}
{{ 'products.product.back_to_collection' | t: title: collection.title }}
</a>
</div>
{% endif %}

just take put the 'return-link' of the code and it works, ATTENTION !! i don't know what side effect this has so it's on your own risk. The code will be like this

{% if collection %}
<div class="text-center return-link-wrapper page-width">
<a href="{{ collection.url }}" class="btn btn--secondary btn--has-icon-before ">
{% include 'icon-arrow-left' %}
{{ 'products.product.back_to_collection' | t: title: collection.title }}
</a>
</div>
{% endif %}

 And if you want to get the arrows to fit with debut template i fixed the code like this without words, so you can use them without language translation if you have a multilanguage site (if somebody know how to insert the system string to get some words without hardcoding them i would be happy to know about)

 

this is my code for the product.template.liquid und line 40 so they keep on the top of the picture of you product

<div class="product-nav clearfix">
    {% if collection.previous_product %}
	   <div style="float:left;"> <a href="{{ collection.previous_product }}" class="btn btn--secondary btn--has-icon-before">
         {% include 'icon-arrow-left' %}</a>
         {% endif %}
     </div>  
  {% if collection.next_product %}
	   <div style="float:right;"> <a href="{{ collection.next_product }}" class="btn btn--secondary btn--has-icon-before">
         {% include 'icon-arrow-right' %}</a>
         {% endif %}
     </div>  
      </div>  

 

0 Likes
Highlighted
Tourist
4 0 0

This video was very very helpful and I just used it on my site using the "Simple" theme & it worked like a charm. 

 

https://www.youtube.com/watch?time_continue=70&v=-rLvja01nYM&feature=emb_title

 

This is the code :

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

Hope this helps! 

0 Likes