View Product Page

Real order notification

Step 1 – Add a new notification

Add new notifications

By clicking on the “+ Add notification” button a popup will open and we will select the notification we want to create. In this case, we want to add a ‘Real order’ notification to show purchases made by real customers.

Select notifiction - real order

Step 2 – Notification name

The name you give in here is for admin use only. The customer will not see this name, this is simply the title you give to the notification, it is a mandatory field.

Real order notification

Step 3 – Notification content

First, we start by adding the text of the notification content. As you can see in the example below, you can edit the font, the size, etc.

real order content text

  • Notification text: You can use the available placeholders: %customername%, %customerlocation%, %productname%, %timeago%.

On the right side, you see a preview of the notification you are creating in real time. It changes dynamically as you are editing the notification.

Step 4 – Image options

Now we decide whether to add or not add an image to the notification.

real order content image options

  • Notification image: Decide to show no image, the product image or upload a custom image.
  • Image position: Decide to show it above, left, right or under the text.
  • Image alignment: Depending on the position, decide the horizontal/vertical alignment.
  • Notification links to: When clicking on the notification, it redirects to:
    • Nothing – no link: The notification is not clickable.
    • The product page: Redirect to the product page.
    • A custom link: Add a custom URL to redirect the customer

In this example, we choose to show an image on the top left side. 

For more information on the image position and alignment, check this page here.

Step 5 – Products to show

Now we can decide when we want to show the notification and which products it can or cannot include.

real orders products to show

  • Promote orders made in the last: Show orders made in the past xx days/hours.
  • Promote orders with status: Decide which orders you want to show.
  • Hide out of stock products: If an order has been made for a product that is now out of stock, the notification will not be shown.

real orders - exclude products

  • Exclude products: Decide to exclude products and/or categories from showing in notifications.
    • Products to exclude
    • Categories to exclude

Step 6 – Style

Moving on to the ‘Style’ tab where we can manage the colors, padding, background, etc. of the notification.

real orders style

  • Width (px): Width of the notification.
  • Background colors: Default color, and color on hover state.
  • Add background image: Decide to show and upload a custom image as a background, instead of a color.
  • Border radius (px): Decide to have square or rounded edges (0 for square).
  • Padding (px):  Decide the amount of space around the content.
  • Shadow: Add a shadow color to the notification (eg. red).

Again, on the right-hand side, you can see the changes you apply directly in the preview.

Step 7 – Display options

The ‘Display options’ allow us to override the default options we have set, with regard to displaying the notification.

real orders display options - position

  • Override default position: decide to change the default position of the notification.
  • Select a position: decide where on the page to show the notification:
    • Top left
    • Top right
    • Bottom left
    • Bottom right

Real order display options

  • Override default display options: Decide to change the default display options for the notification.
  • Show this notification to: Show it to all users, only guest users, or only logged-in users.
  • Additional geolocation filter: Decide to hide or show notifications to users from certain countries.

Override geolocation in notification

  • Notification visibility on pages: Decide to show the notification on all pages or only specific pages.
  • Notification visibility on product pages: Either show on all product pages, specific product pages or specific product categories.
    • Decide to show or hide the notification on selected products or categories.

For example, we want to show this notification to users from Spain, although by default, these users do not see notifications. Because in the general ‘Display options’ settings, we have excluded that country. 

Step 8 – Final result

On the frontend, the notification would look like this:

Frontend example