collection catalog navigation link to another collection catalog

New Member
7 0 0

Hello all,

I am a novice in CSS and totally making this up as I go. I am trying to make a change to the functionality of my site @ https://summer-lulu.myshopify.com (password "opening soon").

I am trying to create a simplified navigiation function to switch from one collection to the next on my collection pages. I want it to look similar and function the same way as the "back to" code I am using at the bottom of my product pages. Basically I just want to be able to switch from https://summer-lulu.myshopify.com/collections/made-for-minis to https://summer-lulu.myshopify.com/collections/made-for-moms without clicking shop then selecting a collection

here is the code I am using on the product pages;

{% if collection %}
    <hr class="hr--clear">
    <div class="text-center">
      <a href="{{ collection.url }}" class="return-link">&larr; {{ 'products.general.collection_return' | t: collection: collection.title }}</a>
    </div>
  {% endif %}

Any help is appreciated as I am in over my head =0

-Karin

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
409 0 60

Hi Karin,

Britton here with the Shopify support team.

The issue with this product is that each page needs the link to point to a different place. This means that we are effectively going to have to hardcode in this link rather than just using the general collection.url object.

I would probably recommend using something like this inside of collection.liquid:

{% if canonical_url contains 'made-for-minis' %}
<a href="/collections/made-for-moms" class="return-link">&larr; {{ 'products.general.collection_return' | t: collection: collection.title }}</a>
{% elsif canonical_url contains 'made-for-moms' %}
<a href="/collections/made-for-minis" class="return-link">&larr; {{ 'products.general.collection_return' | t: collection: collection.title }}</a>
{% endif %}

I'm not sure about the translation part of the code above, but it would definitely result in a the correct links being generated. Make sure to back up your theme by dulpicating it before making any code changes!

I hope that helps!

-Britton

Britton Shopify Guru
0 Likes
New Member
7 0 0

Thank you so much for the reply.

I added the code and it shows up in the right spot as it should. But the links are a little wonky. If you check out the site, the text show up as "back to made for moms (or minis)" but i want it to say "switch to made for ..."

Also the link takes you back to the collections page, not to the opposite collection.

 

Would it just be eaiser if it was just a link that said back to collections? and took you to the collections homepage? 

0 Likes
New Member
7 0 0

So I don't know what happened, but now the links are working properly! Thank you! Now I just need to figure out how to change the text to say the correct thing. If you have any ideas I would appreciate it!

0 Likes