Chnage text colour on element Shrine Theme

Store Design
, ,
1

I want to change Black text to White just on this particular element which has a Pink background.

Shrine Theme - https://c92cd8-82.myshopify.com/products/thaqil

See attached for area in question.

Thanks so much!

Screenshot 2024-07-31 at 9.13.47 PM.png
Screenshot 2024-07-31 at 9.13.47 PM.png1644×705 91.5 KB

2

Hi @AAABARTON1

I tried to check this, but it’s not allowed to inspect an element on this site, so it is difficult to find the solution.

Do you have a solution for this?

Regards,

Vinh

3

Hi @AAABARTON1 ,

You can change the color of elements using the custom CSS field on your “section” in the “customize”.

  1. Go to Online store → Themes → click on the “Customize” button.

  2. In the Customize, change the template to the template of the default product (inside the product option) from choosing from the dropdown. (or the template of your product if you are using a custom template)

Sweans_0-1722485211157.png
Sweans_0-1722485211157.png537×310 17.6 KB

  1. After loading the template, click on the section you want to bring up the change.

  2. Go the bottom of the customize option and you’ll find a field “Custom CSS”

Sweans_1-1722485224446.png
Sweans_1-1722485224446.png415×387 13.5 KB

  1. Add the following code in the field:
.icons-with-text__icon__text, .icons-with-text__icon__text h3
  {
   color: white !important;
  }
  1. “Click on the “Save” button at the top to save the changes. This will help you to change the color of the elements.

Sweans_2-1722485245329.png
Sweans_2-1722485245329.png1570×545 91.4 KB

If you need further assistance, feel free to reach out! I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

4

Hi @Sweans

Your solution looks great.

By the way, could you please let me know how you could inspect the element?

On my side, even right-clicking doesn’t work.

Thanks in advance.

Regards,

Vinh

5

Hi @vinh0225 ,

It doesn’t allow us to inspect directly. So, to inspect you can try opening the “Developer tools” from the browser. If you’re using “Chrome”, click on the three dots at the top right corner and a menu appears.
In that menu, choose the “More tools” option and in the sub-menu, choose “Developer tools”. This way you can inspect the webpage

Sweans_0-1722489583410.png
Sweans_0-1722489583410.png754×303 16.3 KB

If you need further assistance, feel free to reach out! I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

6

you can inspect element on chrome by going to the the three dots top right corner - hover on ‘more tools’ - developer tools

does this work?

7

Thanks so much, this worked perfectly!