Fix hover animation of product item in featured collection section

kirsten11123 · ‎06-13-2024

Hi!

I have adjusted the product item to have more padding around the item (when not hovered) however now the theme's inbuilt hover animation is showing wrong as shown in screenshot below.

Any tips on how to fix this?

PageFly-Noah · ‎06-13-2024

Hi @kirsten11123 Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

Hope my solution will help you resolve the issue.

<style>
.featured-collection-grid__inner .product-item{
       height: 100% !important;
}
.featured-collection-grid__inner .product-item__inner{
       height: 100% !important;
}
</style>

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Darshanp712 · ‎06-13-2024

Hi @kirsten11123, Please share your store URL and password.
So that I will check and let you know the exact solution here.

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution.

kirsten11123 · ‎06-13-2024

https://y3jzs41rkhdfijkr-17718763.shopifypreview.com

Rahul_dhiman · ‎06-13-2024

Hi @kirsten11123,
Please share the URL of your website.

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront

Contact here

BEST CUSTOMER ACCOUNTS APP WITH CUSTOM WISHLIST OPTION 
TRY OUR APP :

PWC: Customer Accounts & Pages

kirsten11123 · ‎06-13-2024

Sorry here you go - https://y3jzs41rkhdfijkr-17718763.shopifypreview.com

Rahul_dhiman · ‎06-13-2024

@kirsten11123 , Please check the screen shot.
By increasing or decreasing the font size, the hover effect willa adjust accordingly.

Check this index file and do the changes.
Thanks

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront

Contact here

BEST CUSTOMER ACCOUNTS APP WITH CUSTOM WISHLIST OPTION 
TRY OUR APP :

PWC: Customer Accounts & Pages

PageFly-Noah · ‎06-13-2024

This is Noah from PageFly - Shopify Page Builder App

I can help you. Please can you provide the website url. Thank you.

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.

kirsten11123 · ‎06-13-2024

Sorry! https://y3jzs41rkhdfijkr-17718763.shopifypreview.com

PageFly-Noah · ‎06-13-2024

Hi @kirsten11123 Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

Hope my solution will help you resolve the issue.

<style>
.featured-collection-grid__inner .product-item{
       height: 100% !important;
}
.featured-collection-grid__inner .product-item__inner{
       height: 100% !important;
}
</style>

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.

kirsten11123 · ‎06-14-2024

Thanks Noah, this worked great!

PageFly-Noah · ‎06-14-2024

Hi @kirsten11123 Thank you, Have a nice day 😉!

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.

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

Hi @kirsten11123

Please add this code to theme.liquid file. after <head> to solve this issue

<style>
.product-item__meta { min-height: 140px; }
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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.

dws_pvt_ltd · ‎06-13-2024

Hello @kirsten11123

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid

Step 3: Insert the below CSS at the bottom of the file -> Save

.product-item__product-title.fs-product-card-title {
    white-space: normal;
    height: 21px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-height: 1.1;
}

The home page looks fine.

The collection page Looks fine.

Best Regards,
Dws_pvt_ltd

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.

ZestardTech · ‎06-13-2024

Hi @kirsten11123

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

.featured-collection-grid__inner .product-item{
height: 100% !important;
}
.featured-collection-grid__inner .product-item__inner{
height: 100% !important;
}

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

Fix hover animation of product item in featured collection section