Re: Help removing text overlayed on collection images

Solved

Help removing text overlayed on collection images

pinegrover
Tourist
5 0 1

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.

Accepted Solution (1)

MandasaTech
Shopify Partner
723 146 151

This is an 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>

 

☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at info@mandasa.in
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page

View solution in original post

Replies 7 (7)

ZestardTech
Shopify Partner
5902 1066 1411

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;
}

ZestardTech_0-1671435976542.png

 

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

MandasaTech
Shopify Partner
723 146 151

This is an 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>

 

☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at info@mandasa.in
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page
pinegrover
Tourist
5 0 1

This worked, thank you so much!

pinegrover
Tourist
5 0 1

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
Excursionist
46 0 2

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
Shopify Partner
5625 1262 1254

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:

GemPages_0-1671441547024.png

 

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:

GemPages_1-1671441589947.png

 

It show like this when you add my code:

GemPages_0-1671441723317.png

 

I hope you find the answer helpful 😁.

Kind & Best regards,
GemPages Support Team. 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

PageFly-Victor
Shopify Partner
7865 1786 3115

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