Adding Hover Effect to Reveal Price

New Member
4 0 0

All I am looking to do is add a hover effect to reveal the product price.

 

I followed this link: https://help.shopify.com/en/themes/customization/collections/add-hover-effect-to-product-images?utm_...

 

However this is what happens...

-Duplicate of product image

-Title code is revealed

-Another price is shown under product which was not inserted, usually doesn't show (www.slushb.com)

Screen Shot 2019-09-24 at 12.45.32 PM.png

 

 

0 Likes
New Member
4 0 0

Now it's looking like this...

Screen Shot 2019-09-24 at 1.00.53 PM.png

0 Likes
Shopify Expert
665 170 199

https://prnt.sc/paf432

Hi, @caroline94 ,

 

Did you change the code? Everything looks fine. You only need to reveal the price on hover then?

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
New Member
4 0 0

Hi Evita!

 

Yes i adjusted the code as you can see in the most recent screen cap. Just don't know why it's showing 2 of the same image on top of one another.

 

Just wanting to reveal price when hovering, yes. 

 

Caroline

0 Likes
Shopify Expert
665 170 199

I don't have the same issue, the images show up good - https://prnt.sc/paf7p3

But I don't see any price text on hover or in the code.

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
New Member
4 0 0

I don't have that code live, i've been working on it in a theme copy 

this is basically what I have adjusted below...

<div class="reveal">
<div id="{{ img_wrapper_id }}" class="product--wrapper">
<div style="padding-top:{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100 }}%;">
<img class="product--image lazyload {{ img_id_class }}"
src="{{ product.featured_image | img_url: '150x150' }}"
data-src="{{ img_url }}"
data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ product.featured_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ product.featured_image.alt | escape }}">
</div>
</div>
<img class="grid-product__image" src="{{ product.featured_image.src | img_url: '1024x' }}" alt="{{ product.featured_image.alt | escape }}">
<div class="hidden">
<div class="caption">
<div class="centered">
<p>{{ product.price | money }}</p>
</div><!-- end of .centered -->
</div><!-- end of .caption -->
</div><!-- end of .hidden -->
</div>

0 Likes
Shopify Expert
665 170 199

2 images are showing up, because you added 2 images codes, remove one: https://prnt.sc/paffst

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes