Boundless Theme - Price display issue

[BestGift]

Hi,

I'm looking for some help here please.

I am using the boundless them but I wasn't happy with the way the products were showing the pricing, with the pricing only showing on image hover.

I did some research and found a reply on Shopify forum, to a previous post by another user, where you could add a snippet of code to allow the pricing to show at all times. image 1

The problem that I have now is that when you hover over the name and price this section actually moves down (almost disappearing) and doesn't show again until the screen is refreshed. image 2

Ideally I would like the product price to remain on screen, even when being hovered over.

Any help would be greatly appreciated. Below is a link to an example page on my website.

https://purestylecollection.com/collections/handbags

Many thanks

[KetanKumar]

@BestGift 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question. 😊\

Do you have fix this issue?

[BestGift]

Thanks for you reply.

No i haven't had a fix for the issue yet, when you first load the page the pricing is fine, but when you hover over the product prices they slide down (out of screenshot) and don't slide back up until the whole page is refreshed.

If you have a solution to this I would very much appreciate it?

[KetanKumar]

@BestGift 

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

[BestGift]

Hi, Thank you for your reply.

I was using Mozzilla Firefox as the browser. I have checked another browser (safari) and the pricing is behaving as expected. It would seem it might be isolated to Firefox then for some reason.

Any Idea on a fix for that, for customers visiting on Firefox?

Many thanks for your time and help with this.

[WinkyApps · Accepted solution]

Hi @BestGift 

Welcome to Shopify community and thanks for posting this question. 

Can you search for the below code in your Settings > Online Store > Themes > Action > Edit Code > theme.css file

.product-item__meta:hover .product-item__meta__inner,
 .product-item__meta:focus .product-item__meta__inner {
  top:50%;
 }

and replace it with this below code

.product-item__meta:hover .product-item__meta__inner,
 .product-item__meta:focus .product-item__meta__inner {
  /* top:50%; */
 }

All we are doing here is commenting out the top 50% position of the element so that it will not be applied on all browsers. 

Try and let me know if that works for you. Hope this helps.

[BestGift]

Excellent, that has worked perfectly.

Thank you so much for your help with this!

[WinkyApps]

Glad it helped you. Thanks 

[BijoouxLuxe]

@KetanKumar ,

Can you upload customize the Boundless theme on my site I currently have district, which is slow and not as pretty. Id like to change it next week.

Thanks..

[TheButterflySpo]

.........

[TheButterflySpo]

so, i thought it the previous code above would fix the same issue i currently am having but when i go to themes and then edit code and copy and paste your intial code you posted, it is not finding anything for some reason. so i do not know where to paste the code at? i am using the same theme, boundless. if you are able to help id greatly appreciate it, tia!

[KetanKumar]

@TheButterflySpo 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[TheButterflySpo]

thebutterflyspotboutique.com password: hello

[KetanKumar]

@TheButterflySpo 

thanks for detail can you please share issue images?