Solved

How to have Title and Price of Product show/ reveal upon hovering

sundayflea
Excursionist
27 0 3

Hello,

 

My website is currently showing the image below. I would like for the Title and Price to be hidden upon first look. Once the cursor is moved on top of the product image, the title and price would then be revealed on top of the now opaque image.

 

My current site: https://36-old-streets.myshopify.com/collections/all

Pass: 36streets

 

What I want my website page to look like when the cursor is above the product image:

 

sundayflea_1-1675659355612.png

 

When the cursor is NOT on top of the product, no title or price is shown:

 

sundayflea_4-1675659427628.png

 

Thank you for your time and help!!

Accepted Solution (1)

Cedcommerce
Shopify Expert
718 76 110

This is an accepted solution.

Hello @sundayflea

 

This issue can be resolved with a custom code. 

 

Add the below-provided code before the </head> tag in the theme.liquid file.

 

 

<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>

 <script>

   setTimeout(() => {

     console.log($("#MainContent .grid li.grid-item").text(), document.querySelector(".product-card"));

     $("#MainContent .grid .grid-view-item").hover(function(){

       $(this).find('.product-card__title').css('visibility', 'visible');

       $(this).find('.price--listing').css('visibility', 'visible');

      

     });

     $("#MainContent .grid .grid-view-item").mouseout(function(){       

       $(this).find('.product-card__title').css('visibility', 'hidden');

       $(this).find('.price--listing').css('visibility', 'hidden');

      

     });

   }, 1000);

 </script>

 <style>

   .product-card .product-card__title{

     visibility: hidden;

   }

 

   .product-card .price--listing{

     visibility: hidden;

   }

 </style>

 

Hope it helps. Let us know if you need any help from us. 

 

Regards, 

CedCommerce 

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here

View solution in original post

Replies 3 (3)
sundayflea
Excursionist
27 0 3

Hi Ankur, I tried this but there is no change to the website. I am uploading both the codes you sent to theme.liquid file at the bottom. Copied below:

 

 

.product-card .product-card__title,
.product-card .product-card__price {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}

.product-card:hover .product-card__title,
.product-card:hover .product-card__price {
opacity: 1;
}

<script>
$('.product-card').hover(
function() {
$(this).find('.product-card__title, .product-card__price').css('opacity', '1');
},
function() {
$(this).find('.product-card__title, .product-card__price').css('opacity', '0');
}
);
</script>

</body>
</html>

 

Cedcommerce
Shopify Expert
718 76 110

This is an accepted solution.

Hello @sundayflea

 

This issue can be resolved with a custom code. 

 

Add the below-provided code before the </head> tag in the theme.liquid file.

 

 

<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>

 <script>

   setTimeout(() => {

     console.log($("#MainContent .grid li.grid-item").text(), document.querySelector(".product-card"));

     $("#MainContent .grid .grid-view-item").hover(function(){

       $(this).find('.product-card__title').css('visibility', 'visible');

       $(this).find('.price--listing').css('visibility', 'visible');

      

     });

     $("#MainContent .grid .grid-view-item").mouseout(function(){       

       $(this).find('.product-card__title').css('visibility', 'hidden');

       $(this).find('.price--listing').css('visibility', 'hidden');

      

     });

   }, 1000);

 </script>

 <style>

   .product-card .product-card__title{

     visibility: hidden;

   }

 

   .product-card .price--listing{

     visibility: hidden;

   }

 </style>

 

Hope it helps. Let us know if you need any help from us. 

 

Regards, 

CedCommerce 

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here
ryanbrown26
New Member
4 0 0

Hi, 

This does not seem to be working for me. Can you please assist.