Styling Shopify Active Links

Wondering how to style an active Shopify menu link? Styling Shopify active links with the link.active property with a linklist is a cinch.
Published
Typical Read
2 minutes
Sponsored
Do you have a great article to share you want to contribute? Contact me about your idea.
Find your next web developer job
jobs by Indeed

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.

Did you find Styling Shopify Active Links useful? Get articles in your inbox.

…and don’t worry, I hate spam as much as you. Expect to hear from me at most once a week.

Latest Job Postings
Posted on Aug 9, 2020 at 9:17pm
Full-time
Los Angeles
Posted on Aug 9, 2020 at 9:15pm
Full-time
Los Angeles
Posted on Aug 9, 2020 at 1:19am
Littleton, CO
jobs by Indeed
Sponsored
Sponsor my site by donating to help support open-source projects, like WordPress Zero Spam, Referrer Analytics & others.
Sponsored
Sponsor my site by donating to help support open-source projects, like WordPress Zero Spam, Referrer Analytics & others.
Sponsored
Do you have a great article to share you want to contribute? Contact me about your idea.
Sponsored
Need help with website, a boost in ranking or online marketing? Contact me today for a free quote.
Sponsored
Help support open-source projects & pro-bono non-profit services by donating today.

1 Comment on “Styling Shopify Active Links”

# Aug 12, 2019

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 *

All comments posted on 'Styling Shopify Active Links' are held for moderation and only published when on topic and not rude. Get a gold star if you actually read & follow these rules.

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.