Previous/next collection button on COLLECTION pages

Matthias_Møller
Tourist
6 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

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Matthias_Møller
Tourist
6 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

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

Thanks,
Donina
0 Likes
Matthias_Møller
Tourist
6 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
HandHugs
Shopify Expert
165 1 36

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;}
}

 

Ginko
Shopify Partner
19 0 7

@HandHugs this is a very nice solution. Thank you.

0 Likes
Ginko
Shopify Partner
19 0 7

If you want to navigate your collections in a circle (i.e. have the first collection show as the "next one" when you are on the last one), then this code will work (ignore the css classes)

 

<div class="breadcrumbs max-width flex space-between pad-16">
        {% assign currentCollection = collection.url %}
        {% for link in linklists['main-menu'].links %}
            {% if link.url == currentCollection %}
                {% unless forloop.last %}
                    {% assign nextItem = forloop.index %}
                {% else %}
                    {% assign nextItem = 0 %}
                {% endunless %}

                {% unless forloop.first %}
                    {% assign prevItem = forloop.index | minus: 2 %}
                {% else %}
                    {% assign prevItem = forloop.rindex | minus: 1 %}
                {% endunless %}
            {% endif %}
        {% endfor %}

        {% assign prevI = linklists['main-menu'].links[prevItem] %}
        {% assign nextI = linklists['main-menu'].links[nextItem] %}

        {%-capture prevUrl-%} 
        {{prevI.url}}
        {%-endcapture-%}
        {% assign prevTitle = prevI.title %}

        {%-capture nextUrl-%} 
        {{nextI.url}}
        {%-endcapture-%}
        {% assign nextTitle = nextI.title %}

        <a alt="Previous item - {{prevTitle}}" href="{{prevUrl}}">        
            <button class="btn btn-paper btn-32">
                <span class="hide-600">{{prevTitle}}</span>
            </button>
        </a>
        <a alt="{{index}} - {{rindex}} Next item - {{nextTitle}}" href="{{nextUrl}}">        
            <button class="btn btn-paper btn-32">
                <span class="hide-600">{{nextTitle}}</span>
            </button>
        </a>
    </div>

 

0 Likes
MatthiasMoeller
New Member
2 0 0

Thanks a lot, @HandHugs - this one seems to work out perfectly for my store! 

I'm not an expert in hardcoding at all, so here's an extra question:

Is it possible to add some arrows next to the collection names in the navigation at the bottom of the collection page?

For example <-- in the lower-left corner and --> in the lower-right corner.

See https://www.mensclassics.dk/collections/slips if I didn't explain good enough for you to understand, what I mean.

Thanks in advance!

Best regards Matthias

 

0 Likes
HandHugs
Shopify Expert
165 1 36
Yes - it depends on how you want the arrows to look, there are lots of options. Do you want them just like your example?
0 Likes