How to disable Image change on hover on Store Page

To disable image change on hover on the Store Page, you can use these CSS code to Website Tools > Custom CSS.

#1. Disable image change on All Store Pages

img.grid-item-image.grid-image-cover {
    opacity: 1 !important;
}
img.grid-item-image.grid-image-hover {
    opacity: 0 !important;
}

#2. Disable image change on Mobile only

Use this CSS code

@media screen and (max-width:767px) {
img.grid-item-image.grid-image-cover {
    opacity: 1 !important;
}
img.grid-item-image.grid-image-hover {
    opacity: 0 !important;
}}

#3. Disable image change on Related Products Only

Use this CSS code

div.ProductItem-relatedProducts img.grid-item-image.grid-image-cover {
    opacity: 1 !important;
}
div.ProductItem-relatedProducts img.grid-item-image.grid-image-hover {
    opacity: 0 !important;
}

#4. Disable image change on Specific Store Page only

First, you need to find the Store Page URL. Use this tool.

In my example, it is:

•  #collection-667f8bab720ee26389417857

Next, use this CSS code

#collection-667f8bab720ee26389417857 {
img.grid-item-image.grid-image-cover {
    opacity: 1 !important;
}
img.grid-item-image.grid-image-hover {
    opacity: 0 !important;
}
}