Putting Product Title and Price as a text overlay in the catalog page?

[westies]

We are wanting the product title and price to overlay the image on all of the catalog layouts. Currently the title and price and swatches are underneath the image but we'd like them overlayed instead like below.

Site is: https://margauxsurmer.com/

[BiDeal-Discount]

Hi @westies 

which link can I see that section?

[westies]

https://margauxsurmer.com/collections/one-piece

https://margauxsurmer.com/collections

All the links and places that the collection shows up I'd like them to be styled like that. 

[westies]

So anywhere that collections are called, I'd like for the style card to show like the sample.

[BiDeal-Discount]

Hi @westies 

Let try to use this Custom CSS:

.t4s-product-wrapper {
  position: relative;
}
.t4s-product-wrapper > .t4s-product-info {
  position: absolute;
  bottom: 0;
}

the result will be like:

[westies]

Is there way to remove swatches on those and only have text?

[BiDeal-Discount · Accepted solution]

yes you can use this Custom CSS:

.t4s-product-wrapper {
  position: relative;
}
.t4s-product-wrapper > .t4s-product-info {
  position: absolute;
  bottom: 0;
}
.t4s-product-wrapper > .t4s-product-info .t4s-product-colors {
  display: none;
}

[Purity2]

Hello Westie

have you seen a solution to it?

if not i will like to render you a solution for it.

Purity Ella

[westies]

I have not yet.  I just would like it to be styled like the sample image really anywhere that the collections are viewable.