Solved

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

Stephen_Jin
Shopify Partner
22 0 8

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: 

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

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

<div>
{% if product.collections[0].next_product %}
{% assign nextprevCount = nextprevCount | plus: 1 %}
<strong><span> <a href="{{product.collections[0].next_product.url}}" class="{% if nextprevCount == 2%}leftmarg{%endif%} nextprev">Next Product&gt;</a></span></strong>
{% endif%}
</div>

 

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

Accepted Solution (1)
AvadaCommerce
Shopify Partner
3879 839 945

This is an accepted solution.

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

I hope it would help you.

 

banned

View solution in original post

Replies 15 (15)

AvadaCommerce
Shopify Partner
3879 839 945

Hi @Stephen_Jin ,

 

You try below code:

 

{%- liquid
    assign previous_product = collection.previous_product
    assign next_product = collection.next_product
-%}
{%- 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 -%}

 

I hope it would help you.

banned
Stephen_Jin
Shopify Partner
22 0 8

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

AvadaCommerce
Shopify Partner
3879 839 945

This is an accepted solution.

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

I hope it would help you.

 

banned
Stephen_Jin
Shopify Partner
22 0 8

@AvadaCommerce  Thank you so much! It worked!

Madhvi1
Tourist
15 0 1

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.

Stephen_Jin
Shopify Partner
22 0 8

@Madhvi1 

 

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

Madhvi1
Tourist
15 0 1

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

Screenshot 2022-02-21 at 2.43.18 PM.png

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.

 

 

Stephen_Jin
Shopify Partner
22 0 8

@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 🙂
Madhvi1
Tourist
15 0 1

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

rayhuffman
Visitor
3 0 0

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

Madhvi1
Tourist
15 0 1

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

<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>

 

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

rayhuffman
Visitor
3 0 0

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

Madhvi1
Tourist
15 0 1

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.

Stephen_Jin
Shopify Partner
22 0 8

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

Brandingplusme
Tourist
10 0 1

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