How to change collection title text color in image?

Solved
Odding
Excursionist
19 0 2

Hello folks!

 

I would like to change the text color of my collection images on my front page.

 

How to do that?

 

See screenshot:

Shopify Collection text.png

0 Likes

This is an accepted solution.

Hello @Odding,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

.collection-grid-item__title.h3 {
	color: red;
}

Note:Change color as per your requirement

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Odding
Excursionist
19 0 2

You sir are majestic!

 

I've added this now to my store, but you can't see the letters. Is there a possibility to add a box behind the text so the letters will be visible?

0 Likes

This is an accepted solution.

@Odding,

If you want to add backgroung then add below css

.collection-grid-item__title.h3 {
	background: #1c6f4f;
}

 

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Odding
Excursionist
19 0 2

Thank you for your fast reply!

 

Is there also a possibility to make the white box just a bit wider than the text?

0 Likes
Seanj226
New Member
1 0 0

Hello I am trying to edit the collection title (Shop Corals) on my website to change from black to cyan.

 

I added the code shown and change it to :

.collection-grid-item__title.h3 {	color: cyan;
}

and nothing changed, I then tried:

.collection-grid-Shop_Corals.h3 {	color: cyan;
}

 and that also didn't work. Any advice?

0 Likes
eire
New Member
3 0 0

Hello I tried this on my Debutify theme and it didn't work?

0 Likes

@eire,

Please share your store url

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
eire
New Member
3 0 0
Crapk1n
New Member
1 0 0

InkedSnimka zaslona 2020-10-25 131533_LI.jpgSnimka zaslona 2020-10-25 131731.png
Hi,
Try this: Inspect element ,on your collection
Read the code and search it to your theme.scss.liquid
change the color . (delete previews text)

0 Likes