Styling Shopify Active Links

Wondering how to style an active Shopify menu link? Styling Shopify active links is a cinch with the liquid link object.

<ul>
  {% for link in linklists[YOUR_MENU_ID].links %}
    {% if link.links != blank %}
      <li>
        <a href="{{ link.url }}"{% if link.active %} class="active"{% endif %}>
          {{ link.title }}
          {% include 'icon-arrow-down' %}
        </a>
        <ul>
          {% for childlink in link.links %}
            <li>
              <a href="{{ childlink.url }}"{% if childlink.active %} class="active"{% endif %}>
                {{ childlink.title }}
              </a>
            </li>
          {% endfor %}
        </ul>
      </li>
    {% else %}
      <li>
        <a href="{{ link.url }}"{% if link.active %} class="active"{% endif %}>
          {{ link.title }}
        </a>
      </li>
    {% endif %}
  {% endfor %}
</ul>
Styling Shopify Active Links
Example of a styled active Shopify menu link.

Styling Shopify Active Links

This is useful when you want to style the current page menu link differently than the other links. Other CMS like WordPress & Drupal add this output by default, however styling Shopify active links requires you to check the link.active property in a linklist in your liquid template code.

Styling active menu links with link.active

The link.active property returns true if the link object is active, or false if the link object is inactive.

A link is considered active if the resource it points to is part of the URL structure. For example, if the current page is /blogs/news/snowfall, then the following links are active:

  • /blogs/news, where the resource is the blog
  • /blogs/news/snowfall, where the resource is the blog article

Given the behavior of link.active, multiple links in a menu can have link.active be true at the same time, even when they have different values for link.url.

The link.active property is useful for menu designs that highlight when top-level navigation categories are being viewed. An example of this would be a menu that highlights the “News” blog link when an article from that blog is being read.

If you’re on a collection page that’s filtered with tags, then a link that points to the unfiltered collection page still returns true for link.active. For example, if the URL is collections/men/boots, then the following links are active:

  • collections/men, where the resource is the collection
  • collections/men/boots, where the resource is the filtered collection

If you’re on a product page that’s collection-aware, then link.active returns true for both the collection-aware product URL and the collection-agnostic URL. For example, if the URL is /products/awesome-product, then the following links are active:

  • /products/awesome-product
  • /collections/awesome-collection/products/awesome-product
  • /collections/all/products/awesome-product

For more information on styling Shopify active links, see the link object documentation.

Comments

  1. Thansk for the great tip. Your knowledge is super-extensive. I’ve learned a lot since I started following your blog

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

All comments are held for moderation and only published when on topic and not rude. You'll even get little stars if you do an extra good job.

You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.

Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.

icon-search icon-link