How to change text colour of a specific piece of text?

[tjieko]

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

[Made4uo-Ribe]

Hi @tjieko 

Which text your referring too? 

[tjieko]

The texts with shipping time, free shipping, and street-legal, etc.

[Moeed · 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

[tjieko]

Thank you so much!!!

[Moeed]

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.

[tjieko]

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.

[Moeed]

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

[tjieko]

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!