Re: Add previous and next buttons to Dawn theme

Solved

Add previous and next buttons to Dawn theme

Chaotic
Excursionist
23 0 14

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.

Accepted Solution (1)

LitExtension
Shopify Partner
4896 1004 1176

This is an 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:

Screenshot.png

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

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

Screenshot.png

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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com

View solution in original post

Replies 11 (11)

LitExtension
Shopify Partner
4896 1004 1176

This is an 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:

Screenshot.png

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

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

Screenshot.png

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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com
Chaotic
Excursionist
23 0 14

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
Excursionist
23 0 14

@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
Shopify Partner
4896 1004 1176

Hi @Chaotic,

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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com
Chaotic
Excursionist
23 0 14
LitExtension
Shopify Partner
4896 1004 1176

Hi @Chaotic,

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

Screenshot.png

Code:

collection: section.settings.collection,

Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com
Scorpioqueen
Tourist
12 0 1

Does this work with dawn 7.0.1 

SCORPIOQUEEN WHOLESALE STORE
https://scorpioqueen-wholesale.myshopify.com
LitExtension
Shopify Partner
4896 1004 1176

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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Contact us:
- Email: contact@litextension.com
Scorpioqueen
Tourist
12 0 1

I did

SCORPIOQUEEN WHOLESALE STORE
https://scorpioqueen-wholesale.myshopify.com
Mike5241
Explorer
58 0 13

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
Explorer
58 0 13

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