How to overlay product title and price on the product image collection page

Solved

How to overlay product title and price on the product image collection page

jewellerystore1
Explorer
97 0 8

Hello, 

 

On desktop: I would like the product title and price to appear as text overlay on the product image on HOVER only. Right now it is sitting below the image. I want it hidden when no hover. I would like it to look like this on hover with the second image appearing as well: 

 

Screen Shot 2024-06-21 at 11.29.50 am.png

 

On mobile: I would like the text to be overlayed on mobile like above with no hover. 

 

I am using Exhibit theme

Website link: https://nuijewellery.com.au/

 

Please help!

Thank you 

Accepted Solutions (2)

Dan-From-Ryviu
Shopify Partner
8391 1651 1665

This is an accepted solution.

Hi @jewellerystore1 

You can add this code to your theme.liquid file, after <head> and check if it work

 

<style>
@media (min-width: 990px) {
li.relative.group .tile-content-wrapper div { margin: 0 10px; }
li.relative.group .tile-content-wrapper {
position: absolute;
    bottom: 0px;
    width: 100%;
    padding: 4px 0;
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    opacity: 0;
    background: rgb(255 255 255 / 60%);
}
li.relative.group:hover .tile-content-wrapper {
opacity: 1;
}
}
</style>

 

Screenshot 2024-06-21 at 08.57.22.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

Dan-From-Ryviu
Shopify Partner
8391 1651 1665

This is an accepted solution.

You can add this code to do that

 

{%- if template.name contains 'collection' -%}
<style>
li.relative.group .tile-content-wrapper { font-size: 12px; }
</style>
{%- endif -%}

 

 

- 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 4 (4)

Dan-From-Ryviu
Shopify Partner
8391 1651 1665

This is an accepted solution.

Hi @jewellerystore1 

You can add this code to your theme.liquid file, after <head> and check if it work

 

<style>
@media (min-width: 990px) {
li.relative.group .tile-content-wrapper div { margin: 0 10px; }
li.relative.group .tile-content-wrapper {
position: absolute;
    bottom: 0px;
    width: 100%;
    padding: 4px 0;
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    opacity: 0;
    background: rgb(255 255 255 / 60%);
}
li.relative.group:hover .tile-content-wrapper {
opacity: 1;
}
}
</style>

 

Screenshot 2024-06-21 at 08.57.22.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.

jewellerystore1
Explorer
97 0 8

Thank you very much. This looks great and it worked! Do you know how I can make the font size smaller only on this page?

Dan-From-Ryviu
Shopify Partner
8391 1651 1665

This is an accepted solution.

You can add this code to do that

 

{%- if template.name contains 'collection' -%}
<style>
li.relative.group .tile-content-wrapper { font-size: 12px; }
</style>
{%- endif -%}

 

 

- 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.

BSSCommerce-TA
Shopify Expert
123 24 24

Hey, @jewellerystore1 , add this CSS to your theme.liquid file: 

 

 

.relative.group .tile-content-wrapper.mt-2 {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
}

.relative.group:hover .tile-content-wrapper.mt-2 {
    display:block;
}

 

 

 

The element containing your product name and price will appear like this when the product image is hovered. Let me know if you want to arrange them differently. 

BSSCommerceTA_0-1718936657749.png

 

 
If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

SIMICART: Mobile App Builder |Ironwork Theme - Coming Soon | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency