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.
