How can I assign a class to specific anchor links in my .liquid footer?

Hi all,

I am using the Ira theme for my store.

Two of the links in my footer are anchor links to a specific div (Contact Us and Join Our Team). I need to offset these links by ~100px to accommodate the fixed header. To accomplish this, I’m referencing this solution.

I need to assign the class=anchor to these two links for this to work. When using the web inspector, I can see the HTML code and add the class as a test. However, that HTML code is generated with liquid. Is there a way to assign a class to these two links using liquid? Or perhaps there’s another solution to offset these links.

This is how the footer links are coded in footer.liquid:

{%- elsif block.type == 'links' -%}
            
              {% if linklists[block.settings.link_list].links.size > 0 %}
                

                  {% for link in linklists[block.settings.link_list].links %}
                    - {{ link.title }}
                  {% endfor %}
                

              {% endif %}

Here is the site url if you want to take a look:
https://ritual-chocolate-1303.myshopify.com/
password: 70%cacao

Thanks in advance!

Hi @apm8_rc

Adding a class in Liquid is the same as in HTML. You need to find the correct folder containing that div. Please follow these steps:

  • Step 1: Select Theme and go to Edit Code as shown

  • Step 2: In the search section, find the file footer.liquid (or it may have another name) this is where your footer div is written.

  • Step 3: In the attribute class section, you write an additional ‘anchor’ element (the attribute class is an array that can contain many values, the values are separated by space). Then Save

Anchor class has been added

  • Step 4: Find theme.css or base.css and add the CSS you want. For example, I want to set the black background; then I will add the line of code:
.anchor{
 background: black; 
}

Now, please check the result. You can also offset 100px using the usual CSS commands.

I hope that it will work for you.