Fix hover animation of product item in featured collection section

Solved

Fix hover animation of product item in featured collection section

kirsten11123
Shopify Partner
41 0 14

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?

Screen Shot 2024-06-13 at 4.03.41 pm.png

Accepted Solution (1)
PageFly-Noah
Shopify Partner
1317 233 268

This is an accepted solution.

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

Replies 13 (13)

Darshanp712
Shopify Partner
137 21 16

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
Shopify Partner
41 0 14

Rahul_dhiman
Shopify Partner
234 44 43

Hi @kirsten11123
Please share the URL of your website.

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
kirsten11123
Shopify Partner
41 0 14
Rahul_dhiman
Shopify Partner
234 44 43

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

Check this index file and do the changes.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here

PageFly-Noah
Shopify Partner
1317 233 268

 

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
Shopify Partner
41 0 14
PageFly-Noah
Shopify Partner
1317 233 268

This is an accepted solution.

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
Shopify Partner
41 0 14

Thanks Noah, this worked great!

PageFly-Noah
Shopify Partner
1317 233 268

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
Shopify Partner
8532 1682 1692

Hi @kirsten11123 

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

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

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

dws_pvt_ltd
Shopify Partner
28 7 7

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.

dws_pvt_ltd_0-1718269540981.png

 

The collection page Looks fine.

dws_pvt_ltd_1-1718269593700.png

 

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
Shopify Partner
5636 1031 1359

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

 

ZestardTech_0-1718273528572.png

 

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