Click "Install" in the Shopify App Store. The app doesn't change your theme's code: it only appears in your store once you add its block in the theme editor. To try it out first, add the block to a copy of your theme and check it in the preview.
In the next step, you will be shown which authorizations the app requires. Agree to the requested authorizations and click on "Install" to continue with the installation of the app.
Once the installation is complete, you will be taken to the start page of the app. The app is also displayed in the menu on the left side. By clicking on the pin symbol to the right of the title, you can pin the app to the navigation bar.
Below, we explain how you can set up the app after installation.
In the left sidebar of your Shop Admin, under "Advent calendar", click on "Plans". On our plan overview page, you can see the available plans along with their prices and features. Choose between the Free Plan, which is ideal for getting acquainted with the app, and the paid Pro Plan. The Pro Plan offers advanced features such as multiple calendars, designs that match your store, illustrated door designs, your own background image, a choice of how the doors open, a countdown to the start and more. To switch, click the button in the box of the desired plan. You will be forwarded to Shopify, where you confirm the plan. The Pro Plan can be tested free of charge for 7 days and is billed directly via Shopify.
When you install the app, it already creates your first advent calendar, with its 24 doors filled with sample content. You can find it in the left sidebar of your Shop Admin under "Advent calendar" > "Calendars". With the Pro Plan, you can create more calendars there using the "New calendar" tile. Each new calendar has 24 doors and a name made of "Advent calendar" and the current year, which you can change at any time under "Calendar name" on the calendar's overview page. The name is only shown to you, not to your customers.
Click on a door to edit it. Give each door a title and content, e.g. a discount code, a product tip or a little surprise. You can format the content and add links. Save the door by clicking "Save" or "Save & back to overview". With "Previous" and "Next" you can jump directly to the neighbouring doors.
On the overview page of your calendar, click "Edit design". There you can choose between illustrated doors (sets with a picture for every door), backgrounds, designs that match your store (pick a style, a color palette and a font for the door numbers) and your own image from your Shopify media library. Depending on the design, you can also adjust the number style, the circle color, the background color and the countdown color under "Appearance", and falling snow under "Effects". The preview shows right away how your calendar will look. Click "Save" to apply the changes to your store.
The door mode, the hint on closed doors and the countdown are set on the calendar's overview page under "Settings". These changes are saved right away and applied to your store automatically.
In the left sidebar of your Shop Admin, under "Advent calendar", click on "Help" and then on "Open theme editor". The theme editor opens with the advent calendar block already added to your home page.
Alternatively, you can add the block manually: In your Shop Admin, click on "Online Store" in the left sidebar, select your desired theme and click "Customize" next to it. In the top bar, use the dropdown menu to choose the template where you want to show the advent calendar (home page, page, product, collection, blog or article). Click "Add Block" in the desired section and choose the "Advent calendar" block in the "Apps" section.
Please note: App blocks require an Online Store 2.0 theme (e.g. Dawn).
Click on the advent calendar block in the left sidebar of the theme editor. Under "Calendar", select the calendar you created in the app. Save your settings by clicking the "Save" button located in the top right corner of the theme editor.
As certain theme, app, and shop configurations may affect proper functionality, it is recommended to test whether the calendar displays and operates correctly in your shop as intended.
Tip: In the block settings, you can enter a test date in the format DD.MM (e.g. 05.12) under "Test date". This lets you preview in the theme editor how the calendar looks on that day. The test date is only applied in the theme editor, your customers always see the real date.
Each of the 24 doors has a title (up to 80 characters) and content (up to 5,000 characters), which you can format and add links to. The content appears in your store as soon as the door opens. In the calendar overview, you can see at a glance how many doors are already filled and switch between a tile and a table view.
Choose a background image for your calendar. The Free Plan includes a selection of backgrounds, the Pro Plan includes all designs.
Illustrated sets with a picture for every door. The opened door is designed to match the set, too.
Drawn doors you can adapt to your store: pick a style, a color palette and a font for the door numbers. Instead of a palette, you can also use your own colors: a main color and an accent color from your brand, optionally on a dark background. The other shades are derived from them. On the Free Plan, you can try every style and palette in the preview.
Use an image from your Shopify media library as the calendar background, so the calendar matches your brand.
With backgrounds and your own image, choose between a plain number in white without a background and (Pro Plan) a number with a circle. With illustrated doors and designs that match your store, the numbers are part of the design.
Set the color of the circle behind the door numbers. This setting appears when you have chosen the number style "Number with circle".
With illustrated doors and designs that match your store, you can change the color between and behind the doors, or reset it to the design's color.
Choose how the doors open: past doors stay open (default, also available on the Free Plan), only the door of the current day can be opened, or all 24 doors can be opened at any time regardless of the date. Doors open at midnight in your store's time zone.
When a customer clicks on a closed door, a hint shows when the door opens or that it has already passed.
Before December 1, shows how many days are left until the first door opens, to build anticipation before the start. When the countdown is on, you can change its color under "Edit design" > "Appearance". Without a color of your own, a color that matches the design is used.
Lets snow fall over the calendar with backgrounds and your own image, for a wintry look. You can find it under "Edit design" > "Effects".
On a calendar's overview page, you can duplicate it with the Pro Plan, e.g. to create a version for another market. Deleting a calendar permanently deletes it with all 24 doors and removes it from your store. This can't be undone.
In the theme editor, you can enter a test date in the format DD.MM to preview the calendar as it looks on that day. Leave the field empty to use today's date. The test date is only visible in the theme editor.