Shopify themes, liquid, logos, and UX
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.
Hi @Driver3 , this would require custom coding and deep checking of your theme's code. If you are interested then you can contact us.
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024