Uploading an Image and Starting the Editor
The editor can be accessed by navigating to the attachments section of a product and by uploading the desired image. Once the file upload has completed the following icon in the screenshot below will be available.
Confirm by hitting ‘Enter’ and reload the page. This icon should be available afterward. Clicking on the icon will load the editor.
Creating Hot Spots and Assigning Products
Once the editor is loaded, the user can create new hot spots and assign products to these clickable areas. For this, the user clicks on the ‘+’ icon and then clicks on a location on the image where the hot spot should be placed. The user can replace the hot spots as well as maintain a pointer towards a specific place on the image for increased visibility. Both, the hot spot itself and the pointer can be rearranged by dragging and dropping the respective elements. If created by mistake, the hot spot can be removed by clicking the ‘trash can’ button.
Once the hotspot is placed correctly, the user can then use the right hand side of the screen to associate a product. This step can be repeated over and over again until all relevant products are added to the image.
Mass Upload of Products
Instead of manually creating and maintaining all hot spots and their respective product assignments, the user can also upload an Excel file with multiple product references in one go. For this, the template can be downloaded using the following button:
The template has three (3) columns which are outlined in the following image:
Note: the fields need to be configured/formatted as text / String, otherwise the upload functionality may not work properly. The administrator can maintain one, two, or all three columns for any row in the Excel file. The system will ensure that all information in one row points to the correct product. If there are inconsistencies, the system will skip that record and render a respective error message.
When ready, the file can be uploaded using the following button:
After a successful upload, the system will have generated an adequate number of hotspots corresponding to the rows provided in the excel. The user can then rearrange these hotspots directly in the image.
Note: For this feature to work in Commerce, also ensure that the products/parts are visible in commerce.