Dawn Theme: How to add "view next product" button on product page

Store Design
1

In my case, each product only belongs to 1 collection, so I can access the collection and go back to the collection page by following code:


{{ 'Back to Collection' | link_to: product.collections[0].url }}

However, I cannot access the next product in the same collection using following code:


{% if product.collections[0].next_product %}
{% assign nextprevCount = nextprevCount | plus: 1 %}
 **Next Product>**
{% endif%}

“product.collections[0].next_product” is not working as no link is shown on any product page of that same collection. The collection contains 5 products.

Also, if I remove the {% if %} and {% endif %} tag, the link appears, however it appoints to current product page, not any other products.

2

Hi @Stephen_Jin ,

You try below code:

{%- liquid
    assign previous_product = collection.previous_product
    assign next_product = collection.next_product
-%}
{%- if previous_product -%}
            
                Previous
            
        {%- endif -%}
        {%- if next_product -%}
            
                Next
            
        {%- endif -%}

I hope it would help you.

3

@AvadaCommerce

Thanks for your help. The code did not work, I think it might be because the url is in the form of

https://store-name.myshopify.com/products/product-name

not

https://store-name.myshopify.com/collections/collection-name/products/product-name

Therefore, collection in collection.previous_product cannot be recognized?

Could you please help a bit further? Thanks again.

4

Hi @Stephen_Jin ,

You try replace below code:

{%- 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
-%} 
{%- if previous_product -%}
            
                Previous
            
        {%- endif -%}
        {%- if next_product -%}
            
                Next
            
        {%- endif -%}

I hope it would help you.

5

@AvadaCommerce Thank you so much! It worked!

6

Hi @AvadaCommerce and @Stephen_Jin

I want to execute previous product and next product link on all my product pages. Please let me know which file should I paste the above mentioned code.

Thanks a lot in advance.

7

@Madhvi1

If you are using Dawn theme, you can add the code in sections > main-product.liquid

8

@Stephen_Jin the code worked but it is currently showing like this.

Screenshot 2022-02-21 at 2.43.18 PM.png
Screenshot 2022-02-21 at 2.43.18 PM.png2624×1262 349 KB

Refer small purple color “previous” and “next” icons.

Is there a way to make them as arrow on both sides of the page placed either at the top or middle of the page.

9

I tried this code and got the Prev Next to show on the product page within the collection. The problem is the “Next” product after 2 or 3 clicks is not the Next product and not even in the same collection. The code was added after the {% endschema %} in the main-product.liquid page. Hopefully you can figure out a way to correct - this would be so very helpful not only for my website but I suspect many users. Thank you so much. Ray

10

Hey @rayhuffman

It works fine for me only if a product is part of only one collection. If same product is part of multiple collection it can show any product from those multiple collections.

Please paste this code on top of the file main-product.liquid, just below the following line of code

Position of the icon will be as shown in the top left corner of the screen , just below the header. Refer screenshot shared below.

Screenshot 2022-02-22 at 9.51.51 AM.png
Screenshot 2022-02-22 at 9.51.51 AM.png2838×1270 398 KB

11

@Madhvi1

In regards to where to insert the code, I would recommend:

  • firstly duplicate your theme.
  • Access main-product.liquid the duplicated theme
  • Try insert the code at different location to play with it a bit. This way you will have a better view of the structure of main-product.liquid. Indeed it’s a very large file :slightly_smiling_face:
12

@Stephen_Jin Actually that’s better advice. I played around with the code and then only figured out where I should put it.

13

I pasted this code to the main-product.liquid and everything appears to be working at first. The problem is this: if a product belongs to more than one collection (which many of mine do), the “Next” click will go to a product and as you continue to hit next it is pulling products from different collections. Any suggestion on how to resolve?

Thank you so much.

Ray

14

Hey @rayhuffman ,

Even I have many products belonging to multiple collections. But I have not figured it out yet. Hopefully someone will help us here.

15

@rayhuffman @Madhvi1

In my use case, each product only belongs to 1 collection.

Just some thought here, maybe incorrect. Since {{ product.collections }} returns an array of collections. Maybe you can check if it’s possible to maintain the order of collections in that array? For example, make sure {{ product.collections[0] }} is the “target collection”

16

Hello dear

how we can make space between previous and next for example to put the next on right of product image and previous on the left