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
4860 1001 1135

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

View solution in original post

Replies 11 (11)

LitExtension
Shopify Partner
4860 1001 1135

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
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
4860 1001 1135

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
Chaotic
Excursionist
23 0 14
LitExtension
Shopify Partner
4860 1001 1135

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
Scorpioqueen
Tourist
12 0 1

Does this work with dawn 7.0.1 

SCORPIOQUEEN WHOLESALE STORE
https://scorpioqueen-wholesale.myshopify.com
LitExtension
Shopify Partner
4860 1001 1135

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
Scorpioqueen
Tourist
12 0 1

I did

SCORPIOQUEEN WHOLESALE STORE
https://scorpioqueen-wholesale.myshopify.com
Mike5241
Excursionist
48 0 7

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
Excursionist
48 0 7

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