Customize Your Mobile Popup with CSS

Who gets this? Shops on all Postscript plans have access to this feature. Learn more about Postscript Plans.

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:

  • Have more control over the customizations and appearance of your popup to perfectly match your brand and website design.
  • Create a more engaging experience for your visitors.
  • Design your popup for an upcoming holiday, special giveaway, or feature product images for a new product drop.

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


AccessCSS_Mobile.gif

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

Note: In order to collect subscribers compliantly, your shop's Terms of Service and Privacy Policy need to be hyperlinked in the language shown above. If they cannot be hyperlinked, the full URLs of each need to be included so a viewer may search your terms or privacy policy if needed.

For example, "View our Terms of Service (https:/myshop.com/terms-of-service/) and Privacy Policy (https://myshop.com/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.

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