How can I add prev next arrows on my product page using the Craft theme?

Store Design
1

Hi,

I am wanting to put the previous and next arrows to navigate through the previous and next products respectively.

I am using the Craft theme.

Can anyone help me do this?

Thanks

Niki

2

Hi @fermeindia

It will only work when url contains collection handle

Kani_0-1661590005460.png
Kani_0-1661590005460.png843×302 18.4 KB

1: Online store > themes > Actions > Edit code > sections > main-product.liquid

2: paste code at the position you want to place

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

Thank you but how do we add the collection handle to the product URL?

4

when you click product on collection page, it usually bring the collection handle together

if not you can add it like this

for example in Craf theme

1: Online store > themes > Actions > Edit code > Snippets > card-product.liquid

2:

replace

{{ card_product.url }}

with

{{ card_product.url | within: collection }}
5

Hello,

I tried both solutions but still, I can’t get the collection in the product URL, and (maybe that’s why) no display of the next & previous buttons.

Any clue as to where I am wrong?

Thanks in advance.

6

I did test it on Craft theme.

maybe share your ‘card-product.liquid’……

7

{% comment %}
Renders a product card

Accepts:

  • card_product: {Object} Product Liquid object (optional)
  • media_aspect_ratio: {String} Size of the product image card. Values are “square” and “portrait”. Default is “square” (optional)
  • show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
  • show_vendor: {Boolean} Show the product vendor. Default: false
  • show_rating: {Boolean} Show the product rating. Default: false
  • extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
  • lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
  • show_quick_add: {Boolean} Show the quick add button.
  • section_id: {String} The ID of the section that contains this card.

Usage:
{% render ‘card-product’, show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ ‘component-rating.css’ | asset_url | stylesheet_tag }}

{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == ‘portrait’
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == ‘adapt’
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == nil
assign ratio = 1
endif
-%}

{%- if card_product.featured_media -%}
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %} {{ card_product.featured_media.alt | escape }} {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

{%- if card_product.media[1] != nil and show_secondary_image -%}
<img
srcset=“{%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | image_url: width: 360 }} 360w,{%- endif -%}
{%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | image_url: width: 533 }} 533w,{%- endif -%}
{%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | image_url: width: 720 }} 720w,{%- endif -%}
{%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | image_url: width: 940 }} 940w,{%- endif -%}
{%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | image_url: width: 1066 }} 1066w,{%- endif -%}
{{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w”
src=“{{ card_product.media[1] | image_url: width: 533 }}”
sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)”
alt=“”
class=“motion-reduce”
loading=“lazy”
width=“{{ card_product.media[1].width }}”
height=“{{ card_product.media[1].height }}”

{%- endif -%}

{%- endif -%}
{%- if card_product.available == false -%} {{ 'products.product.sold_out' | t }} {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%} {{ 'products.product.on_sale' | t }} {%- endif -%}

{{ card_product.title | escape }}

{%- if show_vendor -%} {{ 'accessibility.vendor' | t }}
{{ card_product.vendor }}
{%- endif -%}

{{ block.settings.description | escape }}

{%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}

{{ card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max }}

({{ card_product.metafields.reviews.rating_count }}) {{ card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}

{%- endif -%}

{% render ‘price’, product: card_product, price_class: ‘’ %}

{%- if show_quick_add -%}
{%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%} {%- if card_product.variants.size == 1 -%} {%- form 'product', card_product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%} {%- if card_product.selected_or_first_available_variant.available -%} {{ 'products.product.add_to_cart' | t }} {%- else -%} {{ 'products.product.sold_out' | t }} {%- endif -%} {{ 'products.product.sold_out' | t }}
{%- endform -%} {%- else -%} {{ 'products.product.choose_options' | t }}
{% render 'icon-close' %}
{%- endif -%}
{%- endif -%}
{%- if card_product.available == false -%} {{ 'products.product.sold_out' | t }} {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%} {{ 'products.product.on_sale' | t }} {%- endif -%}
{%- else -%}

{{ 'onboarding.product_title' | t }}

{%- if show_vendor -%} {{ 'accessibility.vendor' | t }}
{{ 'products.product.vendor' | t }}
{%- endif -%} {% render 'price' %}
{%- endif -%}
8

can you share or DM me your store url? as the code you paste here I see you have edited, but it still not working right? so I need to check on your store

9

https://3b6cb9.myshopify.com/

10

password needed

11

skisti

12

pwd ^

13

https://3b6cb9.myshopify.com/collections/featured-frames

it works, unless for ‘/collections/all’.

14

thank you but why isn’t it working for other collections? any idea?

15

you are welcome.

it’s working for other collections too. you can try it.

just not working for this one https://3b6cb9.myshopify.com/collections/all I think you just test on this page before. it’s more like all products, not collection.

if it’s helpful pls accept as solution, thx :slightly_smiling_face:

16

Thank you for your patience and solutions :slightly_smiling_face:

Really appreciate it.

1 Like
17

Hi this solution is great, I have implemented the code and the buttons are visible and working. Any suggestions on how to change the alignment, color or boldness of the buttons?

Thanks