Remove Underlines On Hover From Product Titles In Shopify

How To Remove Underlines On Hover From Product Titles In Shopify

Posted on by Foysal

Are you tired of those annoying underlines that appear beneath your product titles when users hover over them? Learning how to remove underlines from product titles in Shopify is a simple and effective way to create a cleaner, more modern look for your online store. This small tweak can significantly improve the visual appeal of your product pages and enhance the overall user experience.

Why Remove Underlines from Product Titles?

Underlines beneath product titles can sometimes distract users and make your store look cluttered. By removing them, you achieve several benefits:

  • Improved Aesthetics: A cleaner design makes your Shopify store look professional and visually appealing.
  • Enhanced User Experience: Visitors can focus more on the product itself without unnecessary distractions.
  • Professional Branding: A polished and well-designed store helps build trust and credibility with your audience.

Step-by-Step Guide to Remove Underlines

Follow these simple steps to remove underlines from your Shopify product titles:

  1. Access Theme Code: Go to Online Store → Themes → Actions → Edit Code in your Shopify admin dashboard.
  2. Locate CSS File: Open your theme’s main CSS file, often named theme.scss.liquid or base.css.
  3. Add Custom CSS: Copy and paste the following code snippet:
.underline-links-hover:hover a {
    text-decoration: none;
}
  1. Save Changes and Preview: After saving, refresh your store and hover over your product titles. You should see that the underlines are gone.

Additional Tips

  • Test on multiple devices to ensure your changes look good on both desktop and mobile.
  • Consider combining this tweak with other style improvements, like adjusting font size or weight, to further enhance your product titles.
  • Always back up your theme before making any modifications to prevent accidental issues.

By following these steps, you can easily remove underlines from product titles in Shopify, giving your store a more modern, polished, and professional look. Small changes like this can make a noticeable difference in user experience and overall store aesthetics.

Watch the video:

Our Services
Subscribe to Our You Tube Channel