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 compile your theme in your Shopware 6 shop, first log into the administration of your shop. Click on the desired sales channel on the left side menu of the administration and then select the tab "Theme". Then click on the button "Change theme", select the desired theme (possibly the same, which was already set), save your selection by clicking on the blue button "Save" and confirm the action by clicking on the blue button "Change theme". The theme should then be compiled. Depending on the cache setting, you must then also clear the cache (both the shop cache and, if applicable, your browser cache).
To add an image with hotspots to your shop, go to the administration in the area "Contents" > "Shopping Experiences" and open the desired experience world in which the image should appear. You can then add the "Image with hotspots" block to the Shopping Experience using drag & drop. You will find the block in the "Text and Image" category. If you move the mouse over the element, an icon for the settings appears. By clicking on the settings icon allows you to edit the respective element.
In the options of the element, you can make the further configuration in the tab "Settings". Here you have the option of defining the image, the number of markings, the design and the color for the markings and links. For an optimal display, we recommend a resolution of 1920 x 960 pixels for the image that you upload. Ideally, you should compress the image before uploading it.
In the options of the element, you can specify the position of the marking and the content that appears when hovering over the respective marking in the respective tab ("Marking 1", "Marking 2" etc.). Save your desired settings. If you are happy with the content and settings you have set, save the Shopping Experience.
Since it can always happen that the app does not work properly in the context of using certain theme, app and shop constellations, you should test whether the image markings work as desired in your shop.
You can choose an existing picture from your media folders or upload a new picture. For an optimal display, we recommend a resolution of 1920 x 960 pixels for the image that you want to use. Ideally, you should compress the image before uploading it.
Decide how many marks you want to appear on the image. You can use up to 50 marks.
Select from 3 different designs how the markings should be displayed.
In order to match the markings to the picture, you can set any color for the markings. The link that appears in the content box when hovering over a marker uses the same color.
Write the title displayed in the content box. This box appears when hovering over the corresponding mark.
Write the description displayed in the content box. This box appears when hovering over the respective marking.
You can select whether a link should be displayed in the content box for marking.
Here, you can set the URL linked in the content box.
Write the label for the link.