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.
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.
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.
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.
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.
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.
Adding links, line breaks, and text styling 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.
You can add links with brackets and parentheses.
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.