CODEWITHSUNDEEP
shopify
xtremeCODE
xtremeCODE

Reputation: 719

Highlight the active collection button in shopify

I have a list of a collection I am calling in Shopify. I tried to use the link active tag but its not working. Here is my snippet

{% for collection in collections %}
  {% unless collection.handle == 'frontpage' %}
    <button type="button" class="btn btn-outline-info {% if link.active %}class='active'{% endif %}">{{ collection.title | escape | link_to: collection.url }}</button>
  {% endunless %}
{% endfor %}

I am trying to add active class to the active collection, or the collection URL I am on presently.

I don't know what I am missing here.

Upvotes: 0

Views: 620

Answers (1)

HymnZzy
HymnZzy

Reputation: 2925

Based on your comments, your code will function erratically. collection is a reserved variable in Shopify and by using the same variable in the loop, you might be changing the actual collection altogether. And secondly, link.active will only work inside a linklists loop.

Here's what you can do: change the assigning variable for the unit in your loop and validate if the handles are the same.

{% for thisCollection in collections %}
  {% unless thisCollection.handle == 'frontpage' %}
    <button type="button" class="btn btn-outline-info {% if thisCollection.handle == collection.handle %}class='active'{% endif %}">{{ thisCollection.title | escape | link_to: thisCollection.url }}</button>
  {% endunless %}
{% endfor %}

Upvotes: 1

Related Questions