Make the Rich Text block change color as the visitor scrolls down page

Shopify Discussion
1

I tried using instructions from ChatGPT without luck. On my homepage under Rich Text I would like for the font to change colour as the user scrolls down the page. Can you please provide step by step instructions for a complete novice?

2

hey @stonerivergems share the URLs of your website plz

3

Hey thanks mate. The website is stonerivergems.com.au. It’s not live just yet - PW is stonerivergems

4

To do that Find the Rich Text section on your homepage on your theme. Look for the HTML code where your text appears, something like

. You need to add some custom CSS (to style the text initially) and JavaScript (to change the color when scrolling).

5

Mustafa_Ali_0-1749877134359.png
Mustafa_Ali_0-1749877134359.png1280×416 30.2 KB

hey @stonerivergems dear follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the ----->
before the body ----->
if this code work please do not forget to like and mark it solution

6

Hello @stonerivergems

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottow of the file:
.rich-text__blocks .h2 {
color: red;
}

devcoders_0-1749877350531.png
devcoders_0-1749877350531.png1361×548 187 KB

7

If you want to change element color as it scrolls from the bottom of the screen to the top, then do the following:

In Customizer, add a Custom liquid section.

If you want it to work on every page in your store, then in “Footer group”, if only on one type of pages (say homepage only) then add it inside the Template.

Paste the following code.

As it is set up, it will chage color of H2 elements inside main site area (not header/footer/popups).

Here is my test store preview – applied to product title: https://wo20k9uavn9lmxw2-23104437.shopifypreview.com