Hello! I am looking for either and app or to edit the code on my store. My store is: https://abbieleighdesigns.com/. I have the “zoom in hover” feature turned on when a customer goes into an actual product, but I want this feature also on the home page and collection pages. Right now when you hover over an image, it just highlights it. I want customers to be able to hover over the product listing and zoom into the design. Is there a way to change this to a zoom in feature so I can have it on the home page and collection page without the customer having to click all the way into the product to zoom?
Hello @abbietyler
Please follow the steps below after logging into the Shopify admin:
-
Go to your Shopify Admin panel.
-
Click on Online Store > Themes.
-
Find the theme you want to edit and then click Actions > Edit code.
-
Search theme.css
-
Insert the provided CSS code at the end of the file and save the changes.
.grid-view-item.product-card:hover .product-card__image-with-placeholder-wrapper div > div >img
{
transform: scale(1.5);
transition: transform 0.7s ease;
}
.grid-view-item.product-card .product-card__image-with-placeholder-wrapper div > div >img
{
transition: transform 0.7s ease;
}
.grid-view-item__image-wrapper
{
overflow: hidden;
position: relative;
}
Please hit Like and Mark it as a Solution if you find our reply helpful.
