Put the title on top of the collection image, how?

Solved

Put the title on top of the collection image, how?

KGSweden
Tourist
10 0 1

Hello! I am using the Enterprise theme.

How do I fix the collection title so that it's overlaid (?) on the collection image on hover? As of now, the title is below the image. Here is the Store Link and the password is letsiz

Here is how it currently would look like:

KGSweden_0-1695370046973.png

 



Here's how i want it to look like: 

KGSweden_1-1695370047089.png

 

 

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
12000 2347 2525

This is an accepted solution.

Hi @KGSweden 


Please add this code to your theme.liquid file before </head> 

<style>
@media screen and (max-width: 749px){
.card__info {
position: absolute;
bottom: 10px;
left: 30px; 
text-align: left !important;
}
}
</style>

Screenshot 2023-09-22 at 15.52.24.png

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 5 (5)

vpsbohra
Shopify Partner
444 44 46

hi @KGSweden 

Unable to see the collection section.

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!
KGSweden
Tourist
10 0 1

Cant see this section? 

KGSweden_0-1695371619674.png

 

Dan-From-Ryviu
Shopify Partner
12000 2347 2525

This is an accepted solution.

Hi @KGSweden 


Please add this code to your theme.liquid file before </head> 

<style>
@media screen and (max-width: 749px){
.card__info {
position: absolute;
bottom: 10px;
left: 30px; 
text-align: left !important;
}
}
</style>

Screenshot 2023-09-22 at 15.52.24.png

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

KGSweden
Tourist
10 0 1

Hello Dan, thanks for the help! It didnt work to add it to the liquid file, but it worked when I added it to the custom css in the frontend builder. 

 

KGSweden_0-1695375023649.png

 

Thanks once again, you saved my day!

 

Dan-From-Ryviu
Shopify Partner
12000 2347 2525

Happy I could help!

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.