Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Product hover effects

Hover effects display information or create movement when you move your cursor over a product image, adding interaction and animation to your store. You can use hover effects to display product names and prices without obscuring an image or using extra space on a page.

Hover effects are available on any template's Products Page. Some templates have more advanced effects.

Classic hover options

You can display product names and prices over a color overlay on hover in templates that support the Classic Products Page.

To enable this:

  1. Go to your Products Page.
  2. From the Home Menu, click Design, then Style Editor.
  3. Scroll down to the Products section.
  4. Select Product List Titles: Overlay.
  5. Use the Product Overlay Color tweak to set the color that displays over the image and behind the text.
  6. Choose whether to Show Product Price.

To display no effect on hover, select Product List Titles: Under.

Note: On mobile, titles and prices always display under the image. The overlay color doesn't display.

basic-overlay.gif

 

Advanced hover options

You can show an alternative image, product details, or a fade effect on hover in templates that support the Advanced Products Page.

Tip: These templates also support Quick View and Image Zoom.

To adjust the hover options in these templates:

  1. Go to your Products Page.
  2. From the Home Menu, click Design, then Style Editor.
  3. Scroll down to the Products sections and follow the tips below.
Note: On mobile, item names and prices always display below the image. Alternative image and fade effects don't display.

Alternative image

This is a great way to show off a special feature or key detail for each product. 

To enable this feature:

  1. Add at least two images in the Product Editor.
  2. In the Products: Layout section of the Style Editor, select Item Hover Behavior: Show Alternate Image.
Note: If you can’t see the Item Hover Behavior tweak, select Position: Under in the Products: Details section of the Style Editor.

The second image in the Product Editor shows on hover. Drag and drop the images in the Product Editor to determine the image order.

marta-products4.gif

Fade

Select Item Hover Behavior: Fade in the Products: Layout section of the Style Editor to create a fade effect on hover.

Note: If you can’t see the Item Hover Behavior tweak, select Position: Under in the Products: Details section of the Style Editor.

marta-products5.gif

Product overlay

In the Products: Details section, choose Position: Overlay to display product information on hover. If you choose this option, the Item Hover Behavior tweak disappears. This replaces any hover styles you’ve set in the Products: Layout section.

marta-products6.gif

No effect

To display no effect on hover, select Position: Under in the Products: Details section of the Style Editor, and Item Hover Behavior: None in the Products: Layout section. 

Galapagos and Supply

Galapagos and Supply have Unique Products Pages.

Was this article helpful?
7 out of 14 found this helpful
Product hover effects