How to Create a Popup

Table of Contents

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

pixelpop-dashboard

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 Create a popup button. This will take you to a full-screen editor with settings on the right and a preview of your popup on the left. Here’s where you’ll build your popup!

Step One: New Popup

new-popup-screen

Pixelpop offers six different popup types to engage your visitors: Announcement, Email Signup, Coupon Code, Page Promotion, Social Follow and Cookie Disclaimer. Under New Popup, you can preview of the general look and layout of each type by clicking through the various options. We’ll show you how to customize the design and content of your popups in subsequent steps below.

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

Step Two: Style

pixelpop-style-screen

Once you’ve settled on your popup type, click the Add Style button at the bottom.

Here’s where you’ll tailor the look of your popup to complement your store. You’ll see that there are settings for ShapeSizeContentColorImage, 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. Then click Inspect.

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 under 2 MB. Also double check that the image was saved in the orientation (e.g. 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.

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

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

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.

Delay

Screen Shot 2016-08-26 at 7.15.57 PMBy default, your popup will display immediately when a visitor lands on one of your pages. Click Set Delays to add a page, time or scroll delay.

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 and/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

Screen Shot 2016-07-04 at 2.01.38 PM

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’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 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