Proper Popup Tutorial

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.

IMAGE

Step 2

On the Shopify admin install confirm page, click "Install app" to continue. This action will proceed with OAuth redirect.

app installation.jpg

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".

IMAGE

There are 3 sections on the home page.

Header section

教程.jpg

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

information section.jpg

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

management-list.jpg

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".

IMAGE

Shortly, "Successfully create new popup" will show as a global message. And you will be automatically redirected to the template page.

IMAGE

Step 2

Select a template popup from our gallery. You can customize it later.

IMAGE

Click the tag on the "Categories" section to filter the popup you might like.

IMAGE

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.

IMAGE

Step 3

And we go to the next step, design.

Take a commonly used popup as an example.

example.png

This popup can be understood as a 4 level structure.

Container --> Modal --> Column --> Component.

x-ray.jpg

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.

previewer.jpg

Explorer

Explorer shows the structure of the popup, the modal we are viewing, the platform we are viewing, and the last save time.

explorer.jpg

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.

IMAGE

Hover the Column menu button, we can "Add Component" to this column. or "Delete" this Column.

IMAGE

Hover the Component menu button, we can "Delete" this component.

IMAGE

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.

IMAGE

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".

editor form.jpg

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.

IMAGE

The major conditions are:

  1. User behavior
  2. Page
  3. Platform
  4. Cart
  5. User engagement
  6. User type
  7. Geography
  8. 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:

  1. Customer visits a page
  2. Customer intends to leave
  3. Customer add item(s) to cart
  4. 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.

IMAGE

After publishing, you can see the popup is shown on the popup management list, and the status is "PUBLISH".

IMAGE

And the popup is now available for all the customers who meet the trigger condition.

IMAGE

Unpublish the popup

On the main page, hover to the action of this popup, and simply click "Draft".

IMAGE

And the popup now is unpublished.

publish.jpg

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.

IMAGE

The CSV file contains all the campaign data, including popup name, show at, show duration, close at, and every component interaction.