How to stop text color change on hover with CSS?

Store Design
,

Topic summary

Goal: Prevent product page text from turning white on hover via CSS in a Shopify theme.

Context: A product URL was shared. Screenshots and a referenced screen recording illustrate the hover color issue.

Proposed fixes:

  • Add custom CSS at the end of theme.liquid before the tag. Two replies provided these steps, but the actual CSS code blocks appear empty in the posts.
  • Edit base.css and add a rule to keep the hover color consistent: target “.station-tabs .station-tabs-tabset.mod-vertical .station-tabs-tab:hover” and set color to #544f4a !important. A screenshot shows the hover color no longer turns white after applying this.

Technical note: This uses the CSS :hover pseudo-class to override the theme’s hover styling so text color remains the desired value instead of switching to white.

Outcome/Status: Visual confirmations were shared by responders, but the original poster has not confirmed a resolution. The thread remains open pending OP feedback.

Summarized with AI on January 9. AI used: gpt-5.
1

Hi experts,

Please help me with this query.

I want to disable the colour change of the text to white during hover action. Please help me with the CSS code for the same.

Here’s the site URL: https://zatura.in/products/be-the-bold-cotton-half-sleeves-regular-fit-mens-casual-t-shirt

Zatura_0-1704800368336.png
Zatura_0-1704800368336.png3448×2204 517 KB

I have attached the screen recording below for further reference.

Thank you!

2

Hello, @Zatura

Greetings from the Wholesale Helper Support Team! Happy to help you today.

  1. Go to online store > theme > Edit code > Layout > theme.liquid (file) and Paste the below code at the end of the file, just before the closing " " tag → Save
  1. After adding the above CSS, it looks like this-

Wholesalehelper_0-1704800820137.png
Wholesalehelper_0-1704800820137.png649×308 17 KB

Let me know If need further assistance

Regards,

Wholesale Helper Support Team

1 Like
3

Hi, @Zatura .

Follow These steps,

Go to the online store theme and go to base.css file paste the code mentiond below.

.station-tabs .station-tabs-tabset.mod-vertical .station-tabs-tab:hover {
    color: #544f4a !important;
}

Result:

websensepro_0-1704891005985.png
websensepro_0-1704891005985.png1354×312 95.2 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

1 Like
4

Hey @Zatura

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like