How can I change the color of my 'Follow on Shop' button?

Store Design
, ,
1

I have enabled the Follow on Shop button in my footer, but I would like to change the color of the button from blue to black. Can anyone help with that?

This is what I have currently:

JasonBoyd_0-1686084281828.png
JasonBoyd_0-1686084281828.png314×143 1.76 KB

Thank you,

2

Could you please provide more details, like which theme you are using and the link to your website so that I can have a look.

3

Currently using Dawn 9.0.0

Little Shop of Curiosity

4

Here is a quick update about your “follow on shop” button. I see that you have a third-party App or something from which the button is coming. You will have to find the exact file where the CSS is coming from and then add the following. (It would be the same code for both process)

Because it is from a third-party app. I am not sure if it will work or not, but you can try the following steps: Hopefully, it will work. follow the image for guidelines.

  • Go to your admin dashboard
  • Click “Themes”
  • Click “three dots ‘…’”
  • Click Edit code
  • Find “base.css”
  • scroll to the very bottom of the code and paste the following code
.follow-icon-wrapper {
    z - index: auto;
    background: black;
    border-radius: 44px;
}
    
    span.follow-icon-wrapper:hover {
        background: #4e4545;
}

If it solves the issue please mark it as solved!

steps to edit code.png
steps to edit code.png2450×902 216 KB

search base.css.png
search base.css.png1854×1022 161 KB

5

Please add below css code at bottom of assets/base.css file

.follow-icon-wrapper:before{
background: #000;
border: 1px solid #000;
}

Thank you.

6

Hello @JasonBoyd

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom

.follow-icon-wrapper:before {
    background: #000 !important;
    border: 1px solid #000 !important;
}
7

@Web-Wizard This is coming from within the Dawn theme itself, not a third-party app.

JasonBoyd_0-1686235066275.png
JasonBoyd_0-1686235066275.png693×800 35.9 KB

I tried the advised code but it did not work.

@oscprofessional & @Denishamakwana I tried the code you both suggested as well, but it didn’t work either.

Code was added to the bottom of the base.css.

8

Hi @JasonBoyd , It did not work because the CSS code was not coming from “base.css”. I would suggest you remove that code from “base.css” and add the same code in “section-footer.css”. Hopefully, this will work.

9

Did we ever get this to work. I have had no luck for either suggestion above.

10

Hi, the other options did not work for me either but I found this way that worked for me. Go into your global.js and paste in this code you can now change it to how you wish as long as you follow the format. I got the idea when trying to change the CSS of shopify forms:

// Follow on Shop Button
document.addEventListener("DOMContentLoaded", function () {
  const observer = new MutationObserver(() => {
    const shopFollow = document.querySelector("shop-follow-button");

    if (shopFollow && shopFollow.shadowRoot) {
      const btn = shopFollow.shadowRoot.querySelector("button");
      if (btn) {
        // Insert
        btn.style.backgroundColor = "#E72027"; //Button Color
        btn.style.color = "#ffffff";           //Text Color
        btn.style.borderRadius = "15px";       // Optional

        // Change the inner div background to fit with button color
        const innerDiv = btn.querySelector(".absolute.inset-y-0");
        if (innerDiv) {
          innerDiv.style.backgroundColor = "#E72027";
          innerDiv.style.borderRadius = "15px";
        }

        observer.disconnect(); // Stop watching after change
      }
    }
  });

  observer.observe(document.body, { childList: true, subtree: true });
});