Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: How to remove overlay text (collection title) on collection tile - debut theme

Solved

How to remove overlay text (collection title) on collection tile - debut theme

linzal
Explorer
70 0 17

Hi, shopify store URL:

Tiny Little Humans

tiny-little-humans-uk.myshopify.com

At the moment, when I add a collection list to my homepage, the tile shows with a white collection name over it. I would like to remove this overlay entirely to just show the collection image on the tile. I have tried altering the code myself but... as you can tell haven't been very successful. 

Any help would be fab!

Thanks

TLH

Accepted Solution (1)
Kinjaldavra
Shopify Partner
2303 570 1426

This is an accepted solution.

hello @linzal 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-index .collection-grid-item__title-wrapper {
  display: none;
}

 

View solution in original post

Replies 13 (13)

ZestardTech
Shopify Partner
5911 1067 1413

Hello There,

Please share your store password and screenshot.
So that I will check and let you know the exact solution here.

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
linzal
Explorer
70 0 17

Thanks, password: ahrtea

linzal_0-1626949056633.png

Ideally, I would like no text on on the overlay, or the text to appear at the bottom as it is covering the design.

Thanks

TLH

 

LamQSolutions
Shopify Partner
131 30 44

Hi,

To hide the title, you can install my free app Custom CSS and add the following code

If you don't want to install the app, you can add the following at the bottom of your assets/styles.scss.liquid or assets/theme.scss.liquid file

.template-index .collection-grid-item__title-wrapper {
  display: none;
}
Found my answer helpful? Please LIKE or Accept Solutions.
You may be interested in our apps
Scrolly Telling - Create scroll-based animations visually.
Ultimate Sections - Slideshow, Gallery, Collection, FAQs, Brand, Info box, Testimonial and more
linzal
Explorer
70 0 17

Thank you - What am I doing wrong....

linzal_0-1626961858634.png

 

LamQSolutions
Shopify Partner
131 30 44

Hi,

Could you put that code to the file theme.css so I can take a look at the problem closer?

Found my answer helpful? Please LIKE or Accept Solutions.
You may be interested in our apps
Scrolly Telling - Create scroll-based animations visually.
Ultimate Sections - Slideshow, Gallery, Collection, FAQs, Brand, Info box, Testimonial and more
Kinjaldavra
Shopify Partner
2303 570 1426

This is an accepted solution.

hello @linzal 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-index .collection-grid-item__title-wrapper {
  display: none;
}

 

ZestardTech
Shopify Partner
5911 1067 1413

Hello There,

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

.template-index .collection-grid-item__title-wrapper {
display: none!important;
}
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
linzal
Explorer
70 0 17

Thank you - this worked a charm. Can I please ask what I would need to change in the code to move the wording to the bottom of the tile? As I think it may be helpful to still be there.

 

ZestardTech
Shopify Partner
5911 1067 1413

Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.

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
linzal
Explorer
70 0 17

Thanks! Can I ask what the code would be to move the writing to the bottom of the tile?

Chrissyking
Excursionist
12 0 4

I cannot get this to work for me.  I tried adding 

.template-index .collection-grid-item__title-wrapper {
display: none!important;
}

to the theme.css file.  I am using debut.  URL https://gtsswag.com/ 

Swaggerlikeme
Excursionist
47 0 2

Hi There Kinjaldavra thanks for sharing. Is it possible to only avoid the overlay if an image is present ?

 

thanks

RJ

Swaggerlikeme
Excursionist
47 0 2

Like if there is an image for that collection then display the image if not then display the text which is the collection title.