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

Solved

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

tjieko
Excursionist
15 1 7

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

 

Accepted Solution (1)

Moeed
Shopify Partner
5796 1577 1874

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:

Moeed_0-1724699429090.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 8 (8)

Made4uo-Ribe
Shopify Partner
8754 2093 2568

Hi @tjieko 

Which text your referring too? 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
tjieko
Excursionist
15 1 7

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

Moeed
Shopify Partner
5796 1577 1874

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:

Moeed_0-1724699429090.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


tjieko
Excursionist
15 1 7

Thank you so much!!!

Moeed
Shopify Partner
5796 1577 1874

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.

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


tjieko
Excursionist
15 1 7

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
Shopify Partner
5796 1577 1874

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:

Moeed_0-1724701210806.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


tjieko
Excursionist
15 1 7

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!