Previous / Next Product buttons — Minimalista theme

[harry-w]

Hi

I'm using the Minimalista theme to build a website for a client, and on each product page I'd like to add a "Previous" and "Next" button to navigate to the other products within the collection. It doesn't seem to be possible within the theme, so can anyone help me with the code for this?

Thanks in advance!

Harry

[pawankumar]

Hi @harry-w 
You can try something like this

{%- assign collection = collection | default: product.collections.first -%}
{%- if collection -%}
  {%- for product in collection.products -%}
    {%- if product.handle == product.handle -%}
      {%- assign index = forloop.index0 -%}
      {%- assign prev_index = index | minus: 1 -%}
      {%- assign next_index = index | plus: 1 -%}
      
      {%- if prev_index >= 0 -%}
        {%- assign prev_product = collection.products[prev_index] -%}
        <a href="{{ prev_product.url }}" class="prev-product">← Previous</a>
      {%- endif -%}
      
      {%- if next_index < collection.products.size -%}
        {%- assign next_product = collection.products[next_index] -%}
        <a href="{{ next_product.url }}" class="next-product">Next →</a>
      {%- endif -%}

    {%- endif -%}
  {%- endfor -%}
{%- endif -%}
<style>
.prev-product, .next-product {
  display: inline-block;
  padding: 8px 12px;
  background-color: #000;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  margin: 10px;
}
.prev-product:hover, .next-product:hover {
  background-color: #333;
}
</style>

Thanks!

[harry-w]

Hi @pawankumar 

Thanks for the quick reply! Where should I put the code?

I'll try it right away

Harry

[pawankumar]

You can place it at the place where you want it, you can place in
main-product.liquid for similar file or product-info.liquid
It depends upon where you want to put it and theme structure

Thanks

[harry-w]

OK — I'll do some experimenting and get back to you if I have more questions.

Thanks again for the input, I really appreciate it!