Add Next Previous Button On Product Page – Dawn Theme

Adding a “Next” and “Previous” button to your product pages can be a great way to keep customers engaged with your products. This video shows you how to add these buttons using the Dawn Theme for Shopify. Adding a Next Previous button to the product page of your Shopify store is a great way to make it easier for customers to browse through your products. I will show you how to add this button using the Dawn theme in this video.

Add this code in main-product.liquid file line number 33 :

{%- liquid
    assign previous_product = collection.previous_product
    assign next_product = collection.next_product
    if previous_product or next_product
    else
    	assign collectionList = product.collections[0].handle
        assign previous_product = nil
        assign next_product = nil
        assign last = collections[collectionList].products_count
        for p in collections[collectionList].products
        	if p.handle == product.handle
            	assign prev = forloop.index | minus: 2
                assign next = forloop.index
                if prev >= 0
                  assign previous_product = collections[collectionList].products[prev].handle
                endif
                if last >= next
                  assign next_product = collections[collectionList].products[next].handle
                endif
                break
            endif
        endfor
    endif
-%}       
            
<div id="nextpre">
    		{%- if previous_product -%}
            <a class="next-prev-icon prev-icon" href="{{ previous_product }}">
               <---------
            </a>
        {%- endif -%}
        {%- if next_product -%}
            <a class="next-prev-icon next-icon" href="{{ next_product }}">
               --------->
            </a>
        {%- endif -%}
    </div>

Add CSS in the base.css file :

#nextpre{
    display: flex;
    justify-content: flex-end;
    margin-right: 6%; 
} 
.next-prev-icon{
        margin: 0 0 20px 20px;
    padding: 5px 10px;
    font-weight: 500;
    color: #fff;
    box-shadow: #0003 0 20px 30px;
    background-color: #000;
    border-radius: 10px;
    text-decoration: unset;
    width: 100px;
    text-align: center;
    font-size: 15px;
}  
  


4.2/5 - (51 votes)

About

7 thoughts on “Add Next Previous Button On Product Page – Dawn Theme”

    1. Replace CSS with following:

      .next-prev-icon {
      margin: 0 0 16px 23px;
      padding: 5px 5px;
      font-weight: 500;
      color: #fff;
      box-shadow: #0003 0 20px 30px;
      background-color: #000;
      border-radius: 10px;
      text-decoration: unset;
      width: 100px;
      text-align: center;
      font-size: 15px;
      }

  1. Hello, is there a way to soften the loading of the product image when moving through products using the previous / next buttons? The products are popping in rather abruptly. Thank you.

  2. I really appreciate this!!! One question: Is there any way to put these buttons to the left and to the right? Like the previous button to the left and the next button to the right side? Again thanks!!

Leave a Comment

Your email address will not be published. Required fields are marked *