Learn how to configure the notification building block

Bart Coppens avatar
Written by Bart Coppens
Updated over a week ago

What does a notification look like?

The notification looks as follows:

You can choose from a number of available templates to configure the look and feel of the notification and tweak text and colors.

What does a notification accomplish?

A notification can be set up to:

  • Confirm to a visitor that they benefit from a discount, have unlocked free shipping, received a gift...

  • And/Or, let a visitor know what they need to do (spend more, buy a specific product) to unlock a discount

Can I change where the notification is displayed?

Yes. The notification is displayed in the bottom left corner of the screen by default. You can move it to any of the four corners of the screen, and you can apply an offset to ensure it does not overlap with other widgets that may be in the same corner.

Additionally, you can define on what pages the notification should be displayed

See below for instructions on how to edit the notification.

Can I change the text of the notification?

Yes. All text is configurable.

The notification contains configurable text for its header section, its footer section, and the countdown section (only applicable if you have activated a timer).

The text in the middle of the notification (the body) consists of one line per activated offer.

See below for instructions on how to edit the notification.

Can I change the appearance of the notification?

Yes. You can select from a number of themes to change the style of the notification. You can also tweak the colors, borders, text and other elements of the notification to ensure it aligns with the style of your shop.

If necessary you can also add custom css for advanced styling. Custom css should be added in Settings > General > Css.

How do I edit a notification?

Open Promotions, find your promotion and click Edit. Next, navigate to the Offers section, find the offer and click Edit building blocks. Then find the Notification building block and click Edit.

For a detailed guide on the above steps, check this article:

Select a theme (Optional)

Themes are a convenient way to change the style of the notification. You can select one from the list by browsing through the list and clicking Select.

Select a color palette (Optional)

A number of color palettes are available to change the colors applied to the building block. You can change all colors individually as well (see below).

Edit style

This section allows you to see a preview of the notification on a mobile device or a desktop:

You can zoom the preview and you can drag the preview up, down, left and right to focus on different elements:

To change the style of the background, border... move the cursor to the section on the right and scroll to the settings you want to edit. Each section expands to allow you to configure the settings:

Change the location of the notification

To change the location of the notification, select a position:

And optionally set an offset to avoid overlapping with other widgets. The offset expresses the distances of the notification to the border of the screen:

Add an image

The notification can display an image (the image of the first offer is used, it is not possible to use an image per offer).

To select an image, check Show image and click Upload image.

Edit text

The notification has four different sections of text that can be configured per offer:

  • Header: displayed at the top (the text of the first offer that applies is used)

  • Body: this text is displayed in the middle of the notification, one line per offer is displayed

  • Footer: displayed at the bottom (the text of the first offer that applies is used)

  • Text when minimized: the text displayed on the notification when it is minimized (the text of the first offer that applies is used)

When multiple offers apply to the same cart, the app will use the style of the first offer that is applied and will show the header, footer, and "text when minimized" of that offer.

The body will consist of one line for each offer that applies to the cart.

When configuring the text of the body you can configure text to be displayed:

  • Immediately: this can be used to "announce" an offer. For example "Add $10 to get a free gift". This displays the notification, even if the cart does not yet contain $10.

  • When goal achieved: only displays the notification when the offer is unlocked. For example: "You have unlocked a gift!"

Change what pages and devices the notification is displayed on

To change where notifications are displayed, navigate to the "Pages and devices" tab:

This section also allows you to configure if the notification should be displayed on mobile devices or not:

Did this answer your question?