Solved

How to change font color on collection titles in Shop page in debut theme?

JoeB-CO
Excursionist
18 0 16

On my Shop page I show all collections, but the font is white and not very readable. How do I either highlight the font or change the color or put the collection title underneath the picture? I realize this is easy for someone who knows what they are doing, but unfortunately I am new to liquid.

JoeB-CO_0-1597707537625.png

 

Accepted Solution (1)
diego_ezfy
Shopify Partner
2934 562 883

This is an accepted solution.

@JoeB-CO 

This will fix your problem:

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

 

.collection-grid-item__title {
    margin-top: 20px;
    top: 112% !important;
    color: #000000 !important;
}

.collection-grid-item {
    margin-bottom: 100px !important;
}

 


It will look like this:

dantepw_0-1597807435191.png


Let me know if it works plz

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

View solution in original post

Replies 14 (14)

diego_ezfy
Shopify Partner
2934 562 883

Hello,

Thank you for your question. 

Please share your store URL, page URL and also password (if your store has one) and I'll help you out to the best of my ability.

Kind regards,
Diego

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

JoeB-CO
Excursionist
18 0 16

current code is below, how do I modify it to highlight the title or put a shadow behind the text and make the text black?


.collection-grid-item {
position: relative;
width: 100%;
padding-bottom: 100%;
margin-bottom: $gutter-site-mobile;

@include media-query($medium-up) {
margin-bottom: $grid-gutter;
}
}

.collection-grid-item__title {
color: $color-overlay-title-text;
position: absolute;
text-align: center;
width: 100%;
top: 50%;
padding: 0 5px;
@include transform(translateY(-50%));
transition: $transition-link-hover;
text-shadow: 0 0 4px $color-text-shadow;
hyphens: auto;

@include media-query($medium-up) {
padding: 0 15px;
}
}

dmwwebartisan
Shopify Partner
12280 2546 3693

Hey @JoeB-CO,

We can do it black and white shadow but when you hover then title will disappear. can you give me a screenshot when you put above my given code

as you said title disappear?

Please provide a screenshot. I will check and correct it.

 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
diego_ezfy
Shopify Partner
2934 562 883

This is an accepted solution.

@JoeB-CO 

This will fix your problem:

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

 

.collection-grid-item__title {
    margin-top: 20px;
    top: 112% !important;
    color: #000000 !important;
}

.collection-grid-item {
    margin-bottom: 100px !important;
}

 


It will look like this:

dantepw_0-1597807435191.png


Let me know if it works plz

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

JoeB-CO
Excursionist
18 0 16

Yes, this worked great. I modified slightly.

.collection-grid-item__title {
margin-top: 12px;
top: 101% !important;
color: #000000 !important;
}
.collection-grid-item {
margin-bottom: 80px !important;
}

 

What does the !important do?

socali1984
Tourist
12 0 1

PLEASE HELP!!!!.  I ENTERED THE CODE YOU SUGGESTED AND NOW I GOT THIS ERROR.  NOW MY WHOLE SITE HAS CRASHEDError.jpg

NYCBeast
Excursionist
43 0 3

Hello, I would like to do this as well. However, when I use that code the title is on the bottom of the collection instead of the top but I would it on top. Also I think white text with black stroke would look better instead of black with white shadow. Could you share a code that would have the title on top of the collection in white with black stroke? Thanks.

Flutterbyarainb
Visitor
1 0 0

Thank you! This worked 😄

If I change the color #00000 to the colour code that I want, will that work? I didn't want to mess things up!

important;
    color: #000000 !important;

 

Rocketman7
New Member
6 0 0

This code didn't work for me.

I looked for the Asset > theme.scss.liquid in my Shopify store code.

What I have in my Asset folder is Asset > theme.css.liquid

I applied the code to this Asset but it didn't make any difference to the collection's text color.

I am trying to change the color of the text in the Collection list.

KevinDB
Excursionist
16 1 0

This didn't work for me. Do you have a solution for Brooklyn theme?  Thanks.

JoeB-CO
Excursionist
18 0 16

the following code worked:

.collection-grid-item__title {
margin-top: 12px;
top: 101% !important;
color: #000000 !important;
}
.collection-grid-item {
margin-bottom: 80px !important;
}

diego_ezfy
Shopify Partner
2934 562 883

glad to hear it worked!

 

!important forces this code to be used in case the element has other styles applied to it.

Wishing you a great day! 

◦ I can help you further! Top #4 Shopify Expert, 24h reply. Click here to hire me.
◦ Follow my blog & youtube for more free coding tips.
Download copy/paste code snippets that can replace most apps.

dmwwebartisan
Shopify Partner
12280 2546 3693

Hey @JoeB-CO,

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.collection-grid-item__title {
color: #fff !important;
top: unset !important;
text-shadow: none !important;
margin-top:30px;
}

.collection-grid-item { 
margin-bottom: 45px !important; 
}


@media only screen and (min-width: 750px) {
.collection-grid-item { margin-bottom: 55px !important; }
}

 

This code will take the title bottom of the image.

Let me know if this works for you.

 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
JoeB-CO
Excursionist
18 0 16

Thanks so much for taking time to help me out. However, it didn't work like I hoped. The title just disappeared. My current code is below. Can I just change some code to highlight the text? Maybe put a white shadow with black text so it is readable on any background?


.collection-grid-item {
position: relative;
width: 100%;
padding-bottom: 100%;
margin-bottom: $gutter-site-mobile;

@include media-query($medium-up) {
margin-bottom: $grid-gutter;
}
}

.collection-grid-item__title {
color: $color-overlay-title-text;
position: absolute;
text-align: center;
width: 100%;
top: 50%;
padding: 0 5px;
@include transform(translateY(-50%));
transition: $transition-link-hover;
text-shadow: 0 0 4px $color-text-shadow;
hyphens: auto;

@include media-query($medium-up) {
padding: 0 15px;
}
}