How do I change the color on "Follow on Shop" button in footer

Store Design
,
1

I’m trying to change the color of the “Follow on Shop” button from the standard blue color to my color # BC9F6E to match the rest of my site. I’ve tried a couple of options to change the code but none of them work. This is the only section that references that button.

{%- if shop.features.follow_on_shop? and section.settings.enable_follow_on_shop -%}
{{ shop | login_button: action: ‘follow’}}

What can I add/change to update the color?

Thanks!

2

Hey please share your website url.

3

www.slswares.com

4

Hi @SLSWares ,

  1. Go to your Online store => Theme => Edit Code
  2. Create customCSS.js.liquid file in folder Assets , add the following code to file:
const customStyle = document.createElement("style");
customStyle.innerHTML = `
    .follow-text {
        background-color: #BC9F6E !important;
    }
`;
document.querySelector("shop-login-button").shadowRoot.querySelector("shop-follow-button").shadowRoot.querySelector("follow-on-shop-button").shadowRoot.querySelector("style").after(customStyle);
  1. Open file theme.liquid add this code to the end of tag
<script src="{{ 'customCSS.js' | asset_url }}" defer="defer"></script>

And save.

5

Hi @BSS-Commerce ,

I added the above code and the color is still blue. Any other suggestions?

Thanks for the help!