Recipient Announcement Modal
The recipient announcement modal is a pop-up that announces the discount the first time a recipient opens a shared cart link. It shows the discount and two buttons:
- Tell Me How closes the modal and opens the discount details modal with the checkout conditions.
- No Thanks closes the modal and shows the discount banner above the Share Button.
The subheading in this example was customized. Your modal shows your own text and discount amount.
This page shows you how to turn on the modal, change its colors in the Recipient Discount Pop-Up card, and edit its text.
Note: Incentives are part of the Pro plan.
Before You Start#
- Turn on Offer a discount to recipients on the Incentives page. The Recipient Discount Pop-Up card appears only when the recipient discount is on. See Recipient Incentives.
- On the Pro plan, the Incentive Design row appears on the Dashboard once at least one discount is on. If your store isn't on Pro, the row is shown with a PRO badge and can't be opened.
How to Customize the Announcement Modal#
Step 1: In your Shopify admin, under Apps, click Bevy Share Cart - Social Link. The app opens on its Dashboard.
Step 2: In the settings list, click Incentive Design.
Step 3: Click the Recipient Discount Pop-Up card to expand it.
Step 4: Make sure Show Recipient Incentive Announcement is selected. Share Cart selects it for you when you turn on the recipient discount on the Incentives page. Clear it to hide the pop-ups and the banner. The color settings appear while it is selected. To see the modal, select Recipient Discount Pop-Up from the view dropdown in the Design Preview.
Note: Show Recipient Incentive Announcement is one shared setting. It also turns on the discount banner in the Recipient Discount Banner card. See Recipient Discount Announcement.
Step 5: Change the colors and text you need. See below.
Step 6: Click Save in the save bar at the top of the page. Your changes are not live on your store until you save. To undo unsaved changes, click Discard.
Announcement Modal Colors#
The Recipient Discount Pop-Up card styles both the announcement modal and the discount details modal. These colors apply to the announcement modal:
| Setting | What it changes | Default |
|---|---|---|
| Modal Background Color | The background of the modal. This also applies to the discount details modal. | Light grey |
| Modal Primary Button Background Color | The Tell Me How button background. This also applies to the button in the discount details modal. | Black |
| Modal Primary Button Text Color | The Tell Me How button text. This also applies to the button in the discount details modal. | White |
| Modal Secondary Button Background Color | The No Thanks button background | Light grey |
| Modal Secondary Button Text Color | The No Thanks button text | Black |
| Announcement Modal Title Color | The title, such as "Congrats!" | Dark grey |
| Announcement Modal Icon Color | The party popper icon | Dark grey |
| Announcement Modal Content Color | The heading and subheading below the icon | Dark grey |
How to Edit the Announcement Modal Text#
Step 1: In the Design Preview, select Recipient Discount Pop-Up from the view dropdown. The preview shows the announcement modal as recipients see it when they open a shared link.
Step 2: Edit the announcement fields below the preview:
| Field | What it changes | Limit | Default |
|---|---|---|---|
| Announcement Title | The title at the top | 15 characters | Congrats! |
| Announcement Heading | The discount line below the icon | 30 characters | Save *|amount|* (manual discounts: Unlock Savings) |
| Announcement Subheading | The line below the heading | 60 characters | When you fulfill the checkout conditions |
| Announcement Primary Button | The button that opens the discount details | 15 characters | Tell Me How |
| Announcement Secondary Button | The button that closes the modal | 15 characters | No Thanks |
Use *|amount|* to show the recipient's discount amount. The Discount Information fields in the same list edit the discount details modal. See Recipient Discount Details Modal.
Step 3: Click Save in the save bar.
Note: In the preview, click the modal's buttons to move between the announcement modal, the discount details modal and the banner.
For any queries, reach out to us via live chat or email support@bevycommerce.com. We're always here to help!