How to disable Image change on hover on Store Page

Pro Tips Other Tips
1

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

image
image473×608 14.2 KB

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

image
image465×638 15.9 KB

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

image
image471×666 16.3 KB

#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

image
image800×281 42.8 KB

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

image
image472×704 15.9 KB