Add previous and next buttons to Dawn theme

Store Design
1

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.

2 Likes
2

Hi @Chaotic ,

Please follow the steps below:

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

Screenshot.png
Screenshot.png1061×583 47.2 KB

Code: product_card_product.url | within: collection | default: ‘#’

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

Screenshot.png
Screenshot.png1093×605 57.6 KB

Code:


    

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

Hope it helps!

1 Like
3

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


    

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

Couldn’t have done it without your help.

1 Like
4

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

5

Hi @Chaotic ,

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

1 Like
6

https://patriotapparelshop.com/

7

Hi @Chaotic ,

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

Screenshot.png
Screenshot.png1172×649 70.3 KB

Code:

collection: section.settings.collection,

Hope it helps!

8

Does this work with dawn 7.0.1

9

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.

10

I did

11

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

12

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