How can I add multiple buttons to a block in Liquid?

Technical Q&A
1

Hi there,

I’m relatively new to Liquid but quite comfortable editing some basic stuff/changing settings files but something really stumped me today and im sure there is an easy explanation!

I have a block that has an over the whole thing but I want to add the ability for up to 3 buttons within the block to look like this:

anton_nv_0-1633947470689.png

The settings json is all fine, removing a link removes the button etc but I cannot add individual links to them without breaking the whole layout!
They appear linked but just don’t go anywhere essentially.

The individual text/buttons are added like this:

{%- if block.settings.link_2 != blank and block.settings.button_text_2 != blank -%}
{{ block.settings.button_text_2 | escape }}
{% endif %}

But trying something like the below doesnt work? Simply using {{block.settings.link_2}} adds the URL to the button so i’m confused to what i’m doing wrong here!

{%- if block.settings.link_2 != blank and block.settings.button_text_2 != blank -%}
    
{% endif %}
2

Equally, variation on this dont seem to work either, although similar is used for linkng up the main image?

{%- if block.settings.link_2 != blank and block.settings.button_text_2 != blank -%}
{{ block.settings.button_text_2 | escape }}
{% endif %}
3

..turns out it was an at the top of the block.

I replaced this with a div, adding a closing div to the very bottom and adding the to each button.
Seems obvious now but in case this helps anyone else!

1 Like