How to add product title and price to the product image as an overlay in the collection page

[VintrashTemple]

Hey there I’m using the shopify theme Atelier, I’m new to all of this but I would like to have th product title and price on top of the product image in the left inferior corner. Inspo image attached.

here is the website: www.atenatemple.com and inspo image…

[VintrashTemple]

Thank you so much! how do I get to see which section controls my product grid??

[VintrashTemple]

If I’m looking at it right it should be : Default collection

[VintrashTemple]

Yup so i would like to have the name title and price overlayed on the product image but there is no option to do this inside the theme editor so I assume must be either by changing the liquid or css code but I just don’t know how to code, but i do know how to go around it and add code on specific sections

[tim_1]

Generally, I would not recommend it – text can be hard to read or cover too much of an image…

But You can try adding this code to the “Collection” section “Custom CSS” setting:

.product-card__content > .group-block:last-child {
  position: absolute;
  bottom: 0;
  padding: 0.5rem;
  --color-foreground: white;
  z-index:1;
}

[suyash1]

please add this css to the very end of your base.css file and check, bit modified code given by @tim_1
shopify admin->online store->themes->edit theme code->assets->base.css

.product-card .group-block {position: absolute;    bottom: 0;    padding-left: 5px;
    --color-foreground: #fff;    z-index: 1;}

.product-card .group-block-content{justify-content: end;}

[Dan-From-Ryviu]

Please add this code to Custom CSS in your theme settings.

.resource-list__carousel .group-block-content {
    position: absolute;
    bottom: 32px;
    left: 12px;
}
.resource-list__carousel .group-block-content  * {
    color: #fff !important;
}