CODEWITHSUNDEEP
shopifyliquid
Joe Ainsworth
Joe Ainsworth

Reputation: 571

Add a class to a Shopify liquid link?

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>

Upvotes: 2

Views: 16036

Answers (4)

Addison Applications
Addison Applications

Reputation: 11

Here is a fully liquid solution:

{{ 'layout.customer.log_out' | t | customer_logout_link, class: "CLASS-NAME" }}

I have not seen this mentioned anywhere in the Shopify documentation though.

Upvotes: 1

Brenda
Brenda

Reputation: 923

For the best of both worlds, you can still utilize the dynamic url and break this out into your own html by adding the route in liquid as the href. See Shopify documentation on routes

<a href="{{ routes.account_logout_url }}" class="my_class" >
  {{ 'layout.customer.log_out' | t }}
</a>

Upvotes: -1

Hovhannes Sargsyan
Hovhannes Sargsyan

Reputation: 1083

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"' }}

Upvotes: 10

drip
drip

Reputation: 12943

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.

Upvotes: 3

Related Questions