Please first use the test version of the app in a test environment in your shop to ensure that the app works smoothly in your shop with the theme and apps used and with your shop configuration.
Install the app in a test environment in your shop. If you install the app in the live environment of your shop, you should make a complete backup of your shop beforehand, as the reinstallation of apps can always lead to incompatibilities and, in the worst case, to the non-functionality of your shop.
After you have obtained the test version of the app via your Shopware account, you can download the app from the Shopware store. You can then upload the app in the backend in the area "Extensions" > "My extensions" by clicking on the blue button "Upload extension" (top right).
If the app has been uploaded successfully, it should appear in the "My Extensions" list in the "Apps" tab. You can now install the app in your shop by clicking on the "Install app" link.
In the following we explain how you can set up the app after installation.
As soon as you have installed the app, you can activate the app in the administration in the area "Extensions" > "My extensions" in the "Apps" tab by clicking the controller button to the left of the app name. When the app is active, the slider turns blue.
To add images with hotspots to your shop, navigate to the "Contents" > "Shopping Experiences" section in the backend and open the desired Shopping Experience where the hotspots should appear. Next, you can add the "Animated Hotspots" block to the Shopping Experience by dragging and dropping it. You can find the block in the "Text & Image" category. When you hover over the element, an icon for settings will appear. Clicking on the settings icon allows you to edit the respective element.
In the options of the element, you can select the desired image on which the hotspots should appear. For optimal display, we recommend an image resolution of 1920 x 960 pixels for the image you upload. Ideally, you should compress the image before uploading. Save your desired settings by clicking the "Done" button. You will then see a grid overlaying the selected image. Using this grid, you can determine the positions where the hotspots should appear on the image. Note down the desired positions (e.g., "hotspot 1 position G3" or "hotspot 2 position C21") for the image hotspots. The position consists of a letter for the row (A-T) and a number for the columns (1-32). For example, if you want the hotspot to appear in the bottom left corner of the image, note down "row T" and "column 1" for hotspot 1. Later, you can enter these positions in the app settings for each hotspot. Finally, save the Shopping Experience.
Once you have set the image, you can make further settings for the app in the administration under "Extensions" > "My Extensions". First, access the context menu for the app by clicking on the button with three dots ("...") next to the app name. Then click on "Configuration" to view the app's configuration options. You will see various options for configuring the animated hotspots. Here, you can set the texts, the marker positions, and other settings. As described in Step 3, the position is composed of a letter for the row (A-T) and a number for the columns (1-32). Depending on where you want the hotspot to be positioned on the image, you can specify the target position on the image. For example, if you want the hotspot to appear in the bottom left corner of the image, select the letter "T" for "row" and the number "1" for "column" here. Once you have set the desired options, click "Save".
As it may sometimes happen that the app does not function correctly under certain theme, app, and shop configurations, it is recommended to test whether the image hotspots are working as desired in your shop.
You can select an existing image from your media folders or upload a new image. For optimal viewing, we recommend a resolution of 1920 x 960 pixels for the image you upload. At best, you should compress the image before uploading.
You can choose from 3 different designs how the markers should be displayed.
Enter which content should be displayed for marking.
Set with the help of our column and row grid at which positions on the image the markers should be located.
You can set individual colors for the hotspots.