How can I add a CTA button to my website header?

Store Design
1

Hi, I just wanted a call to action button in the header that is on the right side, just left of the search icon and cart icon. I’d like the background of the button to be #e51313 and for the text to be in white that says “FREE Consultation” but only display on the desktop, not the mobile. If anyone would be able to help that would be great, thank you!

Website URL: https://ecomadclips.com/

1 Like
2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset → base.css and paste this at the Bottom of the file:
#cart-icon-bubble .icon.icon-cart-empty {
    background-color: #e51313;
    border-radius: 4px;
    margin-right: 10px;
    font-weight: bold;
    color: #fff;
}
.header__icon.header__icon--search.header__icon--summary.link.focus-inset.modal__toggle {
    background-color: #e51313;
    border-radius: 4px;
    margin-right: 10px;
    font-weight: bold;
    color: #fff;
}
@media only screen and (max-width: 767px) {
    .gf_row {
      display: none;
  }
}

ZestardTech_0-1684826697610.png
ZestardTech_0-1684826697610.png1853×797 154 KB

ZestardTech_1-1684826720795.png
ZestardTech_1-1684826720795.png885×621 190 KB

3

HI @LloydBasti , Please follow the below steps:

  1. In your Shopify Admin go to online store > themes > actions > edit code

  2. Open header.liquid file and search for the ‘header__icons’ class. After that paste the below code as the first line of this div.

FREE Consultation

after adding this code your header.liquid file will look like the attached screenshot.

Akibhusen_0-1684828237107.png
Akibhusen_0-1684828237107.png1482×576 33.2 KB

  1. After that open your base.css file and paste the below line of CSS at the end of this file.
.btn-consult::after,
.btn-consult::before{
  content:none;
}
.btn-consult{
  background-color:#e51313;
  padding: 10px;
  line-height: normal;
  min-height: auto;
  font-size: 14px;
}

@media(max-width:480px){
  .btn-consult{display:none;}
}
  1. Save header.liquid and base.css file once you add extra code.

let me know if you have any doubts.

4

Hi Akibhusen, this didn’t work for me. Do you know if there’s anything I could be missing? Thank you!

5

Have you added all codes which I mentioned in the above step for header.liquid and base.css file?

What issue you are facing after adding the above code?

6

I’ve entered in the code you provided into my theme but it still isn’t displaying on my website. Not sure what I am doing wrong but my coding looks exactly like what you have done in the screenshots you have sent me