Shopify is a popular platform for building online stores, and its Dawn theme is a great option for those who want a clean and modern design. One of the features that is often requested by store owners is the ability to add previous/next buttons to the product page, allowing customers to easily navigate between products in a collection. In this article, we will walk you through the steps to add previous/next buttons to the Shopify Dawn theme product page.
Step 1: Create a collection
To enable previous/next buttons, you need to have a collection that includes all the products you want to link together. For example, if you want to link all the products in a specific category, you can create a collection for that category. To create a new collection, go to the Shopify admin panel, click on “Products” and then “Collections”. Click on the “Create collection” button and enter the details for your new collection.
Step 2: Edit the product template
To add the previous/next buttons to the product page, you need to edit the product template. Go to the Shopify admin panel and click on “Online Store” and then “Themes”. Click on the “Actions” button and then “Edit code”. Navigate to “Sections” and then open “main-product.liquid”.
Step 3: Add the previous/next buttons
Add this code to the main.product.liquid file line 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 }}">
Previous
</a>
{%- endif -%}
{%- if next_product -%}
<a class="next-prev-icon next-icon" href="{{ next_product }}">
Next
</a>
{%- endif -%}
</div>Step 4: Style the buttons
and 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;
} 
