How to change color of "FOLLOW ON SHOP" Button - Dawn 15.0.2 theme

Store Design
, , ,
1

Trying to figure out how to change color of “FOLLOW ON SHOP” button on Dawn 15.0.2 theme.

My site URL is dev.beneplanta.com

Button color configuration is passed via this file: https://dev.beneplanta.com/cdn/shopifycloud/shop-js/modules/client.login-button_D5kT6IGS.en.esm.js

.button:not(.button–following):focus-visible .follow-icon-wrapper:before,
.button:not(.button–following):hover .follow-icon-wrapper:before {
background: #7f68e9;
border-color: var(–border-hover-color);
}

Changing the color 7f68e9 to 000000 in chrome development console changes the background button to black.

Is there a way to modify it with CSS permanently? Could someone please advise me how to do that…

2

@Vlad_7 - you can add this css into the base.css file and check

3

Hello @Vlad_7

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 on theme.liquid

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

niraj_patel_0-1724816344193.png
niraj_patel_0-1724816344193.png677×161 4.12 KB

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

4

Hi @Vlad_7 , use the below code:

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

Results:

topnewyork_1-1724829894925.png
topnewyork_1-1724829894925.png1351×193 4.8 KB

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

Thanks!

5

niraj_patel The solution you offered doesn’t work…

6

Julius_Chrome: Which file would I modify if i were to go through EDIT CODE option?

I tried to add it to Custom CSS boxes in THEME and FOOTER, and it didn’t work.

7

you can add code in your CSS file.

8

@topnewyork Your suggested solution did not work.

Nothing that was suggested by anyone worked. Do you guys test your code on an actual shopify site and not in the dev console?

9

This working on my actual shopify site. You are going to have to put this in your global.js file. I got the idea when I was changing the shopify forms CSS and making a javascript rule was the only way:

// Follow on Shop
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 });
});