The Complete Guide to Creating Your First Pixelpop Popup

The magic starts within your Pixelpop dashboard. To access your dashboard, log in or install the app at https://app.pixelpop.co/

Once you're at your dashboard—you'll know you're in the right place when you see a green smiley under Dashboard—click the purple New popup button. This will take you to a screen where you'll choose your popup type and/or goal, and then to the popup editor, where you'll build your popup and be able to view it as it will appear in your actual store.

Step One: New Popup

new-popup

Pixelpop offers seven different popup types to engage your visitors: Announcement, Email Signup, Coupon Code, Page Promotion, Social Follow, Cookie Disclaimer and Custom image. Click on the type that best suits your needs.

Announcement

You can use this popup to tell visitors about a sale, shipping offer, update, or make another announcement.

Screen Shot 2016-07-28 at 2.51.41 PM

Page Promotion

Use this popup to direct visitors to a new product collection, blog post, or other page.

Screen Shot 2016-07-28 at 2.53.17 PM

Coupon Code

Use this popup to show visitors a coupon code created in your Shopify or BigCommerce admin.

Screen Shot 2016-07-28 at 3.07.50 PM

Email Signup

Use this popup to collect emails for your mailing list and marketing campaigns.

Screen Shot 2016-07-28 at 3.06.50 PM

Social Follow

Use this popup to gain more followers on Facebook, Twitter, Instagram, Pinterest, Tumblr, and Google+.

Screen Shot 2016-07-28 at 3.03.47 PM

Cookie Disclaimer

Use this popup to alert EU shoppers to the use of cookies on your website.

Screen Shot 2016-07-28 at 3.05.30 PM

Custom image

Use this popup to direct visitors to a new product or page with a custom image and a link.

 custom-image-popup

Step Two: Style

popup-style-settings

Once you've settled on your popup type, you'll be taken to the preview screen and the  Style settings.

Here's where you'll tailor the look of your popup to complement your store. You'll see that there are settings for  ThemeShapeSizeContentColorImage, and more.

Theme

You'll begin by selecting a  Theme or basic design for your popup. By default, this will be set to Dallas (which you can see in the examples above) however there are plenty to choose from—just click the downward arrow beside Change theme and see what strikes your fancy. Note that you'll be able to customize the colors and fonts later in this same screen.

theme-picker

Shape and Size

Next, you'll select a  Shape for your popup. You'll also be able to choose the position of your popup from the dropdown menu if you select a Bar or Card shape (Modal and Takeover popups occupy the centre/entirety of a screen). Click through the options to find the option that best suits your site and goals.

popup-shape-options

You can also change the Size of the popup by clicking S/M/L boxes below Shape.

Font, Color, and Image

Now that you've customized the  outside of your popup, you can move to the inside. Pick a Font from the dropdown, then select the Color you want to use for your popup background, text, and highlights (you'll see which is which by watching your changes be reflected in the preview).

If you want to match the colors of your popup to elements of your theme, you can use the  Inspect element function and copy the color hex code into Pixelpop's color picker. Here's a quick walkthrough of the process:

Find the element whose color you want to replicate and right click on it. Click  Inspect from the menu that appears.

color-matching-process1

Under the  Styles tab in the right hand window, scroll down until you see a color swatch or hex code.

inspect-element-styles-window
Copy the hexcode and paste it into the desired area of Pixelpop's  Style color picker. The change will be reflected in your preview and your popup will more closely match your store design.

screen-shot-2016-11-02-at-4-03-40-pm
You can also add an  Image to your popup if you wish. These images will display differently depending on which theme you've chosen—in some cases, they provide a background, in others, they show up adjacent to popup content.

If you do want to use an image, make sure that it is a  .jpg, .png, or .gif and that it is under 2 MB. Also double check that the image was saved in the orientation (i.e. landscape or portrait) that you would like it to display within the popup.

Close button

You must decide whether or not you want to  Show a close button on your popup. We highly recommend enabling this setting, unless you want to display a persistent cookie disclaimer or some other unobtrusive banner or card popup that you don't want visitors to have the option of dismissing.

Google mobile-friendly

Checking  Google mobile-friendly ensures your popup is displayed as small as possible on mobile devices to avoid Google penalizing your page rank for obscuring your site’s content with too large a popup.

Custom CSS

If you're proficient with CSS, you can use it to override theme styles and apply your own adjustments. Click the Use custom CSS toggle to add your code to the editing panel.

Step Three: Content

popup-content-settings

After customizing the style of your popup, click the Choose Content button. The content will vary according to your selected popup type.

Announcement

The announcement popup has a Title and a Body field. The body should be a maximum of about 30 characters.

Email Signup

The email signup popup has a Title and a Body field. The body should be a maximum of about 30 characters.

Then edit the  Submit Button Text, as well as the Confirmation Text users will see once they've provided their email address.

Coupon Code

The coupon popup has a Title and a Body field. The body should be a maximum of about 30 characters.

Create a coupon code in your Shopify or BigCommerce admin and paste it under Coupon Code.

Page Promotion

The page promotion popup has a Title and a Body field. The body should be a maximum of about 30 characters.

Enter the  Link Text and an Link URL. Make sure the link URL has http:// at the beginning. Example: http://www.pixelunion.net

Social Follow

The social follow popup has a Title and a Body field. The body should be a maximum of about 30 characters.

The popup supports Facebook, Twitter, Instagram, Pinterest, Tumblr, and Google+. Enter in your usernames or URLs in the corresponding fields for the channels you want to promote.

Cookie Disclaimer

The cookie disclaimer popup has a  Body field but no title. We recommend using this space to say something like, "This site uses cookies. By continuing to use this site, you consent to cookies being used."

Then add the Link text and Link URL (this should direct users to your cookie policy or a general page outlining laws concerning cookies.) Finally, add the Button text for visitors to agree and close the popup.

Step Four: Options


Once you've finished adding your popup content, click on the Set Options button. This is where you'll select the when and how and who of your popup.

Sync Emails

Pixelpop offers the option to sync popups with your email marketing service if you desire. Note that this option will only display if you have selected the Newsletter signup popup type.

Under Options, click the green Connect link under the Sync emails heading at the top.

in-app-list-connection

This will bring up a dialog box allowing you to choose the service and account you wish to connect your popup to. 

Toggle  Sync [popup name] with MailChimp or Conversio on, choose your service, and click the black Choose service button. This will prompt you to select a Mailing list from the dropdown and specify whether or not you want to Require double opti-in for new signups. If activated, this will require recipients to opt in to your mailing list via a confirmation email from MailChimp before they are subscribed to your list. Click the green Save and close button when you are finished. Emails collected by your popups will now automatically sync with your selected mailing list.

Schedule

Screen Shot 2016-07-04 at 1.56.24 PM

By default, your popup will be visible on any date. Click  Set Schedule to select a date range for when you want your popup to appear. Note that all dates begin and end at 12:00 am CST and 11:59 pm CST, respectively.

You can add multiple date ranges for your popup to appear. Click the  Save & Close button when you're done.

Visitor actions 

visitor-actions-settings
By default, your popup will display immediately when a visitor lands on one of your pages. Under Visitor Actions, you can opt to show them only when they try to leave your store, after they have spent a certain amount of time on your site, or after they have scrolled down a certain percentage of the screen.

Add an exit-intent delay - paid plans only

Enabling exit-intent delay on a popup means that popup will only appear when a visitor moves their cursor to the top of the window as if to close the tab. Because this action depends on cursor movement, the popup won’t be displayed on mobile devices.

Add a page delay

A page delay prevents your popup from displaying until a visitor has visited a specified number of pages. Toggle the option, then specify the number of pages.

Add a time or scroll delay

A time delay prevents your popup from displaying until a specified time (in seconds) has elapsed. Please note that the delay time is approximate relative to load times.

A scroll delay prevents your popup from displaying until the visitor as scrolled down a certain percentage of the page. For example, if the delay is set to 100%, the popup will display when the visitor has scroll to the very bottom of the page.

If both are checked off, both conditions must be met before the popup is displayed.

Target Visitors

targeting-settings

Targeting allows you to choose the audience and conditions for your popups. By default, everyone who visits your site will see the popup. You can target visitors based on their location, specific pages they visit on your site, or the referral URL, UTM, or ad campaign they arrive from. Creating and saving this target will allow you to reuse it for other popups.

To specify an audience, click  Create New Target and add a brief target name that sums up who or what you are targeting.

Note that you can  Target any of these visitors or Target all of these visitors by making a selection from the dropdown menu.

targeting-options

To target any of these visitors means to display the popup to anyone who satisfies any one of the conditions; to target all of these visitors means to display the popup to visitors who satisfies every and all conditions.

Target by location

Display your popup to people visiting your site from a specific country. You can choose as many countries as you like.

If you'd like to continue editing your target, click the back button. If you're all done, click  Save & Close.

Target by page

Display this popup to people visiting specific pages on your site. You can target complete URLs or partial URLs for multiple pages (e.g. you could use “pants” to target any page whose URL includes the word “pants”).

Screen Shot 2016-07-08 at 2.47.07 PM

If you want to target your homepage  only, make sure you do not include the final slash. Type https://www.yoursite.com and not https://www.yoursite.com/. It's the little things.

If you'd like to continue editing your target, click the back button. If you're all done, click  Save & Close.

Target by referral URL

Display this popup to people arriving at your site from a specific URL, UTM, or other campaign with a specific reference or referral code. Example: someone clicking to your site from an email newsletter.

Screen Shot 2016-07-08 at 2.49.00 PM

If you'd like to continue editing your target, click the back button. If you're all done, click  Save & Close.

Name your popup

popup-name

Before publishing your popup, you'll need to give it a name, so that you can track its performance in your Pixelpop dashboard. Simply click on the pencil icon above the  Save and Publish buttons and add a name in the field provided.

Publish or Save

You did it! You created your first popup! If you're ready to show it to the world, hit Publish, otherwise click Save and come back to it later.

Managing your popups

popup-tracking

Once you've created some popups, you can track their Performance from a window on your dashboard. Notice that you can opt to view the overall performance of all your popups or hone in on just one. You can also select the time period that is displayed by clicking the dropdown menu.

Previewing your popups

If you'd like to preview your published popup, all you have to do is click the  Preview button on the popup's "card" below the Performance window. This is a good way to view your popups without contributing false views to your statistics.

preview-button