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.
After activating the app, you should compile your theme. In the left-hand menu of the administration, click on the desired sales channel and open the "Theme" tab. Click on "Change theme", select the desired theme (the one already set is fine), click on "Save" and confirm with "Change theme". The theme will then be compiled. Depending on your cache settings, you may also need to clear the cache afterwards (shop cache and, if necessary, your browser cache).
In the administration, you will find the 24 doors under "Content" > "Advent calendar". The overview shows them as a table or as tiles (switch at the top right) and shows how many doors are already filled. Click on "Edit" or on the tile of a door and enter a title and text. If you like, add a link and an image. Use the language selection at the top right to maintain the content for every language of your shop.
Under "Content" > "Shopping Experiences", open the Shopping Experience in which the advent calendar should appear. Drag and drop the "Advent calendar" block from the "Text & Image" category into the Shopping Experience. When you move the mouse over the element, an icon for the settings appears. Clicking on it opens the element settings.
In the "Design" tab, choose between illustrated doors, included images and your own image. We recommend the illustrated doors: pick one of 8 styles and one of 10 colour palettes or "Your colours" to show the calendar in your brand colours. If you still use an image, the app shows a tip – click on "Try it" to switch to the illustrated doors.
In the "Content & behaviour" tab, you decide how the doors open. In December, the door of the day can be opened from midnight (your server's time). Past doors can stay open or be marked subtly. As long as preview mode is active, every door can be opened – ideal for testing. Switch off preview mode before 1 December, otherwise all content is visible in advance. Then save the Shopping Experience.
Depending on your cache settings, you need to clear the cache after editing: under "Settings" > "System" > "Caches & indexes" via "Clear caches" (or "Clear and warm up"), and your browser cache if necessary. Since the app may behave differently with certain theme, app and shop combinations, test afterwards whether the advent calendar works as intended in your shop.
In the "Design" tab of the element settings, choose the type of calendar: "Illustrated doors", "Included images" or "Own image".
8 styles, from playful to geometric. Every door is drawn to match the selected colour palette, and a preview shows each style right in the settings.
10 ready-made colour palettes or "Your colours". With your own colours, you choose a main colour and an accent colour from your brand; all other shades are derived from them. "Dark background" gives the doors a dark base tone.
The colour between the doors. It follows the colour palette as long as you don't change it yourself. "Default" resets it.
Wintry photos as the background behind the doors. Some older images are marked as "no longer available" and will be removed with the next version. If one of them is selected, it stays visible for now; "Switch now" takes you straight to the illustrated doors.
An image from your media or a new upload as the background, so the calendar matches your brand exactly. A landscape image works best.
For images, you set the colour and style of the numbers (style 1 to 3). To keep the numbers easy to read, you can show an overlay and set its opacity in percent. Illustrated doors come with their own numbers.
The colour of the buttons, e.g. the link in an opened door.
In the "Content & behaviour" tab, you set the title and description shown above the advent calendar.
Every door can be opened, regardless of the date. Ideal for setting up and testing. While preview mode is active, the Shopping Experience shows a notice. Switch it off before 1 December.
All doors up to the current day stay open, so customers who missed a few days can catch up.
Instead of leaving them open, you can mark past doors subtly (style 1 or 2). This option and "Leave passed doors open" exclude each other.
Normally, the doors appear in order. If this option is active, the "Priority" field of each door determines the order – so you can arrange the doors in a mixed-up order.
Shows the images in opened doors in a larger size.
The options in the "Test" tab (debug mode and event month) are meant for developers and our support only. Leave them switched off unless our support asks you to use them.
Under "Content" > "Advent calendar", enter a title (up to 50 characters) and a text (up to 200 characters) for each of the 24 doors. Use the language selection to maintain the content for every language of your shop.
Activate "Link" to show a button in the opened door, e.g. to a product, a category or a promotion. Enter the URL and the link text (up to 30 characters). With "Open link in same tab", the link opens without a new tab. With "Advanced URL field", you can also enter relative links such as /christmas-recipes/.
Activate "Image" to show an image in the opened door. Enter the URL of the image and a title.
A number from 0 to 100 for the order of the doors. It only takes effect if "Set the day position through priority" is active in the element settings.
Links and images are only shown in the shop if all fields are filled in. If, for example, the link text is missing, the overview shows a ⚠ with the missing field on that door.