Shopify Question posted in
The Shopify help center can be found here.

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>
Tags:

4

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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"' }}
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
  4. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search