# (Squarespace Free Plugin) Store Hover Image

**URL:** <https://community.elfsight.com/t/squarespace-free-plugin-store-hover-image/160800>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [May 21, 2026, 2:04am UTC](https://community.elfsight.com/t/squarespace-free-plugin-store-hover-image/160800 "2026-05-21T02:04:07Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [May 21, 2026, 2:04am UTC](https://community.elfsight.com/t/squarespace-free-plugin-store-hover-image/160800/1 "2026-05-21T02:04:07Z")

</div>

**Description:** replace images in Store Page with Images in Product Additional Info

(you can use it for both your personal + client sites 😁)

**#1.1.** First, add an Image Block in Additional Info

 ![02.26c20v2 Store Hover Image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/3/1/311a6fd1a7043c811d8e7ab682fba476b112d46d.jpeg)

**#1.2.** Add text: hover-img to Image ALT

 ![02.26c20v2 Store Hover Image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/7/0/70fbbf2093c84d5b9283e031c6662b28d97dda50.jpeg)

**#1.3.** Click Gear icon on Store Page

 ![02.26c20v2 Store Hover Image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/b/a/bac984a6b44f832111d3cefc492da615482b46e8.jpeg)

Click Advanced \> Page Header Code Injection

 ![02.26c20v2 Store Hover Image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/2/5/25aea35656a2486117206078613144045b9826b2.jpeg)

**#1.4.** Add this code

```auto
<!-- 02.26c20v2 Store Hover Image -->
<script>
window.HOVER_IMG_CONFIG = {
  targetImage: 'hover',
};
</script>
<script src="https://code.beaverhero.com/store/0226c20v2storehoverimg.js"></script>

```

 ![02.26c20v2 Store Hover Image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/a/c/ac831826fc3e7f7cc8e267aa230479bf606e2f26.jpeg)

**#2. Customize**

**#2.1.** Products in Store Page has 2 images: initial image – hover image

By default, code will replace hover image with images from Additional Info.

If you want to replace Initial image instead, change this line (Line 04)

```auto
targetImage: 'hover',

```

to something like this

```auto
targetImage: 'initial',

```

**#2.2.** To hide images in Additional Info, use this code to Custom CSS

```auto
body[class*="type-products"]:not(.sqs-edit-mode-active) div.image-block:has([alt*="hover-img"]) {
    display: none;
}

```

 ![02.26c20v2 Store Hover Image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/0/7/07e395661b6cd3548c7f1e56196594203e33a870.jpeg)