How do I add a product details overlay for a catalog element?

You can add a product details overlay (popup window) for the products view in HTML catalog format. An overlay can display more detailed information about the product while keeping catalog visitor on the same page. Overlay is using product templates to render product information.

To add overlay follow the steps below.

1. Prepare product templates for overlays. Read how to create a new product template.

2. Select a default product overlay for a catalog from Catalog Properties.

catalog-default-overlay

3. Select  overlay for any product element (Text, Image or Template). Select overlay option for the element. Override a Default catalog overlay with other product template using drop down if you want to change a default overlay template for this element.

catalog-product-element-overlay

 

4. Test overlay in your catalog. Hover with mouse over the catalog page in HTML viewer and click on overlay icon.

catalog-overlay-icon

catalog-overlay-window

 

Leave a Reply

Your email address will not be published. Required fields are marked *