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

Store Design
, ,
1

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

1 Like
2

Hi @tjieko

Which text your referring too?

3

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

4

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 tag

RESULT:

Moeed_0-1724699429090.png
Moeed_0-1724699429090.png1163×839 128 KB

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

Best Regards,
Moeed

1 Like
5

Thank you so much!!!

6

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.

1 Like
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.

8

Hey @tjieko

Keep the previous code and add this new code above 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
Moeed_0-1724701210806.png1197×865 161 KB

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

Best Regards,
Moeed

1 Like
9

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!