Pop-up form（shoplineapp.com） – SmartPush

Overview

One of the most important elements of your marketing strategy is acquiring new customers. Acquiring more new customers can speed up the efficiency of edm marketing. SmartPush will provide you with multiple ways to collect new contacts - pop-up forms. SmartPush will combine user journey and experience to provide a variety of form templates and themes, which can quickly expand your contact list and help you increase sales.

In this article, you can learn about:

How to enable pop-ups

For Hong Kong & Taiwan SHOPLINE merchants, the pop-up form feature currently supports the following themes: Ultra Chic, Kingsman, and Varm. In the SHOPLINE Admin, go to [Apps] >[My Apps], and click Activate script for SmartPush. The pop-up form will then be in effect and displayed to customers.

In the developer portal, you can select the theme, page, or location where you want the script to be rendered.

In the above screenshot you can see there are 3 widgets on the right side namely

1. Page trigger

2. Insertion position

3.Supported themes

It should be understood that the pop-up function currently does not support some templates and pages.
Supported templates are ultra chic, kingsman, and varm. Applicable pages include details as shown 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

Next, this article will introduce you to the setting process, form types and form editing of the SmarPush pop-up form function.

How to set up a pop-up window and view collected contacts

1. Create form

You can click the Create Form Activity button under the form single-level menu, enter the form template library to select the form template you want, enter the editor to edit and set, and click the Save button. The activity will appear in the form activity list. Note that if you click the exit button, the editing operation will not be saved. Click the Open button and the form will be published to the C-side.

2. Task management

You can view the form tasks you set on the task list page.

Form tasks have five states: draft, to be started, in progress, paused, and ended. The corresponding operations include editing, previewing, viewing data, copying, pausing, and deleting. Clicking Edit will enter the form editor; clicking Preview will pop up a pop-up window to preview the form, supporting viewing the effect of the pop-up window on mobile and PC; clicking View Data will jump to the data report page. At the same time, the page views, clicks, and click-through rate data will also be displayed in the form list.

3. Data viewing

You can view form data on the form task list page or under the data report menu. Click on the form activity to view the detailed data of the form, including page views, clicks, click rate, amount of information collected, orders, and sales. At the same time, you can also export specific detailed data of contacts and orders.

Order quantity and sales amount are related to discount code settings in pop-ups. When a user uses a discount code to place an order, the system automatically retrieves information on the form tasks associated with that discount code, including the times these tasks reached different users and the email/phone numbers of users reached (collected from contact information in the form and user login details). If a user's email/phone number matches a user who was reached by a form task within 15 days prior to placing the order, the current order is attributed to that form task. For users whose emails/numbers do not precisely match, making it unclear how they obtained the discount code (e.g., a customer receives the code via email 1 but uses email 2 to place the order), the order is attributed to a form task that had exposure within the previous 15 days and included the discount code, to avoid overlooking attributions.

4. Contact collection logic

Currently, it is supported to view the surname, first name, email, phone number, gender and country of contacts collected through form activities within a certain period of time in the form collection information volume. You can also export your contacts and use them again
If your form collects birthday information, it is temporarily not supported to view it in the collected information, but the data will be simultaneously recorded in the contact information.
You may be concerned: How to synchronize contact data collected through forms?

If the data collected by the form does not match a local contact, add a new contact and synchronize the subscription;
If the data collected by the form matches a local contact but the email or mobile phone number information is inconsistent, a new contact will be added to the synchronized subscription
If the data collected by the form matches a contact and any last name, first name, or country information is empty, it will be completed.
If the data collected by the form matches a local contact but the mobile phone information is inconsistent, only the form contact will be collected and the contact information will not be synchronized.
If the data collected by the form matches two different contacts (contact A’s mobile phone, contact B’s email), only the form contact will be collected and the contact information will not be synchronized.

Form type

In order to better meet your needs for forms, smartpush forms will be sorted out by form purpose, type, style, and theme, making it easier for you to quickly find the form you want.

1. According to the purpose of the form, it can be divided into two types: information collection and recall and retention.

The information collection form is mainly aimed at new users who have not subscribed. It is usually used when browsing the page, triggering a pop-up window to encourage users to fill in their personal information, thereby adding your number of contacts.
Recall and retention forms are mainly targeted at users who intend to leave, whose payment process is interrupted, or who stay for a long time and are hesitant to purchase. By triggering a pop-up window at a specific time, it can regain potential lost users and increase order volume and sales.

2. According to the form type classification, forms can be divided into modal popup and corner popup.

Modal popup are fixed windows that appear on a website when you browse it. This form will pop up at a fixed location on a specific website page based on the appearance conditions you set, and will interrupt the user's operation on the web page. Supports adjusting the transparency of the pop-up window mask.

Corner popup generally appear in the four corners of a web page. Compared with pop-up windows, the biggest difference is that the prompt box does not affect the window that the user operates on the bottom page. You can configure the pop-up display format in the display settings.

3. Form style classification can be divided into graphic forms and carousel forms.

Picture-text form refers to a form layout with two parts: pictures and text. Please note that the main structure cannot be missing. You can replace pictures but cannot delete picture blocks. You can also add the blocks you want to add in the text part.
The carousel form is a gamified pop-up form provided by SmartPush. This is an interactive way to engage subscribers by letting them click to spin the wheel and win discounts, or other content, in exchange for their signing up. You can set wheel prizes, coupons and winning probability within this template. Please note that the sum of winning probabilities is set to 100%, otherwise an error will be reported.

4. Form theme classification

Form theme classification refers to classification by form template content, including welcome subscriptions, holiday activities, promotions, reminders, etc. You can choose appropriate theme templates at different marketing nodes. The template theme will be continuously updated in the future.

Form editing

The main functions of the form editor include form settings, display settings, push settings, and adding blocks

1. Form settings

You can set the effective time of the form and the collected contact labels in this section. You can assign tags to all contacts who submit a form, which helps with further segmentation. You can add existing tags to your form or create new tags directly in the form builder to subsequently segment your contacts. The form contact label will be displayed as a first-level label in the segmentation group filter

2. Display settings

You can configure how the form appears and closes, display device and frequency, etc. in the display settings. If you select the prompt box, you can adjust the fly-in direction and fly-in speed here.

You can choose a variety of closing methods, including clicking the pop-up window close button, clicking the area outside the pop-up window, and automatically disappearing without any operation.

Display equipment

You can choose the display device of the pop-up window, including PC and mobile. It should be noted that the prompt box and pop-up window display positions will also be somewhat different.

Display frequency

Defines how often the form will appear again if a visitor does not subscribe after it is displayed. You can decide not to show the form again after interacting with it:

3. 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 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. Dwell time is how long a visitor needs to spend on your site (in seconds) before the form is displayed; scroll depth is how far on the page a user needs to scroll (in percent) before the form is displayed; exit intent is Refers to appearing when the user is about to leave the page, and is tracked through user behavior: when the PC user moves the mouse to the top of the page/when the mouse hovers over the top of the desktop viewport, the mobile user slides the screen from left to right and clicks return, which is regarded as exiting. intention.

Stop push conditions refer to stop push conditions for a single triggered user, including number of impressions. You can configure it here. Please note that when you select a condition to stop sending notifications from 'User behavior' > 'After 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.

4. Block editing

On the left sidebar, you will be able to select specific content items and drag and drop them into the form content. In order to complete your registration form, you can add email input boxes, phone input boxes, date input boxes, single-line input boxes, drop-down selection boxes, text, buttons, compliance agreements, and you can also modify pictures and insert discount codes.

It should be noted that different pop-up pages have different blocks that can be added, but the collection information page at least contains input boxes, compliance agreements, and buttons, the coupon page contains at least one coupon block, and the success page at least contains A text block.

Global styles

You can set the graphic and text structure layout, background color, background transparency, and filling method of the form in the overall layout. It supports adding shadows and rounded corner effects. It should be noted that the mobile terminal only supports upper and lower structure layout.

email input box

This block allows you to add an email input box anywhere in your form, just drag and drop the block to the desired location. Once added, you can change the input placeholder text, set required fields and change the text of the desired message (default is "This is required"). Add a label to the field by naming it something like "Email" or "Leave your email here."

Text

Add any text you want to the form content. Just drag and drop text items into your form. Go to the right menu to edit text style, font, size, line height and font color.

Button

A basic feature is to add a button to collect email submissions. At the same time, you can add a button with a link to a specific page of your store. You can switch button actions between submitting the form and linking to a specific page, and add multiple buttons to a single form. At the same time you can adjust text, links, button styles and alignment.

Drop-down selection box

The drop-down selection boxes allow you to start collecting gender and country data for your customers, simply drag and drop items into the form and select which profile field should be mapped to: Country, Gender. You can manage placeholders, selections, and labels, and decide whether you want to make this field required, as well as style it.

Date input box

You can add additional date input boxes to the form to collect birthday data for contacts, or map them to custom properties to collect custom dates. Like other blocks, you can make this field required, add a label to it, and change the required message.

Phone input box

Using this block, you can add a phone input box anywhere in the form. After dragging and dropping the block, you can change the input placeholder text, make the field required, add or remove the field's label, and change the text of the desired message (default is "This field is required"). The country code will be automatically populated based on the user's IP.

Compliance Agreement

The compliance agreement block will have built-in copywriting to make the legal text more concise. You can edit the copy content style, etc. It should be noted that you need to add a privacy policy link.

Discount

You can directly enter the discount code configured in SHOPLINE into the input box and display it to your customers. You can also edit the coupon style and support uploading a custom background image for the coupon, but please pay attention to the size of the background image.

Pictures

Select the image you want to add to the form content; it is recommended to upload images with a size less than 200KB and a maximum width of 600px. JPGE, JPG, PNG and GIF formats are supported. You can choose the fill method and style. If you want to delete the picture block, you can select the no picture mode in the overall layout.

Multiple page interaction

Form templates are usually configured with 2-3 pages, including collection information page, coupon page and success page. The user will automatically jump to the next page after clicking the button.

Teaser is part of the pop-up window and can be regarded as the trailer page of the pop-up form. They are less intrusive than pop-ups, but they still stand out because they appear on the edge of the page rather than in the center. Visitors can usually continue browsing without interacting with or closing the form. You can click the teaser tab in the form template to open and set it, and edit its copy, style, placement and display timing.