About Proper Popup
Proper popup is a powerful and simple popup management tool, which will help you set up popups in any style and any situation.
This tutorial will help you walk through the whole app.
App installation
Step 1
On the app listing page, click the "Add app" button.
Step 2
On the Shopify admin install confirm page, click "Install app" to continue. This action will proceed with OAuth redirect.
Step 3
After the OAuth is completed, you will redirect back to your Shopify admin page.
Home page
You can manage all of your popups and view the current quota on the home page.
After installation, you can always come back to this page through "Shopify Admin" --> "Apps" --> "Proper Popup".
There are 3 sections on the home page.
Header section
The header section shows the popup quota and usage statistics. After the used quota reaches the quota limit, all the popup won't show again until you change to a higher plan or the next charge period comes.
Click "Upgrade your plan", you can change the plan to meet up your need.
Click "Need Help", you can easily get in touch with our support team through email.
Information section
The information section shows the message that you may take attention to, such as developer upgrade notification. You can close this message box as you like.
Popup management list
This section contains all the popup you've created. Since you just install this app, there should be no popup created.
Uninstall this app will delete all the popup you've created before.
Create a popup
Step 1
Click "Create New" or "Create".
Shortly, "Successfully create new popup" will show as a global message. And you will be automatically redirected to the template page.
Step 2
Select a template popup from our gallery. You can customize it later.
Click the tag on the "Categories" section to filter the popup you might like.
Click the template, a "selected" tag and a "Successfully update template ..." message will show up. After seeing this message, you can click the "Next" button on the right to proceed.
Step 3
And we go to the next step, design.
Take a commonly used popup as an example.
This popup can be understood as a 4 level structure.
Container --> Modal --> Column --> Component.
Container
The container takes up the full width and height of the screen. Inside the container, there is a modal.
Modal
Modal is the base framework of the popup. There are two types of Modal: "default modal" and "thank you modal". You can configure when the customer clicks a button and jump to "thank you modal". Inside the Modal, you can configure multiple Columns.
Column
The column takes up the full height of a modal, inside the column, you can add/delete Components.
Component
The component is the atom of the popup. A button, a rich text, an image, an input is a component. Compositing these Components makes a popup powerful.
After understanding basic concepts, let's take a look at our editor.
There are 3 sections in the design panel.
Previewer
Previewer shows what the popup looks like, any change to the popup will take effect immediately. The popup shown in the previewer is the same as the one that will show on the online store.
Explorer
Explorer shows the structure of the popup, the modal we are viewing, the platform we are viewing, and the last save time.
You can modify the popup structure in the explorer.
Click the dropdown icon, the popup structure will toggle.
Hover on the '...' button, and the popup will show up.
Hover the Modal menu button, we can "Add Column" to this modal.
Hover the Column menu button, we can "Add Component" to this column. or "Delete" this Column.
Hover the Component menu button, we can "Delete" this component.
Switch the current viewing modal type to the "Thank You" modal, the modal will show up.
Switch the platform to "Mobile", the popup is viewed in mobile device size.
Click the item on the Explorer tree will activate this component, and you can edit this component on the right editor form.
Editor Form
Every Container, Modal, Column, Component has its configuration form.
You can toggle the functions, edit the styles of this component through the Editor Form.
Changes you make will instantly show up in Previewer.
And if you are satisfied with the design, click next to go to "Trigger".
And if you are satisfied with the design, click next to go to "Trigger".
Step 3
On the trigger page, you can set up the time when the popup shows up.
The major conditions are:
- User behavior
- Page
- Platform
- Cart
- User engagement
- User type
- Geography
- Popup interval
when all the major conditions are met, the popup shows up.
User behavior
When any of the following user behavior triggers, the popup shows up:
- Customer visits a page
- Customer intends to leave
- Customer add item(s) to cart
- Customer remove item(s) from cart
Page
Configurate the page condition to "All Pages" or "Specific Pages" and add some page conditions to specify which page should this popup show up on.
Platform
Select the platform that the popup should show up. Set up different popup style for each type of platform are strongly recommended.
Cart
When the customer's cart meets all these cart conditions, the popup shows up. Note that the currency should be set to the same as the cart's, otherwise the popup won't show up.
User engagement
When the customer engagement meets all the user engagement conditions, the popup shows up.
User type
When the customer meets any of the conditions, the popup shows up.
Geography
When the customer's location matches any of the conditions, the popup shows up, specified to country/region.
Popup interval
We don't want to annoy our customers, set up a large enough number to make sure the customer won't see it in every pageview.
After you complete the design and trigger, you can click next to go to publish panel.
Step 4
On the publish panel, you can rename this popup and give it a friendly name, and choose to publish it now or later.
After publishing, you can see the popup is shown on the popup management list, and the status is "PUBLISH".
And the popup is now available for all the customers who meet the trigger condition.
Unpublish the popup
On the main page, hover to the action of this popup, and simply click "Draft".
And the popup now is unpublished.
Hover the '...' and click "Publish" to publish it again at any time.
Download campaign data
Click the "Download" button, a successfully downloaded message will show up. And all the campaign data will save on your computer in CSV format.
The CSV file contains all the campaign data, including popup name, show at, show duration, close at, and every component interaction.