How to remove underline for buttons in custom block spotlight

Shopify Discussion
1

Hi I’m trying to remove the underline for the button on this section of the home page. It’s the Ella theme - Can anyone help?

Screenshot 2025-01-28 at 15.27.49.png
Screenshot 2025-01-28 at 15.27.49.png2880×1412 585 KB

2

Hi @bridget47 ,

Hope you’re doing fantastic! I noticed you’re seeing an underline under the text in the spotlight section, and I’d be happy to help you resolve this. To remove the underline, you’ll need to add a small piece of CSS to your base.css file. Here’s how you can do it:

  1. Access Your Theme Files:

    • Go to your Shopify admin dashboard.

    • Navigate to Online Store > Themes.

    • Find your current theme (Ella, in this case) and click Actions > Edit code.

  2. Locate the base.css File:

    • In the left-hand sidebar, scroll down to the Assets section and click on base.css to open it.

  3. Add the CSS Code:

    • Scroll to the bottom of the base.css file and paste the following code:

      .halo-item .spotlight-inner .spotlight-button.custom-button-style span {  
    text-decoration: none !important;  
}

  4. Save the Changes:

    • Click Save in the top-right corner to apply the changes.

Once this is done, the underline under the text in the spotlight section should be removed. If you run into any issues or need further assistance, feel free to reach out, I’m here to help!

Best regards,
Shubham | Untechnickle

3

Sorted thank you so much!

4

You’re most welcome :grinning_face_with_smiling_eyes:

Feel free to reach out if you’ve any more questions for us, would love to help.

Cheers!
Shubham | Untechnickle