Notifications

Once you install the Shopify app into your store, you must enable the app by going to the theme section of your store.

After enabling the app in your store, you can begin with creating coupon notifications.

To start with, go to Notifications and select the Create notification button.

  1. Main Settings

This is the first step which helps you create the popup notification.

  • Notification name - Set the name of this notification to identify on app backend.

  • Image - Set an image for the coupon popup if you want to.

  • Title - Set a title of this notification popup that will be displayed to your customers.

  • Subtitle - Enter a subtext for the popup notification for more information.

  • Image ALT - Set the image ALT text (for image optimization purpose) for the search bots to identify your notification content.

  • Coupon Code - Set a coupon code for your users to avail of the offers.

  • Button URL - Enter the URL to which you want your customers to be redirected. The link can be of any product page, category page or CMS page for more information. The link can be opened in the same window tab or a new tab by adjusting the toggle button.

  • Button text - Enter the text that you want on the button.

  1. Triggers

Enable the toggle button to decide where to show the popup notification on your store. It will trigger the notification accordingly.

  • Display Trigger - Choose the trigger method of this popup notification - Delay, Mouse click, Exit Intent, Mouse hover or Scroll percentage.

  • Seconds until the notification shows up - Set specific seconds of delay after which you want the notification to be displayed again to your customers.

  • Display frequency - Select if you want the popup to be shown to your customers only once during their entire session or every time they visit your store.

  • Schedule - Select the checkbox if you want to schedule the popup and set the time accordingly.

  1. Display

  • Direction - Adjusting direction, you can switch the positions of image & coupon code content from left to right & right to left.

  • Display screen position - Select where you want your popup notifications to be displayed: Top (left, right, center), Middle (left, right, center), or Bottom (left, right, center).

  • Display Duration - Set the duration as how many seconds the notification popup should be displayed.

  • Display close button: Enable the button if you want to show the close button on the popup notification.

  1. Customize

This is the section from where you can easily customize the layout of the notification popup.

  • Title color - Select the title color of the notification popup.

  • Title font size - Select the font size of your notification title popup.

  • Description color - Select the color of the description added to your notification popup.

  • Description font size - Select the font size of the description added to the notification popup.

  • Background color - Choose the color of the coupon's popup background.

  • Background pattern - Select a background pattern for the popup card.

  • Vertical line color - Select the color of the vertical line of your popup card's middle line.

  • Coupon color - Set the color of the coupon card.

  • Copy button background color - Set the color of the Copy button.

  • Coupon border color - Set the color of the coupon's border.

  • Coupon border size - Choose the size of the coupon border.

  • Coupon border style - Choose the border style of your coupon.

  • Copy button background color - Set the color of the Copy button.

  • Copy button text color - Set the text color of the Copy button.

  • Button background color - Set the color of the button, which will redirect you to exploring more discounted products.

  • Button text color - Set the color of the button text, which will redirect you to exploring more discounted products.

  • Internal Padding - Adjust the internal padding of your coupon button as per your requirement.

  • Display shadow: Enable the button if you want to display the shadow of the coupon popup.

  • Border width - Adjust the border width of the coupon card.

  • Border color - Select the border color of your coupon popup.

  • Border radius - Choose the style of your border radius, strong, rounded, or highly rounded.

  • Hover animation - Select the option from the dropdown if you want to give any hover animation to the popup card.

  • Entrance animation - Choose the animation style that you want for your popup card while entering.

  • Exit animation - Choose the animation style that you want for your popup card while the card exits the page.

  • Animation - Select the animation style that you want for the popup notification to have while being on the screen.

  • Animation interval - Set an interval time period between the animation of the popup notifications, if you do not want the popup notification to have continuous animation.

Last updated