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
8440 1660 1675

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 and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 5 (5)

laddisahsi
Shopify Partner
385 38 40

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
8440 1660 1675

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 and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- 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
8440 1660 1675

Happy I could help!

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.