Add previous and next buttons to Dawn theme

[Chaotic]

Looking for some help adding the previous/next links to my product pages. If anyone has a solution that doesn't involve a paid app I'd appreciate any info. I have found several codes and tried them but I think they are outdated since Dawn has been updated.

Thanks in advance for any help.

[LitExtension · Accepted solution]

Hi @Chaotic,

Please follow the steps below:

- Step 1: Go to snippets > product-card.liquid file, find 'card-information__text h5' and change code:

Code: product_card_product.url | within: collection | default: '#'

- Step 2: Go to sections > main-product.liquid and add code here:

Code:

<div class="grid grid--1-col grid--2-col-tablet">
    <div class="grid__item">
      {% if collection.previous_product %}
        {{ 'Previous' | link_to: collection.previous_product.url, 'Previous product' }}
      {% endif %}
    </div>
    <div class="grid__item right">
      {% if collection.next_product %}
        {{ 'Next' | link_to: collection.next_product.url, 'Next product' }}
      {% endif %}
    </div>
  </div>

Hope it helps!

[Chaotic]

Thank you for that.. Just what I needed. I did alter the code a little to fit my site by moving the links together so they show up like:

<< Previous | Next >> 

   <div class="grid grid--1-col grid--1-col-tablet">
    <div class="grid__item right">
      {% if collection.previous_product %}
        {{ '<< Previous' | link_to: collection.previous_product.url, 'Previous product' }}
      {% endif %}
            {{ '|' }}
      {% if collection.next_product %}
        {{ 'Next >>' | link_to: collection.next_product.url, 'Next product' }}
      {% endif %}
      
      </div>
  </div>

Couldn't have done it without your help.

[Chaotic]

@LitExtension 

Any chance you have a solution for the new Dawn 3.0? Since the update all the code has changed and the previous/next doesn't work?

[LitExtension]

Hi @Chaotic,

Please send your site and if your site is password protected, please send me the password. I will check it.

[Chaotic]

https://patriotapparelshop.com/

[LitExtension]

Hi @Chaotic,

Go to sections > featured-collection.liquid file, find 'product_card_product' and add code:

Code:

collection: section.settings.collection,

Hope it helps!

[Scorpioqueen]

Does this work with dawn 7.0.1 

[LitExtension]

Hi @Scorpioqueen,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

[Scorpioqueen]

I did

[Mike5241]

Hi LitExtension,

I'm using Dawn 7.0, there's no snippets > product-card.liquid file, in which file I have to enter the following code from step 1?:

product_card_product.url | within: collection | default: '#'

Thank you very much,

Mike

[Mike5241]

Hello,

Thank you for the tip but how can I implement the above solution in Dawn 7.0? There's no snippets > product-card.liquid file.

Thank you very much,

Mike