Shopify themes, liquid, logos, and UX
Hi Everyone,
I want to change the color of the instagram Icon, it's filled purple in mobile and I want it to have a transparent filling:
https://www.evesanthology.com/password
Any idea how to do that? Or is this a pre-set in the icon by instagram? If so; where can I change this icon? I am using prestige theme,
Thanks a lot!!
Solved! Go to the solution
This is an accepted solution.
Thanks for your quick reply. That looks already better! Will there always be a fine purple box line? Or can I make that line transparent as well?
Hello @Eve25
Go to online store ----> themes ----> actions ----> edit code ----> theme.css
add this code at the end of the file and save.
@media not screen and (pointer: fine) {
.social-media--block .social-media__item {
background: transparent;
}
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
This is an accepted solution.
Thanks for your quick reply. That looks already better! Will there always be a fine purple box line? Or can I make that line transparent as well?
hereby the code that worked with white lining: @media not screen and (pointer: fine) {
.social-media--block .social-media__item {
background: transparent;
border: 0.5px solid white;
outline: 0.5px solid white; /* Optional, adds an additional effect */
}
Thanks to both of you for helping as I made a combination of both solutions 🙂
have a great day!!!
Hi @Eve25
I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for "theme.liquid" file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for </head> tag and add the following code above </head> tag: https://prnt.sc/KWtKYyZkDtYJ
Here is the code for Step 3:
{% style %}
@media screen and (max-width: 768px){
.password__inner li.social-media__item.branding-colors--instagram {
outline: 1px solid white !important;
}
}
{% endstyle %}
Learn what's possible with customizing Shopify Checkout beyond what's available out of...
By Shopify Feb 19, 20252m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025