How do you split text into two different colors

Store Design
, ,
1

Hi!

I am using the Rich text section on the free spotlight theme on the product page.

I want to change the first part of the slogan to a different color (e.g orange) and the rest of the text black.

I have some extremely basic coding skills but can this not be done in the CSS block on the theme editor?

Thanks

2

Hi @Shay751

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
h2.rich-text__heading {
    color: red !important;
}
.rich-text__text {
    color: yellowgreen !important;
}

Here is the result:

image_720.png
image_720.png720×450 43.9 KB

I hope this helps

Best,

Daisy

3

Hi there,

Thank you for the response.

Perhaps I didn’t word it correctly, I only need to change the color of the headline text split into two different colors. See example below

Like This

Hope that makes it more clearer on the help needed, thanks!

4

Hi @Shay751

In that case, let me know exactly where you want to edit.

Take a screenshot of the specific section and share the link to the page if it’s not on the homepage. This will help me check the code to see if it’s editable.

Best,

Daisy