Product Details and Buy the Look Widgets

What is a widget?
Creating a Widget
Product Details Widgets

What is a widget?

Widgets are a more advanced version of product links, and can only be launched from the Verge viewer. "Product Details" widgets feature the ability to create (and group) polygonal links, as well as an optional "plus button" CTA. "Buy the Look" widgets allow you to feature a collection of one or more products from the database in a single popup window, making it easy to showcase matching sets, series, color variations, or items "frequently purchased together". 



Note: The "HTML5 IFrame Widget" is not covered in this article. For more information, see the following:
HTML5 IFrame Widget

Creating a Widget

To start, the process for creating each widget is largely the same:

1) Log into Publicator and click on "All Publications".

2) To the right of the publication you'd like to add a widget to, click the little icon in the 'Enrichments' column.

3) Wait for Zmags Enriched to load. Using the page-select menu on the right side, navigate to the desired page.

4) Click the cog icon on the left side and choose the type of widget you would like to create; after that, choose whether you would like to use a simple rectangular link area, or draw a more advanced polygon.

5a) If you chose the "Rectangular Tool", simply draw a box on the page by dragging from where you would like one corner to be, to where you would like the opposite corner to be.

5b) If you chose the "Polygonal Tool", click anywhere on the page to place the first point. Then click elsewhere to place two or more subsequent points. When finished, click the original point to close the polygon.



Product Details Widgets

Once you have created a Product Details widget, the following options will be available to you:



Product ID: This will be the only product information you must manually enter. Choose 'External' to use an existing  product ID from your database or if using the base URL feature. Choose "Product Database" to use one from your Zmags product database instead. If you are using the Product Database, click 'search' to fill in the next three fields automatically.

Product Name: The name of the item or product.

Product Description: A description of the item or product.

Product Price: A price for the Item or product.

Product Button Properties:

Enable button: Choose whether or not to use the "plus button" for this widget.

Top Coordinate: Distance in pixels of button from top of page.

Left Coordinate: Distance in pixels of button from left side of page.

Buy the Look Widgets

Once you have created a Buy the Look widget, the following options will be available to you:



There are two tabs in the window. The first one, Products, has the following settings:

Add product to the look: Add a new product to the window that will pop up when this widget is clicked.

Product ID: This will be the only product information you must manually enter. Choose 'External' to use a product ID with the base URL. Choose "Product Database" to use one from your Zmags product database  instead. If you are using the Product Database, click 'search' to fill in the next three fields automatically.

Product Name: The name of the item or product.

Product Description: A description of the item or product.

Product Price: A price for the Item or product.

The second tab, Properties, has the following settings:

 - Buy the look properties:
 
Title: The title to show in the popup box.

Description: The description to show in the popup box.

Statistics ID: For advanced statistics usage only, used to track activity related to this widget.

Image: Image to show in the popup box, selected from your Images folder.

- General properties:
 
Enable shape: Decide whether or not the link area polygon will be used.

Enable button: Decide whether or not the "Buy the look" button will be used.

Button text: The text that will be shown on the "Buy the look" button.