Previous/next collection button on COLLECTION pages

Tourist
5 0 1

Hi guys!

I've now been searching a while for a post about adding a previus/next collection button on the collection pages of my shop. I found lots of posts providing help adding these buttons on the product pages, but I would like to have them on my collection pages instead. Is that possible? And if yes - does anyone have the code for it?

Thanks in advance!

Cheers,
Matthias

0 Likes

Hello 

https://help.shopify.com/en/themes/customization/collections/show-more-products-on-collection-pages

 

 

Need help for  theme integration and custom changes on shopify store hire me.
If my solutions are helpful then please Like and Accept Solution.
Email: pallavi@oscprfessionals.com

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Tourist
5 0 1

Hi Pallavi.


Thanks for your reply.

 

I'm not sure, if I've been exact enough pointing out my problem.
I do not want to chance the number of products on my collection pages.


What I would like to do is to add two buttons: "Previous collection" and "Next collection" on all of my collection pages. 

 

Let's say I have three collections: Footballs, Basketballs and Tennisballs.

 

On the "Footballs" collection page I would like the "Previous collection" button to take me to the "Tennisballs" collection page. In the same way, the "Next collection" button should take me to the "Basketballs" collection page.

 

Makes sense? 


Thanks in advance!

Cheers,
Matthias

1 Like
New Member
1 0 0
Hi Matthias
I want to do this too. Were you able to work it out?

Thanks,
Donina
0 Likes
Tourist
5 0 1
Hi Donina,

Unfortunately, I did not work it out yet.

I reached out to Shopify Support. They couldn't help me right away.
I was advised to pay a Shopify Guru to help me making the change.
I'm still looking for a free solution though.

Cheers,
Matthias
0 Likes
Shopify Expert
102 0 21

Hey all, i recently did this for a project and thought i would share my solution with  you :)

 

You will need to create a Navigation Menu called "Collection Navigation" with the collections in the order you want them to appear in.

 

Then at the bottom of your collection.liquid template you will want to paste in this code.

You may want to add in some styling / classes based on  your theme and how you want it to appear. Let me know if you need further assistance!

{% assign currentCollection = collection.url %}
      {%- comment -%}// show collection next / prev links - 
    	first we have to find the current collection in the linklist and then grab its index in the for loop. 
    	Then we grab the next and prev based on that number
      {%- endcomment -%}
      <div class="prev-next-links">
      {% for link in linklists['collection-navigation'].links %}
            {% if link.url == currentCollection %}
              {% assign currentIndex = forloop.index %}
              {% assign previousIndex = currentIndex | minus:1 %}
      	      {% assign nextIndex = currentIndex | plus:1 %}
      	    {% endif %}
      {% endfor %}
      {% for link in linklists['collection-navigation'].links %}
    	 {% if forloop.index == previousIndex %}
    	    <a class="prev-collection-link" href="{{ link.url }}">{{ link.title }}</a>
         {% elsif forloop.index == nextIndex %}
    	    <a class="next-collection-link" href="{{ link.url }}">{{ link.title }}</a>
    	{% endif %}
      {% endfor %}
   
      </div>

 

Here is some basic SCSS you can add to your theme's theme.scss file if you have it:

.prev-next-links{
  display:flex;
  padding-top:25px;
  border-top:1px solid #ccc;
  flex-flow: row nowrap;
  justify-content:space-between;
  .next-collection-link{text-align:right;}
  a{text-decoration:underline;}
}

 

0 Likes