Change collection grid titles - Brooklyn theme

Solved
Highlighted
Tourist
16 0 0

Hi, my problem is I want to change the collection grid titles, adding them a white background without affecting the background image, and change it into capital letters without changing the collection name, something like this:

Anotación 2020-02-24 195719.jpg

Hope you can help me, thanks.

My web: https://qs4pzfnzf8lvbktx-32087441546.shopifypreview.com

0 Likes
Highlighted
Shopify Staff
Shopify Staff
429 47 96

Hey there, @Trvpin 

 

Thanks for reaching out today! We might be able to assist you in making these changes. I have gone ahead and sent you a private message to get some further information regarding your store and to run some authentication steps. Feel free to check out that message and we can go from there.

 

If there is anything else I can help you with, please let me know.

 

Dirk | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Shopify Partner
13 3 4

This is an accepted solution.

Hi @Trvpin 

Try making the following changes to your theme files (under Online Store > Themes > Current Theme > Actions > Edit Code) and see if it works the way you want.

 

Edit the snippets/collection-grid-item.liquid theme file and at the bottom (line 80) change

{{ collection_title }}

to this:

<span class="collection-grid__item-title--text">{{ collection_title }}</span>

Then edit assets/theme.scss.liquid and add the following CSS:

 

.collection-grid__item-title--text {
    font-style: normal;
    font-weight: bold;
    text-transform: uppercase;
    padding: 0.2em 0.4em;
    color: black;
    background-color: white;
}

 

Thanks

Toro

https://karere.com - Web Development
1 Like
Highlighted
Tourist
16 0 0

Amazing! Worked perfectly thanks a lot, @Toro_Hill!

0 Likes
Highlighted
Shopify Partner
13 3 4

Great, glad it worked for you @Trvpin .

https://karere.com - Web Development
0 Likes
Highlighted
New Member
2 0 0

hi, how can I change the font size and without overlay in this collection?

currently my website looks like this 

Screen Shot 2020-06-08 at 9.52.50 PM.png

0 Likes
Highlighted
New Member
1 0 0

Hi,

Could I ask how you'd edit this code so that the box was transparent?

0 Likes