Pop-up form (shoplineapp.com)

One of the most important elements in your marketing strategy is acquiring new customers, which can significantly increase EDM marketing efficiency. SmartPush offers a "Pop-up Form" feature to help collect new contact information. With various form templates and themes aligned with the user journey, you can quickly expand your contact list and boost sales.

This article will cover the following:

• Introduction to Pop-up form
• Enable Pop-up form
• Set up Pop-up form
• Manage Pop-up form
• View form performance data

 

1. Introduction to Pop-up form

To better address your form requirements, SmartPush organizes forms by purpose, type, style, and theme, making it easier to quickly find the form you need.

i. Categorized by form purpose:

• Information Collection: This form targets new users who have not yet subscribed. It usually appears while browsing and triggers a pop-up to encourage users to fill in their personal information, thereby growing your contact list.
• Recall and Retention: These forms are designed for users intending to leave, those with interrupted payment processes, or those who remain on the site but are hesitant to make a purchase. Triggered at specific moments, these forms can help recover potentially lost users, increasing orders and sales.

ii. Categorized by form type:

• Modal popup (Centered): A fixed pop-up that appears at the center of the webpage while browsing. Based on your specified appearance conditions, this type of pop-up interrupts user activity on the page. You can also adjust the transparency of the pop-up overlay.
• Corner popup: Appearing in any of the four corners of the page, this pop-up does not interfere with user actions. You can configure its display settings for optimal presentation.
  

  

iii. Categorized by form style:

• Picture-text: This layout includes both an image and text section.
  *Note: The main structure cannot be removed—while images can be replaced, the image block itself cannot be deleted. Additional blocks can also be added in the text section as desired.
• Spin-the-Wheel: This gamified pop-up form is offered by SmartPush to engage subscribers. It invites users to spin a wheel for a chance to win discounts or other incentives as an interactive way to encourage sign-ups. Within this template, you can configure wheel prizes, coupon options, and winning probabilities.
  *Note: The sum of winning probabilities must equal 100%; otherwise, settings cannot be applied.

iv. Categorized by form theme:

This categorization sorts templates based on their content, such as welcome subscriptions, holiday events, promotions, and reminders. You can select suitable theme templates for different marketing occasions, and new themes will be continuously updated.

2. Enable Pop-up form

Step 1

In the SHOPLINE Admin, go to [Apps] > [My Apps] and click open the "SmartPush" drop-down menu. Then, select App Settings.

Step 2

Enable the toggle for "App Script".

In the Developer Center, you can select the theme, page, or location where you want the script to be rendered. On the right page, you can also find:

1. Page trigger
2. Insert position
3. Supported theme

The pop-up feature currently does not support all templates and pages. Supported theme templates include Ultra Chic, Kingsman, and Varm. Applicable pages are detailed in the chart below.

Page	Route	Descriptions
Home Page	home/index	Home page that the merchant has set
Product listing page	products/index	The page that lists all product
Product details page	products/show	The page that shows the detail of a product
Cart page	cart/index	The page that shows cart
Checkout page	checkout/index	The page where shopper checkout
Order success page	orders/confirm	Order success page after checkout
Order detail page	orders/show	The page that shows order details
About page	pages/about
Terms page	pages/terms
Policy page	pages/policy
Delivery policy page	pages/delivery_policy
Advanced page	pages/show	The page that set and build by page builder
User profile page	profile: users/edit
Store credits page	credits: users/user_credits
Member points page	member_points: users/member_points
Messages page	messages: messages/index
User orders page	orders: orders/index
Wishlist page	wishlist: wish_list_items/index
Promotion page	promotions/show
Redeem gift page	promotions/redeem_gift

3. Set up Pop-up form

Step 1. Create pop-up form

Go to SmartPush Admin > [Popups & Forms] > [Popup list] and click the "Create form" button at the top right.

Find the templates you want to use, then click Select to enter the editor page.

 

Step 2. Edit pop-up form

i. Global styles

You can configure the overall layout settings of the form, including the layout structure of images and text, background color, background transparency, and fill method. Shadow and rounded corner effects are supported. Please note that only a top-bottom structure layout is supported on mobile devices.

ii. Form settings

In this section, you can set the activation time of the form and specify labels for collected contacts. You can assign tags to all contacts who submit the form, which supports more targeted segmentation. You may use existing tags or create new ones directly within the form builder.

*Note: Any new tags created here will appear as first-level tags in the customer segment filter.

iii. Display settings

• Display type: You can configure how the form appears and closes, as well as the display device and frequency. If you select the prompt box, you can adjust its fly-in direction and speed here. You can also choose various closing methods, such as clicking the pop-up close button, clicking outside the pop-up area, or setting it to disappear automatically without any action.

• Display equipment: You can select the device on which the pop-up will appear, including options for PC and mobile.
  *Note: The display positions for prompt boxes and pop-ups will differ slightly between devices.
• Display frequency: This setting determines how often the form will reappear if a visitor does not subscribe after seeing it. You can also choose to stop showing the form after any interaction.

iv. Push settings

• Push object: You can filter the pop-up objects to be pushed based on the user's login status, subscription status, purchase status, country, and region. Only users who choose to log in will further filter the subscription status and purchase status. The country and region are judged based on the user's IP. Push objects only support unlimited subscription status.
• Push timing: This feature only supports filtering conditions for the timing of users entering the page. In the future, push timing will be added based on conditions such as user browsing of products and product updates, so stay tuned.
  • You can choose the page to be displayed in the pop-up window, including the store page and custom page, and you can fill in the custom URL yourself.
  • Display rules refer to the pop-up window being triggered when the user reaches the display rules on the page, including dwell time, scrolling depth, and exit intention.

- Stay duration: How long a visitor needs to spend on your site (in seconds) 
before the form is displayed.
- Scroll depth: How far on the page a user needs to scroll (in percent)
before the form is displayed
- Exit intention: This feature appears when the user is about to leave the page. 
It is triggered by specific user behaviors, such as: 
For desktop users: The pop-up shows when the mouse cursor moves to the top 
of the page or hovers over the top edge of the browser window. 
For mobile users: The pop-up appears when the user swipes the screen from 
left to right or taps the back button.

• Stop-push conditions: Refer to the conditions for stopping the push notifications for a single triggered user, including a number of impressions. You can configure it here. Please note that when you select a condition to stop sending notifications from "User behavior" > "After a user subscribes by email or phone", the form task will stop sending notifications to the user as soon as they unsubscribe via email or phone.

v. Block editing

In the left sidebar, you can select specific content items and drag and drop them into the form. To complete your registration form, you can add various elements such as email input boxes, phone input boxes, date input boxes, single-line input boxes, drop-down selection boxes, text, buttons, and compliance agreements, and you can also modify images and insert discount codes.

*Note: Different pop-up pages allow for different blocks to be added. However, the collection information page must include input boxes, compliance agreements, and buttons; the coupon page must have at least one coupon block; and the success page must contain at least one text block.

• Email input box: This block allows you to add an email input field anywhere in your form. Simply drag and drop the block to your desired location. Once added, you can customize the input placeholder text, set required fields, and change the default message ("This is required") to something more specific. Add a label to the field, such as "Email" or "Leave your email here."

• Text: You can add any text you want to the form content by simply dragging and dropping text items into your form. Use the right menu to edit text styles, including font, size, line height, and color.

• Button: A key feature is the ability to add a button to collect email submissions. You can also create a button that links to a specific page of your store. You can switch the button's action between submitting the form and linking to a specific page, and you can add multiple buttons to a single form. Additionally, you can customize the button text, links, styles, and alignment.

• Drop-down selection box: The drop-down selection boxes enable you to start collecting gender and country data from your customers. Simply drag and drop the items into the form, then select the corresponding profile field to map to: Country or Gender. You can manage placeholders, options, and labels, decide whether to make this field required, and apply your desired styling.

• Date input box: You can add date input boxes to the form to collect birthday information for contacts or map them to custom properties for collecting specific dates. Similar to other blocks, you can set this field as required, add a label, and customize the required message.
  
  
• Phone input box: This block allows you to insert a phone input box anywhere in the form. After dragging and dropping the block, you can customize the input placeholder text, make the field required, add or remove the label, and modify the text for the required message (the default is "This field is required"). The country code will be automatically populated based on the user's IP address.
  
  
• Compliance Agreement: The compliance agreement block includes a built-in copy to make the legal text more concise. You can edit the content style as needed. Please ensure you add a link to your privacy policy.

• Discount: You can enter the discount code configured in SHOPLINE directly into the input box for your customers. Additionally, you can customize the coupon style and upload a custom background image for the coupon. Please ensure that the background image is appropriately sized.

• Pictures:

  Select the image you want to include in the form content. It is recommended to upload images that are less than 200KB in size and have a maximum width of 600px. Supported formats include JPEG, JPG, PNG, and GIF. You can choose the fill method and style for the image.
  *Note: If you wish to remove the picture block, select the "no picture" mode in the overall layout settings.

vi. Multiple page interaction

Form templates typically consist of 2 to 3 pages, which include the collection information page, coupon page, and success page. After users click the button, they will automatically be redirected to the next page.

vii. Teaser

A teaser is a component of the pop-up window and serves as a preview for the pop-up form. Teasers are less intrusive than traditional pop-ups, as they appear at the edge of the page rather than in the center. This allows visitors to continue browsing without needing to interact with or close the form. You can access the teaser tab in the form template to configure and customize its copy, style, placement, and display timing.

 

Step 3. Publish pop-up form

Upon completion, click Save & Exit to save the pop-up form or click Activate to publish.

4. Manage Pop-up form

You can view your configured form campaigns by navigating to [Popups & Forms] > [Popup List]. In the campaign overview section, you can see metrics like views, clicks, and click rate. There are five indicators of the status field: Draft, Pending, Ongoing, Paused, and Finished. For the actions field, there are:

• Copy: Duplicate the form campaign.
• Edit: Access the form editor.
• Delete: Remove the form campaign.
• Pause/Activate: Pause or activate the form campaign.
• Preview: Display a preview of the popup form (supports viewing on mobile and desktop).
• View data: Redirect to the data analysis page.

5. View form performance data

Go to [Data Analysis] > [Form] to export the complete performance data of the form. You can also view the individual performance of each form campaign.

Clicking on the individual campaign in the list will take you to the detailed data of that form campaign, which includes the "Data overview" and "User data details tabs".

The Data overview tab includes information such as Views, Clicks, Click-through Rate, Collected data, Order count, and Sales amount.

*Note:

Order count and sales revenue are related to discount codes set in the popup. When customers place an order using a discount code, the system will automatically identify the corresponding form campaign, the time it was shown to different customers, and the email/phone of customers (sourced from contact information collected in the form and login information).

If the email or phone number used during the order matches a customer who was shown the form within 15 days before the order, the order will be attributed to that form campaign. Suppose an order cannot be matched precisely due to different emails/phones (e.g., a customer receives a discount code via email A but places the order with email B). In that case, the order will default to any form campaign that displayed the code within the previous 15 days.

Contact data collection method

• You can view the contact data (name, email, phone, gender, and country) collected through form campaigns within a specific period. You can also export this data for further use.

• If your form collects birthday information, it is temporarily not available for viewing in the collected data but will still be recorded in the contact information.

Contact data synchronization

Customer data collected through popup forms and subscription page is matched with existing contacts in SmartPush based on email and phone number, and synchronized to SmartPush's "Contacts" and SHOPLINE's "Customers", following the following rules:

No email/phone number collected	Customer information will not be synced.
Only email collected	If a contact with the same email already exists, additional data will be synced with this existing contact.
	If no contact with this email exists, a new contact will be created with all collected information.
Only phone number collected	If a contact with the same phone number already exists, additional data will be synced with this existing contact.
	If no contact with this phone number exists, a new contact will be created with all collected information.
Only email A and phone number B collected	If no contact exists with email A or phone number B, a new contact will be created with all collected information.
	If a contact exists with one matching contact method: If the other contact method is different and not empty, a new contact will be created with all information. If the other contact method is empty and different, additional data will be synced with the existing contact.

*Notes:

• If a contact’s name is not collected or if the email prefix (before "@") is empty, SmartPush will automatically use the email prefix as the contact’s name.
• If the popup form includes a name field, and the customer inputs a name different from the one in the Admin, the existing name will be updated with the new data during synchronization.

Read more

• Managing Contacts in SmartPush