Customize Your Desktop 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 desktop 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 desktop popups.

Access Your Desktop Popup CSS Editor


  1. Select Acquisition in the side menu of your Postscript dashboard, then select Popups.
  2. Choose the desktop 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 CSS in the top-right corner. By default, Postscript lists several elements in the CSS editor. You can remove these, use any 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('');
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

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

#ps-desktop-widget__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

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-desktop-widget__pre-headline {
    color: red;

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

#ps-desktop-widget__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.

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

#ps-desktop-widget__logo-image {
   width: 25%;

Add URL-Hosted Background Image

Postscript's standard desktop popup editor allows you to upload a background image with a file size of less than 2 MB. If you try to upload an image larger than 2 MB, your upload will error out. Luckily, you can use CSS to add your desired background image.

Before you head to the code, you'll need to host the image somewhere that allows for it. We recommend uploading your image to your Shopify files.

Upload Image to Shopify Use CSS to Add Background Image


  1. From your Shopify dashboard, select Content on the left-side navigation panel.
  2. Select Files
  3. Select Upload Files in the top-right corner of the page. Locate the image on your device and continue.
  4. Once Shopify has successfully uploaded your image, select the Link icon to the far-right of the image line. 
  5. With the image URL copied, you are ready to paste it into your CSS code.

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.

Phone Input Field Email Input Field

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

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 desktop 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:/ 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 desktop 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 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 1 found this helpful