How can I add a button to each multi-column in Studio theme?

[markus_5]

Hello!

I’ve been trying for a couple days now to add a button at the bottom of each multi column so I can have a very visible button instead of the small link option it currently provides.

This thread had a solution for the Dawn theme, but it doesn’t seem to work?

They were able to add this option to the multicolumn

How can I achieve this please?

[jovilh]

Hi Markus,

This is a pretty simple fix. I’m guessing you want the buttons to look like the rest of the site. Do you have a Store URL where I can take a look?

[BSS-Commerce]

Hi @markus_5

To add a button at the bottom of each multi-column, I have a solution related to editing the Studio’s theme code below:

• First, go to the multicolumn.liquid code in the Template folder (Online store > Themes > Edit code). Then, find the code below

And replace that code with the following code:

{%- if block.settings.link_label != "Hide" %}

{{block.settings.title_button}}

Finally, find the code below:

And replace it with the following code:

{
          "type": "text",
          "id": "title_button",
          "label": "Button Text"
        },
 		{
          "type": "url",
          "id": "url_button",
          "label": "Button Link"
        }

Here is the result:

Let me know if it’s useful for you by giving us a like or marking it as a solution.

[markus_5]

Hey!

Thank you so much, this is amazing and actually worked.

My only next question is if there is an option to ‘hide’ it? There is one page I want there to be buttons on the multi-column, but on others I don’t want a button. I saw on another theme it was possible to add the option.

Many thanks in advance!

[BSS-Commerce]

Hi @markus_5

Please wrap the code you just added above in the code as shown below:

{% if template.name == "index" %}
         
{% endif %}

Then, go to Online store > Themes > Edit code. In the Templates folder, find the page you want to edit multicolumn. For example, if you need to edit the home page, get the name of the index.json, template.name == “index”, or the cart page will get the name of cart.json, template.name == “cart”.

 

I hope that it will work for you.

[markus_5]

Wow thank you, that fixed it!

For any other amateur’s maybe reading this in the future, this new rule basically saying “only apply these extra multi column buttons to pages which are called…” and in this case, I wanted it on my ‘packages’ page so I changed the “index” in that code to “packages” and it worked a treat.

Thank you!

[Katricep]

Hi, I have followed this on my Sense them and the buttons have been added. However the steps to hide the buttons on the pages that I do not want is not working. I have replaced the index with the page where I want the multicolumn button visible. Please help.