Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
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:
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!
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:
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!
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.
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?
Hi @Chaotic,
Please send your site and if your site is password protected, please send me the password. I will check it.
Hi @Chaotic,
Go to sections > featured-collection.liquid file, find 'product_card_product' and add code:
Code:
collection: section.settings.collection,
Hope it helps!
Does this work with dawn 7.0.1
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.
I did
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
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
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025