Append a class to the Shopify menu item

Sometimes you need one menu item to be different than the rest for one reason or another, or you want to add Javascript to a specific item. At times you can solve the visual part with CSS :nth-child() property and target the item you need. In the example below we are targeting the 5th element in our menu/navigation and adding some styling:

.SidebarMenu__Nav:nth-child(5) { background-color: var(--brand-color); color: var(--color-light); }

Eventually, however, you will need to put a class on a Shopify navigation item to achieve what you need. And we will, of course, use the power of Shopify Liquid to achieve this.

Here is a neat little trick I picked up from my buddy Marin.

Shopify liquid “if link.title contains”

<span class="{% if link.title contains "Shop" %} shop-btn {% endif %}">{{- link.title | escape -}}</span>

So basically what we are saying is: if there is a link that contains the word “Shop”, append a class called .shop-btn to it. If not, do nothing.

{% if link.title contains "Shop" %} shop-btn {% endif %}