FROM CACHE - en_header
Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more!

Category overview page (change where text is placed (or if) and background)

Solved
FKrois
Excursionist
19 2 2

Hi,

 

so I found the workaround with menus and handles to make "Sub-Categories" and pages with Overviews. Such as my screenshot will show.

But how ever do I change the way the category name is displayed (maybe on the bottom of the tile).

Also what's with the horrible color background of every tile (and mouse over see iPhone 13 Pro in the screenshot).

 

Thank you for you help!

Screenshot 2021-12-07 at 16.19.23.png

Accepted Solutions (3)

Accepted Solutions
Savior
Shopify Partner
537 108 153

This is an accepted solution.

@FKrois 

Happy to help you:

1. Go to your code editor > Assets > theme.css or theme.css.liquid and paste this lines at the bottom of the page: 

 

.collection-grid-item__title-wrapper::before {
background-color: none !important;
}
.collection-grid-item__title {
position: relative !important;
color: #000 !important;
}
.collection-grid-item__title.h3 {
margin: 17.5px 0 !important;
}

 


If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on shopify.dev.34@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

If helpful, please Like and Accept Solution.


Hire me or mail me  | Shopify Design Changes | Custom Modifications In to Shopify Theme | Site Speed Optimization
Use GemPages Page Builder to build, design, and optimize your store. View app

View solution in original post

Savior
Shopify Partner
537 108 153

This is an accepted solution.

@FKrois 

try this

.collection-grid-item__title-wrapper::before {
background: none !important;
}

If helpful, please Like and Accept Solution.


Hire me or mail me  | Shopify Design Changes | Custom Modifications In to Shopify Theme | Site Speed Optimization
Use GemPages Page Builder to build, design, and optimize your store. View app

View solution in original post

Savior
Shopify Partner
537 108 153

This is an accepted solution.

@FKrois 

 

add this: 

 

.collection-grid-item__title {
text-shadow: none !important;
font-weight: normal !important;
}
@media only screen and (max-width: 769px) { 
.collection-grid-item__title.h3 {
    margin: 12px 0 !important;
    font-size: 17px !important;
}
}

 


If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on shopify.dev.34@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

If helpful, please Like and Accept Solution.


Hire me or mail me  | Shopify Design Changes | Custom Modifications In to Shopify Theme | Site Speed Optimization
Use GemPages Page Builder to build, design, and optimize your store. View app

View solution in original post

Replies 11 (11)
KetanKumar
Shopify Partner
36265 3609 11701

@FKrois 

store url please 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
36265 3609 11701

@FKrois 

yes please confirm this look!

KetanKumar_0-1638933372027.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
FKrois
Excursionist
19 2 2

Hi, yeah looks much better. How and where can I do that?

Savior
Shopify Partner
537 108 153

This is an accepted solution.

@FKrois 

Happy to help you:

1. Go to your code editor > Assets > theme.css or theme.css.liquid and paste this lines at the bottom of the page: 

 

.collection-grid-item__title-wrapper::before {
background-color: none !important;
}
.collection-grid-item__title {
position: relative !important;
color: #000 !important;
}
.collection-grid-item__title.h3 {
margin: 17.5px 0 !important;
}

 


If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on shopify.dev.34@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

If helpful, please Like and Accept Solution.


Hire me or mail me  | Shopify Design Changes | Custom Modifications In to Shopify Theme | Site Speed Optimization
Use GemPages Page Builder to build, design, and optimize your store. View app

FKrois
Excursionist
19 2 2

hi, so that fixed the text. It is now under the category. Looks ok.

Do you have a way to change the background of the category image?

 

All the best,

 

Fabio

Savior
Shopify Partner
537 108 153

This is an accepted solution.

@FKrois 

try this

.collection-grid-item__title-wrapper::before {
background: none !important;
}

If helpful, please Like and Accept Solution.


Hire me or mail me  | Shopify Design Changes | Custom Modifications In to Shopify Theme | Site Speed Optimization
Use GemPages Page Builder to build, design, and optimize your store. View app

FKrois
Excursionist
19 2 2

Very cool - that worked!!

Thank you

FKrois
Excursionist
19 2 2

Following up, desktop works. But mobile view is broken. The text goes into the images. Can we de-bold the text?

Savior
Shopify Partner
537 108 153

This is an accepted solution.

@FKrois 

 

add this: 

 

.collection-grid-item__title {
text-shadow: none !important;
font-weight: normal !important;
}
@media only screen and (max-width: 769px) { 
.collection-grid-item__title.h3 {
    margin: 12px 0 !important;
    font-size: 17px !important;
}
}

 


If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on shopify.dev.34@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

If helpful, please Like and Accept Solution.


Hire me or mail me  | Shopify Design Changes | Custom Modifications In to Shopify Theme | Site Speed Optimization
Use GemPages Page Builder to build, design, and optimize your store. View app

FKrois
Excursionist
19 2 2

@Savior 

Running the risk of over using your help...do you have an idea for two lined category names that are currently still covered by images on mobile?

Smaler text? Or more space between the categories?