Add button to footer, Sense Theme.

[talsworld]

Hi! I cannot seem to figure out the right code to add a button to the second column in my footer under the text.

The site is coldpow.com. I would rather insert a nice button there then have to link text. Thank you!!!

[prakashVt]

Hello @talsworld 

What kind of button design  are you looking for? Any reference?

I tried this 

[Hardik2903 · Accepted solution]

@talsworld 

Please go to
1) Online store
2) Themes -> Edit theme
3) Sections
4) footer.liquid

First, Please try to find "{%- when 'text' -%}" and place below code. I have also attached a screenshot for the reference.

{% if block.settings.button_url and block.settings.button_label %}
  <a role="link" class="button button--primary" href="{{ block.settings.button_url }}">{{ block.settings.button_label }}</a>
{% endif %}

Second, Please find "type": "text" in the Schema section and place the below code. I have also attached a screenshot. Please do not forgot to add "," after the closing curly bracket of "type": "richtext"

        {
          "type": "text",
          "id": "button_label",
          "default": "Shop Now",
          "label": "Button Label"
        },
        {
          "type": "url",
          "id": "button_url",
          "label": "Button URL"
        }

 

Now, Go to theme settings -> Footer -> Text -> Here, when you will add label and url, this button will be appeared.

If it was helpful, then please like and accept it as a solution.
Thank you

[talsworld]

Thank you. This was truly the best way to add a button as it matched the other buttons in the theme. I can't thank you enough. Much much appreciated.

[topnewyork]

Hi @talsworld , 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<Style>
a[href="https://www.coldpow.com/pages/feedback"] {
    padding: 10px;
    border: 1px solid white;
    border-radius: 30px;
    text-decoration: none;
    background-color: white;
    color: black !important;
    cursor: pointer;
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[Tech_Coding]

Hello @talsworld 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .footer-block__details-content.rte h3 a {
      text-decoration: none !important;
      color: #000 !important;

    }

   .footer-block__details-content.rte h3 {
      background: #fff !important;
      padding: 10px;
      text-transform: capitalize;
      font-weight: 700;
      text-align: center;
      max-width: 24rem;
   }
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.