Re: How to add Product Title and Price as a text over the product image on product grid i catalog pa

Solved

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

devnoob
Excursionist
26 1 2

Hi everyone! Help a noob here.

 

The page currently looks like this:

devnoob_0-1711935301512.png


I want it to look like this:

devnoob_1-1711935325414.png


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?

 

Accepted Solution (1)
Keshan97
Shopify Partner
72 9 23

This is an 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 

Best Regards,
Keshan Vishwajith
Shopify Certified Theme Developer
Feel free to drop me an email
www.loomod.com

View solution in original post

Replies 11 (11)
Keshan97
Shopify Partner
72 9 23

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.

Best Regards,
Keshan Vishwajith
Shopify Certified Theme Developer
Feel free to drop me an email
www.loomod.com

Keshan97
Shopify Partner
72 9 23

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.

Best Regards,
Keshan Vishwajith
Shopify Certified Theme Developer
Feel free to drop me an email
www.loomod.com
devnoob
Excursionist
26 1 2

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
Shopify Partner
72 9 23

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

Best Regards,
Keshan Vishwajith
Shopify Certified Theme Developer
Feel free to drop me an email
www.loomod.com
devnoob
Excursionist
26 1 2

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

Many thanks for your help!

Keshan97
Shopify Partner
72 9 23

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

Best Regards,
Keshan Vishwajith
Shopify Certified Theme Developer
Feel free to drop me an email
www.loomod.com
devnoob
Excursionist
26 1 2

rireug

Keshan97
Shopify Partner
72 9 23

This is an 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 

Best Regards,
Keshan Vishwajith
Shopify Certified Theme Developer
Feel free to drop me an email
www.loomod.com
devnoob
Excursionist
26 1 2

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
Visitor
1 0 0

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
Explorer
137 0 8

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

Screenshot 2023-11-05 at 10.55.35 AM.pngScreenshot 2023-11-05 at 10.56.08 AM.pngScreenshot 2023-11-05 at 10.56.27 AM.png