Image with text section: Need help changing font color for heading- Studio Theme

16 0 5

I was curious to see if there was a way to change the heading color for the "Image with text" section. My website url is: The Tiny Greenhouse


Screenshot 2022-12-06 144348.png


I would like to change the color for each letter for the word "color" to something like this:




Replies 2 (2)

Shopify Partner
1518 249 314

Hi @aosttg 
in this case
You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css

background-image: linear-gradient(to left, violet, indigo, green, blue, yellow, orange, red);
        -webkit-background-clip: text;
        -moz-background-clip: text;
        background-clip: text;
        color: transparent;


- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on regarding any help.

111 13 24

Hi @aosttg


You may try out this method as well: 

  1. Go to Online Store->Theme->Edit code
  2. Find sections/image-with-text.liquid
  3. Paste the following on top of the file: 


<script src=""></script>
  var colorText = '<span >c</span><span style="color:green";>o</span><span style="color:blue";>l</span><span style="color:pink";>o</span><span style="color:yellow";>r</span>';
  var textColor = $('.image-with-text__heading.h2:not(.added-color)').html()
  textColor = textColor.replaceAll('color', colorText); 



Layoutbase - Drag & drop page builder tool

Please let us know if you find it helpful by giving us a LIKE and Mark as Solution. Layoutbase is a leading Shopify page builder. Give us a try!