Help removing text overlayed on collection images

[pinegrover]

On my homepage, I have a couple of collections with preview images displayed. The problem is that you HAVE to have text overlaying the image -- there's no way to just have the image. So for now, I've just done a "." over the images for the smallest footprint, but I would like to remove the text altogether. I have searched for a solution to this dilemma, but have only found people saying that you should add text at the bottom of "assets/theme.scss.liquid," however I don't have such asset in my theme's code.

Any help would be much appreciated!

My theme is Capital and my website can be found at https://bit.ly/3HKXkTk.

[ZestardTech]

Hello there,

1. In your Shopify Admin go to online store > themes > actions > edit code

2. Find Asset >theme-collection-list.min.css and paste this at the bottom of the file:

.collection__list-item-content--inner span.collection__list--title {
    display: none!important;
}

[MandasaTech · Accepted solution]

Hello @pinegrover 

I would like to give you a solution to support you:
1. Go to Online Store-> Theme-> Edit code
2. Open your theme.liquid theme file
3. Paste the below code before </body> :

<style>
.index-features-item-content.center {
display: none !important;
}
</style>

[pinegrover]

This worked, thank you so much!

[pinegrover]

I will say that despite being fixed visually, it strangely has become that you cannot click the images as links to go to the collections anymore. They just act as images on the home screen now.

[Swaggerlikeme]

Problem is if there is no image for that collection then i would prefer to show the text. Is there a way to remove if only if there is an image present for that collection. 

thanks

RJ

[GemPages]

Hello @pinegrover,

Glad to support you today.

To can remove the text "." on the collection, you can check out my suggestion below to remove it:

1. Go to Edit code on Online Store:

2. Add my code above the </body> tag on file Theme.liquid: 

<style>
	body.template-index .index-collectionlist .index-features-item-content .index-features-title {
		display: none !important;
	}
</style>

Eg:

It show like this when you add my code:

I hope you find the answer helpful 😁.

Kind & Best regards,
GemPages Support Team. 

[PageFly-Victor]

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Add this CSS at the bottom

Online Store ->Theme ->Edit code

Assets ->section-features.min.css

.index-features-item.image-content .index-features-item-content {
    display: none !important;
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly