Add previous I next buttons product page, Dawn version 15.2.0

Store Design
1

Since the new update, my code is not working anymore to show Prev I Next on top right on my product page. Only the “I” separating line is being shown.

I used the following steps:

  1. Go to Store Online-> theme → edit code

  2. Snippets/card-product.liquid

  3. update all ‘href="{{ card_product.url }}’ to ‘href="{{ card_product.url | within: collection | default: ‘#’ }}’. NOTE: added "| within: collection | default: ‘#’

  4. Go to sections/main-product.liquid

  5. Added code in line 77-88 code below to top of file:

———————————

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

What do I have to change? I saw in many other forums, people discussing the problems open their website with the password. Is that the way to go? Where do I do that so you can check?

My website: https://ivanjphotography.store/products/lights

Thank you so much.

2

Hi @Ivikon ,

Follow these steps:

  • Go to Your Shopify Admin:

    • Log in to your Shopify account.

  • Navigate to Online Store:

    • In the left-hand menu, click on Online Store.

  • Access Preferences:

    • Click on Preferences under the Online Store section.

  • Enable Password Protection:

    • Scroll down to the Password Protection section.
    • Check the box next to Enable password.
    • Enter a password in the provided field. This will be the password you’ll share with me.

  • Save Changes:

    • Click the Save button at the bottom of the page to apply the changes.
3

Dear Rajweb,

The website is free to visit, its not restricted. Thank you very much for your help in advance.

4

Hello @Ivikon ,
Since new update collection is not defined in section ‘main-product.liquid’.
You need to again define or assign a collection need pass it to snippet ‘card-product.liquid’ as currently object collection is blank or not defined in ‘main-product.liquid’.

5

Hi, thank you. could you please help me with the code, where should I paste my code from above? Another question :slightly_smiling_face: what do they use the card-product.liquid snippet? Thank you

6

Your custom code ‘Prev I Next’ how did you set collection? And share code of ‘main-product.liquid’ and ‘card-product.liquid’.

7

There is only one collection. The code of these are to long to be posted, can you access it through the website?

8

Share collection link.

9

https://ivanjphotography.store/collections/all

The Previous I Next button should appear on the product page.

10

Hello @Ivikon ,
Use this updated code


  

    {% if collections['all'].previous_product %}
      {{ '<< Previous' | link_to: collections['all'].previous_product.url, 'Previous product' }}
    {% endif %}

    {{ '|' }}

    {% if collections['all'].next_product %}
      {{ 'Next >>' | link_to: collections['all'].next_product.url, 'Next product' }}
    {% endif %}
11

Hi EvinceDev,

This code lets only appear the “I” line between the “Previous” and “Next” button. Maybe some addings?

12

Hello @Ivikon ,
Try this code


  

    {% if product.collections.size > 0 %}
      {% if product.collections[0].previous_product %}
        {{ '<< Previous' | link_to: product.collections[0].previous_product.url, 'Previous product' }}
      {% endif %}

      {{ '|' }}

      {% if product.collections[0].next_product %}
        {{ 'Next >>' | link_to: product.collections[0].next_product.url, 'Next product' }}
      {% endif %}
    {% endif %}
13

It didnt work. Not even the line is appearing. I included it once on top and the other time like the first code presented after line 77/after

in the “main-product.liquid”.

Should I try in ‘card-product.liquid’, someone mentioned:" Since new update collection is not defined in section ‘main-product.liquid’.
You need to again define or assign a collection need pass it to snippet ‘card-product.liquid’ as currently object collection is blank or not defined in ‘main-product.liquid’."

14

Maybe you have seen, at the moment, I dont have a collection defined, its simply products on the product page. Should I maybe define a collection?

15

Hello @Ivikon ,
Yes

16

Solution is the following (Use Chat GPT and edit a bit by yourself):

  1. add in card-product.liquid:

update all ‘href="{{ card_product.url }}’ to ‘href="{{ card_product.url | within: collection | default: ‘#’ }}’. NOTE: added "| within: collection | default: ‘#’

  1. before the code:

you add in main-product.liquid:

{% assign all_products = collections.all.products %}
{% assign current_product_handle = product.handle %}
{% assign product_handles = all_products | map: ‘handle’ %}

{% comment %} Manual index calculation to debug {% endcomment %}
{% assign product_index = -1 %}
{% for handle in product_handles %}
{% if handle == current_product_handle %}
{% assign product_index = forloop.index0 %}
{% endif %}
{% endfor %}

{% assign previous_index = product_index | minus: 1 %}
{% assign next_index = product_index | plus: 1 %}

{% if previous_index >= 0 %} {% assign previous_product_handle = product_handles[previous_index] %} {% assign previous_product = all_products | where: 'handle', previous_product_handle | first %} << Previous {% else %} << Previous {% endif %}

|

{% if next_index < product_handles.size %}
{% assign next_product_handle = product_handles[next_index] %}
{% assign next_product = all_products | where: ‘handle’, next_product_handle | first %}
Next >>
{% else %}
Next >>
{% endif %}