How Can I Underline Certain Text on Homepage Slideshow?

Solved
Tourist
51 0 1

I want to underline the text "No one else is doing this." on my homepage (https://illuminatelabs.io/) in the orange accent font stack. Not looking for this to be a hyperlink or anything -- just looking to underline for aesthetic purposes. 

 

Can't figure out how to do this in the code, and it's not an option in the customize tool. Any ideas?

0 Likes

Hello 
You want like this:
28.jpg
Let me know from which section you have added that description from backend?
Please share screenshot of backend where you have added this text.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Astronaut
1069 145 260

You'll have to add a span element around the text and then you can set it in the css. So wherever your text is, put span tags around it:

 

The U.S. supplement market is unregulated. We test every product at a third-party laboratory against European Union limits and share the test results with you. <span>No one else is doing this.</span>

Then in theme.scss.liquid in your assets folder add this to the bottom:

 

.hero__subtitle span {
text-decoration: underline;
}
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Tourist
51 0 1

Hi, thank you for your response. This sounds stupid but I'm unable to find the actual text in the Shopify files. I've searched like every file and cannot find it, so I can't put the span tags in yet.

 

Do you know how to find the subheading text in Shopify? I'm using the Brooklyn theme and I used CTRL+F "no one" (part of the text I want to underline) and nothing came up in like every folder.

0 Likes
Astronaut
1069 145 260

You'll have to change the {% schema %} for the section, this would be the easiest way. I don't have the same version of Brooklyn as you apparently. I could make the change for you real quick if you want me to. It's a real easy fix. Just let me know.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Tourist
51 0 1

Yes that would be amazing. How would we do that? I'd give you the sign-in?

0 Likes
Astronaut
1069 145 260

I'll request access to your store. Give me a minute.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Astronaut
1069 145 260

Alright all fixed up. I made it so that in your customize menu for your subheading you can actually add HTML into the input field. I added the span in there and added the css to the bottom of your theme.scss.liquid.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Tourist
51 0 1

Thank you so much! The underline looks great. I'm still trying to figure out how to make the underline orange (the accent font color). I added the "font-family: $accentfontstack" on the line below and this didn't make the change. Do you have any ideas?

0 Likes
Astronaut
1069 145 260
Using a text decoration like underline will always be the same color as the font. You can achieve this kind of effect though with a pseudo after element though. I'll post some code for you a little later, I'm going to lunch right now.
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like