How to set up Add-to-cart popup in AVADA?
Add-to-cart Popup is a popup shown after customers put their items into the cart and ask for customer email or phone.
The final purpose of the Add-to-cart Popup is:
- Collect leads and follow up later
- Send Abandoned Cart email/SMS to them if they do not leave their email at the checkout page.
To create the Add to cart popup campaign, you need to go to Form > Click Create

Select the type of Add-to-cart popup > Then choose Add-to-cart template

It will display a preview popup, and you need to click the Select template button to continue.

Customize content for Add-to-cart popup. To edit the popup, you can click on each element on the popup, then edit at the Components section on the left.


+ Font family: Select a font to display for the popup
+ Text Align: Select the display type of popup content: left, right or center align
+ Background color: Select a color for the background of the popup
Here customize the content displayed for the popup's heading

- Content: Enter the text displayed for the heading
- Color: Select a color for the heading
- Font size: Customize the font size of the heading
- Font weight: Customize the density of the heading
- Letter Spacing: Customize the spacing between letters
- Line Height: Customize the spacing between lines
Here customize the display content for the popup's body text

- Content: Enter display content for body text
- Color: Select a color for the body text
- Font size: Customize font size for body text
- Font weight: Customize the weight of the text
- Letter Spacing: Customize the spacing of letters
- Line Height: Customize the spacing between lines

Here you can customize the fields displayed on the popup by ticking the field you want to add

- First name: Enter the text displayed in the first name placeholder

- Last name: Enter the text displayed in the last name placeholder

- Phone number: Enter the content displayed in the phone number placeholder

- Email: Enter the text to display in the email placeholder

- Button

+ Button content: Enter the content to display on the button
+ Color: Select color for button text
+ Background color: Select a color for the button's background
- Close button

Choose the color for the close button

This is the step to choose how a campaign should be displayed:
- Add to cart default trigger: Popup will display when customer add items to the cart (you cannot change this trigger)
- Show again after: Select the time to show the popup again. When the popup is turned off without entering information, after a customized period at Show again after, the popup will display again


Select the page to display the campaign
- All pages: Popup displayed on all pages
- Specific pages: popups are only visible on pages that satisfy the added condition.
Enter the URL and select conditions for those pages. Click Add to add the condition.

- Email validation: If checked, Use email validation for my campaign will allow only existing emails to submit popup. This to avoid spam emails.
- Tags: Add a tag to the contacts obtained by the popup
- Click Save & Next to continue

- Campaign Name: Enter a name for the campaign
- Continue clicking Save will display a popup for you to choose the status of the popup.
+ Keep as draft: Campaign will be saved but not displayed in the store
+ Go live: Allows popups to be displayed right on the store

To edit the campaign you created, you need to click on the campaign you want to edit. Then it will open this page:

- Report: Here are statistics about the campaign
+ Impression: The number of frontend popup impressions
+ Conversion: Number of emails collected from the popup
+ Conversion rate: Conversion rate compared to impressions
- Campaign status: Enable / disable campaign
- Click on the preview popup or Design button to be able to edit the contents of the popup
- Click Edit trigger if you want to modify the popup trigger
- Click Edit settings to edit the email validation and tag of the popup
The final purpose of the Add-to-cart Popup is:
- Collect leads and follow up later
- Send Abandoned Cart email/SMS to them if they do not leave their email at the checkout page.
Step 1: Select Add-to-cart Popup Template
To create the Add to cart popup campaign, you need to go to Form > Click Create

Select the type of Add-to-cart popup > Then choose Add-to-cart template

It will display a preview popup, and you need to click the Select template button to continue.

Step 2: Design Add-to-cart popup
Customize content for Add-to-cart popup. To edit the popup, you can click on each element on the popup, then edit at the Components section on the left.

2.1 General

+ Font family: Select a font to display for the popup
+ Text Align: Select the display type of popup content: left, right or center align
+ Background color: Select a color for the background of the popup
2.2 Heading
Here customize the content displayed for the popup's heading

- Content: Enter the text displayed for the heading
- Color: Select a color for the heading
- Font size: Customize the font size of the heading
- Font weight: Customize the density of the heading
- Letter Spacing: Customize the spacing between letters
- Line Height: Customize the spacing between lines
2.3 Body text
Here customize the display content for the popup's body text

- Content: Enter display content for body text
- Color: Select a color for the body text
- Font size: Customize font size for body text
- Font weight: Customize the weight of the text
- Letter Spacing: Customize the spacing of letters
- Line Height: Customize the spacing between lines
2.4 Form

Here you can customize the fields displayed on the popup by ticking the field you want to add

- First name: Enter the text displayed in the first name placeholder

- Last name: Enter the text displayed in the last name placeholder

- Phone number: Enter the content displayed in the phone number placeholder

- Email: Enter the text to display in the email placeholder

- Button

+ Button content: Enter the content to display on the button
+ Color: Select color for button text
+ Background color: Select a color for the button's background
- Close button

Choose the color for the close button
Step 3: Trigger of Add-to-cart popup

This is the step to choose how a campaign should be displayed:
3.1 When to display the popup
- Add to cart default trigger: Popup will display when customer add items to the cart (you cannot change this trigger)
- Show again after: Select the time to show the popup again. When the popup is turned off without entering information, after a customized period at Show again after, the popup will display again

3.2 Where to show

Select the page to display the campaign
- All pages: Popup displayed on all pages
- Specific pages: popups are only visible on pages that satisfy the added condition.
Enter the URL and select conditions for those pages. Click Add to add the condition.
Step 4: Settings

- Email validation: If checked, Use email validation for my campaign will allow only existing emails to submit popup. This to avoid spam emails.
- Tags: Add a tag to the contacts obtained by the popup
- Click Save & Next to continue
Step 5: Ready

- Campaign Name: Enter a name for the campaign
- Continue clicking Save will display a popup for you to choose the status of the popup.
+ Keep as draft: Campaign will be saved but not displayed in the store
+ Go live: Allows popups to be displayed right on the store

How to edit Add-to-cart popup campaign
To edit the campaign you created, you need to click on the campaign you want to edit. Then it will open this page:

- Report: Here are statistics about the campaign
+ Impression: The number of frontend popup impressions
+ Conversion: Number of emails collected from the popup
+ Conversion rate: Conversion rate compared to impressions
- Campaign status: Enable / disable campaign
- Click on the preview popup or Design button to be able to edit the contents of the popup
- Click Edit trigger if you want to modify the popup trigger
- Click Edit settings to edit the email validation and tag of the popup
Updated on: 18/08/2021
Thank you!