Moving the position of "previous and next product buttons" on top of product page. boundless theme

New Member
9 0 0

Hello,

Can someone please help me with this. I successfully added a "prev product" and "next product" button to my product-template.liquid and when i preview my site, it works. 

However, I want the previous product button to be on the left side of the screen, and the next product button to be on the right side. I don't know how to get that to work. 

This is the code I added to my product-template.liquid 

{% if collection %}
    <div class="collection-previous_product">
      <div class="collection-next_product">
        <br
        <p> <a href="{% if collection.previous_product %}{{ collection.previous_product }}{% endif %}" title="PREVIOUS" class="btn">Previous Product</a>
         	<a href="{% if collection.next_product %}{{ collection.next_product }}{% endif %}" title="NEXT" class="btn">Next Product</a>
      </p></div>
        
{% endif %}

Right now both buttons are sequestered to the left of the page. I would like the "next product" button to move to the right. I will appreciate any help with this. I am using the boundless theme but I modified my product page. Below is a screenshot of the product page when i preview it.

thanks everyone.

0 Likes

Try this. 

{% if collection %}
  <div style="overflow:hidden">
    <a href="{% if collection.previous_product %}{{ collection.previous_product }}{% endif %}" 
         title="PREVIOUS" class="btn" style="float:left">Previous Product</a>
    <a href="{% if collection.next_product %}{{ collection.next_product }}{% endif %}" title="NEXT" 
         class="btn" style="float:right">Next Product</a>    
  </div>
        
{% endif %}

 

Available for hiring. Inbox me lixonic[at]gmail[dot]com
0 Likes
New Member
9 0 0

worked perfectly!!! Thank you :D

0 Likes
Tourist
22 0 1

Hello,
you can also try App Previous and Next Product.
This App generate previous/next buttons to redirect to previous/next product pages from the same collection.
You can set lot of options in App configuration, without coding skills.
App is free for first 7 days.

0 Likes