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

jewellerystore1 · ‎06-20-2024

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:

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

Dan-From-Ryviu · ‎06-20-2024

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>

- Found this helpful? Hit "Like" and "Accept as Solution"! Support me: Donate!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Dan-From-Ryviu · ‎06-20-2024

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 -%}

- Found this helpful? Hit "Like" and "Accept as Solution"! Support me: Donate!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Dan-From-Ryviu · ‎06-20-2024

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>

- Found this helpful? Hit "Like" and "Accept as Solution"! Support me: Donate!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

jewellerystore1 · ‎06-20-2024

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 · ‎06-20-2024

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 -%}

- Found this helpful? Hit "Like" and "Accept as Solution"! Support me: Donate!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

BSSCommerce-TA · ‎06-20-2024

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.

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

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

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

Community Blog Articles