Dawn theme: remove underline on hover (product titles on collection pages)

Store Design

Topic summary

Goal: remove the underline on hover from product titles on collection pages in the Shopify Dawn theme (or alternatively use a heavier font).

What was tried:

  • Added CSS in base.css: “.card-wrapper:hover .card-information__text { text-decoration: unset !important; }”. Reported as not working on the current Dawn version.
  • Same selector suggested again; still no change.
  • Variant added in component-card.css under a desktop-only @media query; it broke the mobile product card layout.
  • Alternative selector: “.full-unstyled-link:hover { text-decoration: unset !important; }”. This only removes the underline when hovering directly over the link, not when hovering near the product card, so the underline still appears.

Context & notes:

  • A screenshot was shared to pinpoint the underlined element. Theme class names/hover behaviors appear to have changed across Dawn updates, causing earlier snippets to fail.
  • The request to limit changes to collection pages only and the option to use a heavier font were raised, but no working, scoped solution or font-weight alternative was provided.

Status: Unresolved. Key need is a selector (or set of selectors) that disables the underline for all hover states on product cards on collection templates without breaking mobile layouts.

Summarized with AI on February 2. AI used: gpt-5.
1

Hello, how to remove underline on hover?

Is it possible to remove the underline on collection pages only?

Alternatively, making product title in heavier font instead of the underline.

2

@nd500 , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > base**.css** and paste this at the bottom of the file:
.card-wrapper:hover .card-information__text{
    text-decoration: unset !important;
}

Kind regards,
Diego

1 Like
3

Tank you for the reply but unfortunately it did not work.

4

@nd500

Please share your website URL.

5

https://bit.ly/3HAV2CK

6

Hi @nd500 ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file:
.card-wrapper:hover .card-information__text{
    text-decoration: unset !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.

7

It’s not working

8

@nd500

You want to remove this underline on hover, isn’t it? Or is it elsewhere?

diego_ezfy_0-1646185199060.png
diego_ezfy_0-1646185199060.png516Ă—669 65.9 KB

9

correct! used the code as you suggested but no changes…

10

Please add below code in bottom of assets/component-card.css file

@media screen and (min-width: 990px)

.card-wrapper:hover .card-information__text {
text-decoration: none !important;

}
thank you.

11

It effected mobile size and product cards broke.

12

To future visitors: be skeptic when you see CSS codes that don’t make sense.

13

@diego_ezfy

.full-unstyled-link:hover {
text-decoration: unset !important;
}
14

@Jiozx

I’m not sure what exactly doesn’t make sense about the code afore shared. Technically it is a valid piece of CSS code that likely doesn’t work with the newest versions of the Dawn theme since they’re frequently updated.

Either way, I’m glad you found a solution. Thanks for sharing with the community.

Kind regards,
Diego

15

This still doesn’t work, it only doesn’t show the underline if you’re hovering directly on the link. If you get near the product card it underlines the title.