Shopify themes, liquid, logos, and UX
Hi, I am looking to change the colour of check marks on my product pages to #83db3c. They are grey now. I was wondering how I can do that. The check marks with the text are product metafields. They are different per product.
I am looking forward to a response.
My url is https://vouwfatbike.nl
Here is the link to one of my products https://vouwfatbike.nl/en/products/windgoo-e20
Solved! Go to the solution
This is an accepted solution.
Hey @tjieko
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<script>
document.querySelectorAll('.h4.inline-richtext').forEach(function(element) {
if (element.textContent.includes('✔')) {
let checkmarkSpan = document.createElement('span');
checkmarkSpan.textContent = '✔';
checkmarkSpan.style.color = '#83db3c'; // Set the color to green
element.textContent = element.textContent.replace('✔', '');
element.insertBefore(checkmarkSpan, element.firstChild);
}
});
</script>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hi @tjieko
Which text your referring too?
The texts with shipping time, free shipping, and street-legal, etc.
This is an accepted solution.
Hey @tjieko
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<script>
document.querySelectorAll('.h4.inline-richtext').forEach(function(element) {
if (element.textContent.includes('✔')) {
let checkmarkSpan = document.createElement('span');
checkmarkSpan.textContent = '✔';
checkmarkSpan.style.color = '#83db3c'; // Set the color to green
element.textContent = element.textContent.replace('✔', '');
element.insertBefore(checkmarkSpan, element.firstChild);
}
});
</script>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Thank you so much!!!
Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.
Hi Moeed,
I could use your help on something else i've been struggling with. Basically, when you scroll on my product pages, the image stays in the same place. The only problem is that when you scroll, the top menu moves over a small bit of the product image and covers it a bit. I would like the margin between my menu and the image to stay the same.
Hey @tjieko
Keep the previous code and add this new code above </script> in the end of the theme.liquid file.
window.addEventListener('scroll', function() {
if (window.scrollY > 50) {
document.querySelector('.product:not(.product--columns) .product__media-list .product__media-item:first-child').style.marginTop = '100px';
} else {
document.querySelector('.product:not(.product--columns) .product__media-list .product__media-item:first-child').style.marginTop = '';
}
});
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hi @Moeed ,
That almost works, but it is a bit glitchy when you start scrolling. Could you fix this maybe?
Thanks for your help already!
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024