Add a class to a Shopify liquid link?

Question

I am trying to generate a log out link for my customers but want to apply a class to the link.

{{ 'layout.customer.log_out' | t | customer_logout_link }}

The above liquid code generates

<a href="/account/logout" id="customer_logout_link">Log out</a>

I would like to add a class attribute. For example,

<a href="/account/logout" class="CLASS-NAME" id="customer_logout_link">Log out</a>

Answer 1

You can add class to link using replace filter, your code will look like this

{{ 'layout.customer.log_out' | t | customer_logout_link | replace: '<a', '<a class="my_class"' }}

Answer 2

You can't add class directly to the link filter, but you can add your own link.

So the following code {{ 'layout.customer.log_out' | t | customer_logout_link }} will be converted to.

<a href="/account/logout" id="customer_logout_link">{{ 'layout.customer.log_out' | t }}</a>

And you can add what ever class you like.

The filter customer_logout_link is just a shorthand to write the standard link. If you plan to use anything outside the standard HTML structure of the button just write it down as a standard html link.