Move product title and price / on top of product image right on the bottom in a card.

BERNAT-LASDUNAS
Tourist
16 0 3

Hey community, 

How are you doing.

I'm trying to add this card feature on top of the product image so there is no space between the product images. 

As You can see in the example below.

 

this is my site URL:  www.lasdunasbyron.com

Thanks for your time and help! 🙂 

 

 

 

 

 

Screen Shot 2023-05-10 at 7.20.44 am.png

Replies 6 (6)

Dan-From-Ryviu
Shopify Partner
7514 1450 1447

You can do that by adding this CSS code at the bottom of your base.css file in store admin > Sale channels > Online store > Themes > Edit code > Assets 

@media only screen and (min-width: 768px) {
.card__content {
position: absolute;
}
.card-wrapper:hover .card__content .card__information {
background: #999;
}
}

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

jewellerystore1
Excursionist
76 0 8

Hi, 

 

I added this code but it has put the text at the top of the image. Can you help me change the text to be at the bottom left corner and not right on the edge?

https://nuijewellery.com.au/collections/new-arrivals

Thank you

 

Screen Shot 2024-03-14 at 8.43.47 pm.png

Dan-From-Ryviu
Shopify Partner
7514 1450 1447

Hi, you solved it. Congrats

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

jewellerystore1
Excursionist
76 0 8

I did but there's a couple issues. 1. it's not showing on mobile. 2. I need to add spacing from the left edge so it's not right on the edge. PLEASE HELP!!

 

Thank you! 

Dan-From-Ryviu
Shopify Partner
7514 1450 1447

Go to your base.css file, remove those lines that wrap your code to make it work for mobile .

Screenshot 2024-03-15 at 08.51.16.png

You can add value to the left in that code to make it the left edge.

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

eCommerceThesis
Shopify Partner
4 0 0

Here is the easy guideline that you can follow.
https://www.youtube.com/watch?v=Oub7JrMLl2I