Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
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>
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;
}
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>
This worked, thank you so much!
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.
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
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.
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
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024