Adjusting hover images on featured products sections

brickbreaka
New Member
1 0 0

Hello!  I'm hoping someone can help as I feel like I'm on the right path, just not able to get there...

I'm using Flow theme.  There are sections that display featured collections in different layouts -

  • collection--collection-list.liquid
  • collection--featured-collection.liquid
  • collection--product-block.liquid

I'm trying to customize the collection--product-block.liquid to display the second image in a product on hover.  This functionality is working in the collection--featured-collection.liquid, but the layout is a boring grid.  I either want to add functionality to the product-block or change the layout of the featured collection.  I've been digging in the code with limited knowledge of liquid, and I can (kind of) see what's happening on the featured collection to get it to display the second image but I just can't connect the dots. 

What I know is the hover function I'm looking for has something to do with this line of code -

{% assign image = product.media[1].preview_image %}

Here's a sample of both sections working normally https://www.thespiceguyco.com/pages/shop-by-collection.  The sections in question are the two at the bottom of the page, the grid layout has the functionality I want and the bottom section has the layout. 

I'm also pretty sure that it's operating in conjunction with other pieces of code and I just need a nudge in the right direction.  Any insights are greatly appreciated.  Thank you!

0 Likes
paramSoft
Shopify Partner
1754 271 778

For that, I need to do some coding by entering into your store.

Would you please add me as staff member so that I can add product hover effect?

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes