How to add Product Title and Price as a text over the product image on product grid i catalog page?

[devnoob]

Hi everyone! Help a noob here.

The page currently looks like this:

I want it to look like this:

hovering the image will have the same effect as default (i.e. minor zoom in)
clicking the image will open the respective product.

I have looked into all liquid files and I have tried many methods but all of them have one or 2 things going wrong with it.

Can anyone please suggest anything?

[Keshan97]

Hi Younngsodsale,

I think your answer is leading wrong direction. For this task, We don't have to change product Images, We can use simple CSS to achieve this.

[Keshan97]

Hi DevNoob,

To do this you can use CSS, Since I don't have access to check your current theme configuration I will share an outline here,

For your product card wrapper add 

.wrapper-class {
position : relative}

Then for the wrapper that holds the name and price add 

child-wrapper {
position: absolute;
bottom:40px;
right:20px;
}

Change the wrapper classes as you need, if you need further assistance reach out to me. You can find my email address below.

[devnoob]

Thanks for getting back Keshan97.  I am customising the Basic Dawn Theme Config. I have not changed the product grid at all apart from the 2 columns for the product. I am a bit new with CSS but I will try and navigate through your suggestion now. 

[Keshan97]

Devnoob, If you share your store preview URL, I can provide a more precise answer to this 

[devnoob]

That would be: https://fe0a26-ed.myshopify.com/collections/all

Many thanks for your help!

[Keshan97]

The store is password protected, Can you share the preview password: https://fe0a26-ed.myshopify.com/password

[devnoob]

rireug

[Keshan97 · Accepted solution]

.card.card--standard.card--media {
    position: relative;
}

.card__content {
    position: absolute;
    bottom: 40px;
    left: 20px;
    z-index: 2;
}

Try this, I think you should change the text colour to be lighter or add a background overlay to get more text contrast 

[devnoob]

Thank you so much Keshan97! This has worked!

I wish to be as good as you! might ask more questions if you don't mind. This is my first time building a shopify store design.

[SL-Milano]

Thank you Keshan, this works really nicely. 🙂

However, the image itself is no longer clickable after using this code, only the title and price tags are actual links. Is there a way to get around this?

[HELDERWRLD]

Hello Keshan,

Can you also help me do this?
Just want to add Badge/Product labels To Images On Collection Page/Featured Products?
I will show a example on how i want it to look.

Website: https://diversusoficialsite.myshopify.com/
Pass: diversusoficial