Skip to main content

Introduction

Hello there! We're thrilled to have you on board. This guide will walk you through the process of setting up your display and components, as well as defining your rules. Don't worry, we'll be with you every step of the way!

Display Setting

1. Popup Position:

Let's start by adjusting the display position of the Popup on Mobile or Desktop. This is how it should look like:

Popup Position

2. Teaser Position:

You can choose to show or hide the Teaser and adjust its display position on Mobile or Desktop. Here's an example:

Teaser Position

Don't forget to enable the toggle button to display the Teaser on your store and on Mobile or Desktop.

3. Transition:

Next, let's adjust the effect that appears when the form is triggered. You have the following transition types to choose from:

  • Instant: pops up

  • Zoom: enlarges

  • Fade: appears gradually

  • Slide: slides in

    Here's a visual guide:

    Transition

4. Corners:

When you edit the corners, every corner of each element and the entire form will change accordingly.

5. Background:

You can also adjust the entire background of the form. Here's how it should look:

Background

You have 3 options: Solid, Gradient, and Image. Click the 'Select image' button to upload an image from your library.

Component Setting

Each element has corresponding functions for show/hide, duplicate, and delete. Here's how it looks:

Component Setting

Click on 'Add element' to add an element to the form. Let's go through each one:

1. Text Element:

Here, you can choose the font, font size, style, alignment, text color, and background color for your text. Here's an example:

Text Element

2. Image:

You can change the image on the popup by clicking the 'Change' button, or remove the image by clicking the 'Remove' button. You can also adjust the opacity and width of the image, and choose to display the image on Mobile or Desktop.

3. Email Input:

Enter the display content in the Placeholder text and choose the font for the Placeholder display.

4. Phone Number Input:

Enter the display content in the Placeholder text and choose the font for the Placeholder display.

Phone Number Input

5. Name Input:

Enter the display content for Full name/First name/Last name in the placeholder text, adjust the Required field, and choose the font for the Placeholder display.

Name Input

6. Countdown Timer:

You can adjust the expiration time, choose a specific date and time for expiration, turn on/off the label display on the countdown, enter the display content for Days/Hours/Minutes/Seconds in the textbox, choose the font for the text display, choose the size display of the countdown, choose the text display color, and choose the background color of the countdown.

Countdown Timer

7. Coupon:

For Unique code, the app will auto-generate and sync the coupon into Shopify Discount (Discount value, Free shipping). For Fixed code, click 'select a discount' to choose and display the code you've created to the visitor. You can also choose the font, font size, style, text color, and background color for your coupon.

8. Button:

Enter the display content on the button, choose the font, font size, style, alignment, text color, and background color for your text.

Rules Setting

1. Trigger Condition:

You can set the popup to appear after scrolling down X percent, appear on a timer after the customer has opened the page for X seconds, or on exit intent when the customer is about to move the mouse out of the page.

2. Targeting:

You can choose to show the popup to new visitors who don't have contact on the system, or to all visitors.

3. Manage Tag:

Merchants can add a tag or create a new tag for visitors who sign-up through the form. Here's a visual guide:

Manage Tag

That's all for now! We hope this guide helps you set up your display, components, and rules effectively. If you have any questions or need further assistance, please don't hesitate to reach out. We're here to help!