Hi, I’m not sure how it happened, but now the product title appears behind the product images on the main grid. I tried to fix it by hiding it, but that also hides the main title, which I don’t want.
URL: https://voodoo-warehouse.com/collections/all?sort_by=created-descending (please hover over the product images to see what I mean).
Thanks.
Hello, @voodoowww123
1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / base.css file and paste the code in the bottom of the file.
@media (max-width 768px){
#shopify-section-template--26410927784284__product-grid .card__information, #shopify-section-template--26410927784284__product-grid .card-information {
display: inline-masonry !important;
}
}
@media (min-width 769px){
#shopify-section-template--26410927784284__product-grid .card__information, #shopify-section-template--26410927784284__product-grid .card-information {
display: inline-masonry !important;
}
}
Thank You!
Hey. I don’t see any changes, the title still appears behind the images
Go to the theme.css or base.css file and press Ctrl + F, then search for this:
" #shopify-section-template–26410927784284__product-grid .card__information, #shopify-section-template–26410927784284__product-grid .card-information “
When you find it, look inside the code. You’ll see display: flex; written below, remove that line and then save the file. Now it should work for sure.
Theme has 2 element with class .card__information in product card element.
One is below the image, which you want visible, another is behind the image, which should be hidden if there is an image.
Theme has a rule to do this, but you’ve added a rule like this, looks like in “Custom CSS” and it overrides the themes own.
.card-information {
display: flex;
flex-direction: column;
justify-content: end;
}
Either change that one to (better)
.card__content .card-information {
display: flex;
flex-direction: column;
justify-content: end;
}
Or also add this:
.card__inner .card__information {
display: none !important;
}
Hi @voodoowww123
You can try to add this code to bottom of the base.css file
.card–media .card__inner .card__content {
display: none;
}
This layout issue usually appears when the theme updates or when visual elements (images or hover effects) push the product title behind the grid layer.
It doesn’t always require coding right away
but it helps to check these three areas:
1. Recently added visual effects or apps
Sometimes a visual app or image optimization layer changes the position of elements on hover
2. Theme sections for collection template
The title may be inside a block that is lower in the layer order than the product image.
3. Image replacement or dynamic visual tools
We’ve seen this happen when testing visual variations for Shopify product grids
especially when images are generated or updated automatically
If you’re experimenting with visuals or doing any A/B test
we’ve been using AI tools in CatWalkCraft AI to keep layouts consistent
while testing product visuals on different models and poses.
It keeps the theme structure safe and avoids layout conflicts.
If helpful, I can share a quick checklist to test the grid layout safely
before making any code changes.
Let me know!
Hi @voodoowww123,
Go to Online Store > Themes > Actions > Edit Code > base.css Add below code at the bottom of base.css file
.card__inner h3.card__heading .full-unstyled-link {
display: none;
}
That’s was the perfect fix! Thank you so much I’ve been trying everything and finally!!
