Customize Your Mobile Popup with CSS

Postscript makes it easy to customize your mobile popup to match the look and voice of your brand with cascading style sheets (CSS). By adding CSS to your popups, you can:

We designed this guide as a reference to help you understand and locate the various HTML and CSS elements present in our mobile popups.

Access Your Mobile Popup CSS Editor

1. Select Acquisition in the side menu of your Postscript dashboard, then select Popups.
2. Choose the mobile popup that you would like to add CSS to. If you haven't created a popup yet, start here. 
3. On the popup details page, select Edit CSSin the top-right corner. By default, Postscript lists several elements in the CSS editor. Use the listed elements to change the design of your popup or add additional ones as you see fit.
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 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;
}

#ps-mobile-widget-partial__headline {
    font-family: 'Open Sans';
    font-size: 175%;
 }

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.

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

#ps-mobile-widget-overlay__headline {
    font-size: 500%;
 }

#ps-mobile-widget-partial__headline {
    font-size: 400%;
 }

#ps-mobile-widget-overlay__post-headline {
    font-size: 150%;
 }

#ps-mobile-widget-partial__sub-headline {
    font-size: 100%;
 }

#ps-mobile-widget-overlay__terms {
    font-size: 100%;
 }

#ps-mobile-widget-partial__terms {
    font-size: 55%;
 }

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. 

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

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

#ps-mobile-widget-overlay__headline {
    color: blue;
 }

#ps-mobile-widget-partial__headline {
    color: #5DADE2;
 }

#ps-mobile-widget-overlay__post-headline {
    color: green;
 }

#ps-mobile-widget-partial__sub-headline {
    color: #239B56;
 }

#ps-mobile-widget-overlay__terms {
    color: purple;
 }

#ps-mobile-widget-partial__terms {
    color: #9B59B6;
 }

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.

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

#ps-mobile-widget-partial__logo-image {
   width: 15%;
}

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.

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

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

#ps-mobile-widget__email-input{
   background-color: #EDD9DA;
}

#ps-mobile-widget__email-input{
   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.

Additional Resources

• Interested in further customization with CSS? Check out our CSS Glossary to better understand and locate the various HTML and CSS elements present in our popups.
• Just getting started with designing your mobile popup? Check out our template gallery for CSS codes and inspiration.
• Did you know you can customize your Back in Stock popup with CSS? Learn how with this article

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.