Customize Your Mobile Popup with CSS

Tip: Select any of the images of GIFs in this article for a closer look.

Popups are a powerful way to grab attention and engage users who visit your website on their mobile devices.

About Mobile Popups


Postscript makes it easy to customize your mobile popups (both full-screen and partial) to match the look and voice of your brand. For those wishing to take this customization a step further, Postscript allows you to edit your popups' cascading style sheets (CSS).

New to CSS? We're here to help. Check out our Popup CSS Customization Glossary for the many popup elements available for customization.

Why You Should Customize Your Mobile Popup


  • Customizing your mobile popup allows you to match your brand and website design.
  • A customized mobile popup creates a more engaging experience for your visitors.
  • You can design your popup for an upcoming holiday, special giveaway, or feature product images for a new product drop.

Access Your Mobile Popup CSS Editor


  1. You can access your mobile popup by selecting Popups in the side menu of your Postscript dashboard.
  2. Select Edit for your mobile popup.
  3. Finally, select Edit CSS in the top-right corner of the page. Now you're ready to start adding customized CSS code.
  4. When you're ready to save and implement your edits, select the Overwrite button above the CSS code editor.

Customize Popup Font


When it comes to customizing your font, you have two options: you can import a font from Google Fonts or you can define an existing font family.

With fonts, you can also define which text elements should appear in the requested font. For example, you can include the HTML elements of h1 and h2, which tells the code that only Header 1 and Header 2 font should appear in the requested font.

Import Google Font Define Existing Font

  1. When you find a font that you like, select + Select this style to add the font to your favorites.
  2. Locate the Use on web section and select the @import option. This displays the import script for the font.
  3. Copy and paste the below code into your CSS code editor in Postscript.
  4. On the Google Fonts page, copy the import font code between the <span> and</span> container and paste it over the import font line from our sample code.
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
body, h1, h2, h3, h4, p, span, div, button {
font-family: 'Bebas Neue', serif !important;
font-weight: 300;
}

Tip: The !important rule in CSS is used to add more importance to a property/value than normal.

In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element.

Note: If you choose to import a font, it will not show in Postscript's dynamic editing display. You will need to first select Overwrite above the CSS code editor, then preview your popup on your website.

Customize Text Size


You can customize font size for any of our font-related popup IDs. This includes your pre-headline, headline, post-headline, and disclaimer text.

Font size requires a percentage value. With Postscript's dynamic editing display, you can view changes you make to the size in real-time. This means you can adjust the percentage a few times if needed until you reach your desired size.

Pre-Headline Headline Post-Headline Disclaimer Text

Only full-screen mobile popups have pre-headline text.

Copy and paste the following code snippets into your CSS Editor and adjust the font size as desired.

#ps-mobile-widget-overlay__pre-headline {
    font-size: 200%;
 }

Customize Text Color


The ability to customize text color is important, especially if you're using a dark background color or an image.

When you define color, you have the option to do so by the color's name or, if you have branded colors, you can use a specific hex code.

When defining font color, you want to specify which popup element you wish to appear in the defined color. You can do so using the element ID

Pre-Headline Headline Post-Headline Disclaimer Text

Only full-screen mobile popups have pre-headline text.

Copy and paste the following code snippets into your CSS Editor and adjust the font color as desired.

The below snippet uses the color name.

#ps-mobile-widget-overlay__pre-headline {
    color: red;
 }

The below snippet defines a shade of red using a specific hex code.

#ps-mobile-widget-overlay__pre-headline {
    color: #C0392B;
 }

Change Logo Size


Once you've uploaded an image of your logo in Postscript's standard popup editor, you can adjust the size of the logo until it looks just right on the popup.

Just like when you adjust text size, changes to logo sizing updates in real-time in the dynamic editing display. This means you can adjust the percentage a few times if needed until you reach your desired size.

Full-Screen Popup Partial Popup

Copy and paste the below code snippets into your CSS Editor and adjust the logo size as desired.

#ps-mobile-widget-overlay__logo-image {
   width: 25%;
}

Edit Phone and Email Input Fields


If you've added a custom background image, or if you have a background color that makes it difficult to see the phone or email input fields, then you might consider editing the color of these fields. 

As with text color, you can enter the name of a color or if you have branded colors, you can enter a hex code.

Note: Phone input fields only show if you have not enabled the Two Touch toggle on the standard  Postscript mobile popup editing screen.
Phone Input Field Email Input Field

Copy and paste the following code snippets into your CSS Editor and adjust the field color as desired.

#ps-mobile-widget-overlay__phone-input-wrapper{
background-color: #EDD9DA;
}

Copy and paste the following code snippets into your CSS Editor and adjust the field color as desired.

#ps-mobile-widget-partial__phone-input-wrapper{
background-color: #EDD9DA;
}

Compliance Language Requirements


When collecting subscribers, the TCPA requires you to include necessary compliance language that informs visitors that they are opting into SMS messaging from your store.

You must include compliance language on your mobile popup.

Here's the TCPA-approved compliance language:

*I agree to receive recurring automated marketing text messages (e.g. cart reminders) at the phone number provided. Consent is not a condition to purchase. Msg & data rates may apply. Msg frequency varies. Reply HELP for help and STOP to cancel. View our Terms of Service and Privacy Policy.

What's Next?


Check out the below resources which provide additional information on popup elements you can customize for both your desktop and mobile popups.

Get Support


Have questions? Please feel free to reach out to our wonderful Support team at support@postscript.io or via live chat. You can also submit a support request here!

Need ongoing channel strategy guidance? Please fill out this form and we'll connect you to one of our certified partners.

Was this article helpful?
0 out of 0 found this helpful