FROM CACHE - en_header

Change Product Name color on collection page without changing color on product page (Avone Theme)

Solved
Snohx
Excursionist
22 0 7

Good Day!

 

Disclaimer: this website contains adult products.

 

I am trying to change the color of the text on the collection page. Currently, the font color is white over a lightened hover effect. This makes it very hard to see the text. See example: (https://alittlekinky.co/collections/vibrators). I would like to either:

 

1) change the text to black to make it more visible over the hover effect, or

2) darken/ dim the hover effect to make the words more visible as white.

 

Currently, when I try to change the color for the product title and price, it changes it on the actual product page as well. I want the font on the product page to remain white. 

 

Is there a way to alter/ override the current text colors and complete this?

 

Thanks in Advance!

Accepted Solution (1)

Accepted Solutions
infoatcodelab7
Shopify Partner
230 49 46

This is an accepted solution.

@Snohx ,

Please add this CSS to your theme

 

.grid-view-item .grid-view-item__title, .product-price__price{
    color: #000;
}
span#ProductPrice-product-template {
    color: #fff !important;
}

 

Thanks!

Want to modify or develop new website, Hire us.
If helpful then please Like and Accept Solution .
Email: info@codelab7.com

View solution in original post

Replies 3 (3)
ZestardTech
Shopify Expert
3929 664 914

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.css and paste this at the bottom of the file:

body.template-collection .grid-view-item.style2 .overly {
background-color: #a8a6a6c9;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
infoatcodelab7
Shopify Partner
230 49 46

This is an accepted solution.

@Snohx ,

Please add this CSS to your theme

 

.grid-view-item .grid-view-item__title, .product-price__price{
    color: #000;
}
span#ProductPrice-product-template {
    color: #fff !important;
}

 

Thanks!

Want to modify or develop new website, Hire us.
If helpful then please Like and Accept Solution .
Email: info@codelab7.com
Snohx
Excursionist
22 0 7

Thank you so much! This was very helpful!