Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Change background color of "Follow on shop" Button

Change background color of "Follow on shop" Button

Driver3
Shopify Partner
26 1 1

How can I change the "Follow on shop" button's background purple?

Shopify CSS controlling the background color:

.follow-icon-wrapper:before {
    content: '';
    background: #5433EB;
    border-radius: 48px;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
    transform-origin: center;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
}

 This style is not coming from a style sheet as evidenced by <style> tag next to the code in dev tools. The CSS is being applied from an internal <style> tag, possibly added dynamically by JavaScript. This can sometimes override external stylesheets if it’s loaded later or given higher precedence.

I've duplicated the above CSS in base.css, in my overide.css file using !important, using outer div container classes, paths and nothing worked. I switched to injecting JS by placing a script right above the </body> tag in theme.liquid file. After running console I see my script is being called but it is still not affecting the button color. I have tried many versions of the script but none work. Below is my last attempt.

<script>
  document.addEventListener("DOMContentLoaded", function() {
      console.log("Script is running");

      // Check if the .follow-icon-wrapper exists in the DOM
      var followIconWrapper = document.querySelector('.follow-icon-wrapper');
      
      if (followIconWrapper) {
          console.log("Element .follow-icon-wrapper found");

          // Inject CSS via JavaScript for pseudo-element :before
          var style = document.createElement('style');
          style.type = 'text/css';

          style.innerHTML = `
            .follow-icon-wrapper:before {
              background-color: red !important;
              border: 2px solid blue !important; /* Add border to confirm the change */
            }
          `;

          // Append the style to the document head
          document.head.appendChild(style);
          console.log("CSS injected for :before pseudo-element");
      } else {
          console.log("Element .follow-icon-wrapper not found");
      }
  });
</script>


Because the purple color is part of the shop branding i understand they may not want us to change the color, but it would be nice. I would gladly welcome any suggestions.




Reply 1 (1)

websensepro
Shopify Partner
1288 145 166

Hi @Driver3 , this would require custom coding and deep checking of your theme's code. If you are interested then you can contact us.

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial