Styling Your Pixelpop Popup

While you want your popups to stand out and attract attention, you don’t want them to be so far removed from your store’s overall look and feel that customers mistake them for spam or a computer virus. It’s true that good popups “pop,” but we think the best ones also blend, matching the colour scheme and typography of your store and making visitors at home.

Pixelpop's styling options allow you to customize the Theme, Shape, Size, Content, Color, and color of your popup (and so much more!). Here's a quick run-through of Pixelpop's styling settings and how to use them.

popup-style-settings

Theme

You'll begin by selecting a Theme or basic design for your popup. By default, this will be set to Dallas, 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.