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

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


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.


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

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.


Step Two: Style


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.


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.


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.


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.


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

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.

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


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


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:

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.

How to add links, line breaks, and style to your popups

If you want to add links to your popups, customize the spacing/line breaks, or add bolded, italicized or strikethroughed (struckthrough?) text, you can do so with Markdown. Note that you will only be able to use this feature if you are on a paid plan.

Don't know what Markdown is? No sweat. We found this helpful explanation on the internet: 

At its core, Markdown is a super simple way to add formatting like headers, bold, bulleted lists, and so on to plain text. It was originally designed to be an easy alternative to HTML, and allows people to create web pages with no HTML experience—but it's also a great way to organize notes, to-do lists, and other things. 

Cool, huh? Pixelpop doesn't support all Markdown styles, but it does support the most important ones. Here's how to use Markdown to stylize your popdown content:

You can bold text with two underscores or asterisks.

**bold text** OR __bold text__

You can italicize text with one underscore or asterisk.

_italicized text_ OR *italicized text*

You can strikethrough text with two tildes.

~~strikethrough text~~

You can add links with brackets and parentheses.

[link text](

You can add break lines or spaces the way you would in any text document —just hit the Enter or Return key on your keyboard.

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.


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.


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 

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


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 only include the final slash - not the full URL. Like this: 

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


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


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.