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
- Select Acquisition in the side menu of your Postscript dashboard, then select Popups.
- Choose the desktop popup that you would like to add CSS to. If you haven't created a popup yet, start here.
- 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.
- 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 can import a font from Shopify or from Google Fonts, or you can define an existing font family. We cover all three options below.
When using Shopify font(s) in your popup, you'll first need to import the font, then you can define where that font should be used. We break down these two steps below.
- To import your Shopify font into your desktop popup CSS editor, navigate to your shop's homepage. Right click on the page and select View page source.
- In your page source, using the Search functionality (Command+F on Mac or Ctrl+F on PC), search for font-face.
- Locate, highlight, and copy the font(s) you'd like to import from Shopify. These will begin with @font-face and end with a source URL, followed by a left-facing curly bracket. View an example of what this code may look like below.
- Navigate to your desktop popup in Postscript. Copy and paste the below code into your CSS code editor in Postscript.
- You've just imported your Shopify font. Now, you can reference this font when isolating and adjusting the copy on your popup.
@font-face {
font-family: Assistant;
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("//www.exampleshop.com/cdn/fonts/assistant/assistant_n4.bcd3d09dcb631dec.woff2?h1=cGlsb3RzaG9waWZ5d3d3Lm5ld2VyYWNhcC5jb20&h2=bmV3ZXJhY2FwLmNvbQ&h3=zaG9waWZ5LmNvbQ&hmac=590db6") format("woff2"),
url("//www.exampleshop.com/cdn/fonts/assistant/assistant_n4.a2d012304becc2a.woff?h1=cGlsb3RzaG9waWZ5d3d3Lm5ld2VyYWNhcC5jb20&h2=bmV3ZXJhY2FwLmNvbQ&h3=zaG9waWZ5LmNvbQ&hmac=07c2dd6") format("woff");
}Once your Shopify font is imported, you can assign that font to specific elements in your popup. In this section, we'll provide the code for those elements.
The text in blue is the code snippet you can inject into your CSS editor to isolate a specific element of your popup. The text in red is the code you'll use to call the font family you imported earlier in this article. Please note: Helvetic Neue Condensed is a placeholder.
| # | Element Name | Code Snippet |
| 1 | Pre-headline |
#ps-widget-custom-form__pre-headline {
font-family: 'Helvetica Neue Condensed';
}
|
| 2 | Headline |
#ps-widget-custom-form__headline {
font-family: 'Helvetica Neue Condensed';
}
|
| 3 | Post-headline |
#ps-widget-custom-form__post-headline {
font-family: 'Helvetica Neue Condensed';
}
|
| 4 | Phone Number Placeholder Text |
#ps-widget-custom-form__phone-question {
font-family: 'Helvetica Neue Condensed';
}
|
| 5 | Disclaimer Language |
#ps-widget-custom-form__disclaimer-text {
font-family: 'Helvetica Neue Condensed';
}
|
| 6 | Button text |
#ps-widget-custom-form__submit-button {
font-family: 'Helvetica Neue Condensed';
}
|
| 7 | Close button text |
#ps-widget-custom-form__close-button {
font-family: 'Helvetica Neue Condensed';
}
|
Important: If you change your Shopify theme, you will need to re-import your new theme's Shopify font in order for your popup to inherit the correct font from your website.
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.
- When you find a font that you like, select + Select this style to add the font to your favorites.
- Locate the Use on web section and select the @import option. This displays the import script for the font.
- Copy and paste the below code into your CSS code editor in Postscript.
- 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.
You can use an existing web-safe font in your popup. Examples of web-safe fonts include (but are not limited to):
|
Arial (sans-serif) |
American Typewriter (serif) |
|
Arial Black (sans-serif) |
Andalé Mono (monospace) |
|
Verdana (sans-serif) |
Courier (monospace) |
|
Tahoma (sans-serif) |
Lucida Console (monospace) |
|
Trebuchet MS (sans-serif) |
Monaco (monospace) |
|
Impact (sans-serif) |
Bradley Hand (cursive) |
|
Times New Roman (serif) |
Brush Script MT (cursive) |
|
Didot (serif) |
Luminari (fantasy) |
|
Georgia (serif) |
Comic Sans MS (cursive) |
It's important to specify which popup element you wish to appear in the font. You can do so this using the element ID. You can view a list of desktop popup elements here.
#ps-widget-custom-form__headline {
font-family: 'Open Sans';
font-size: 200%;
}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.
Copy and paste the following code snippets into your CSS Editor and adjust the font size as desired.
#ps-widget-custom-form__pre-headline {
font-size: 200%;
}
Copy and paste the following code snippets into your CSS Editor and adjust the font size as desired.
#ps-widget-custom-form__headline {
font-size: 500%;
}
Copy and paste the following code snippets into your CSS Editor and adjust the font size as desired.
#ps-widget-custom-form__post-headline {
font-size: 150%;
}
Copy and paste the following code snippets into your CSS Editor and adjust the font size as desired.
#ps-widget-custom-form__disclaimer-text {
font-size: 75%;
}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.
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-widget-custom-form__pre-headline {
color: red;
}The below snippet defines a shade of red using a specific hex code.
#ps-widget-custom-form__pre-headline {
color: #C0392B;
}
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-widget-custom-form__headline {
color: blue;
}The below snippet defines a shade of blue using a specific hex code.
#ps-widget-custom-form__headline {
color: #5DADE2;
}
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-widget-custom-form__post-headline {
color: green;
}The below snippet defines a shade of green using a specific hex code.
#ps-widget-custom-form__post-headline {
color: #239B56;
}
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-widget-custom-form__disclaimer-text {
color: purple;
}The below snippet defines a shade of purple using a specific hex code.
#ps-widget-custom-form__disclaimer-text {
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.
Copy and paste the below code snippets into your CSS Editor and adjust the logo size as desired.
#ps-widget-custom-form__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.
- From your Shopify dashboard, select Content on the left-side navigation panel.
- Select Files
- Select Upload Files in the top-right corner of the page. Locate the image on your device and continue.
- Once Shopify has successfully uploaded your image, select the Link icon to the far-right of the image line.
- With the image URL copied, you are ready to paste it into your CSS code.
Copy and paste the below code snippets into your CSS Editor and swap our URL for yours.
#ps-desktop-widget__body{
background-image: url("https://cdn.shopify.com/s/files/1/0143/6110/0346/files/blue_sky.jpg?v=1626924667")
}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.
When adding a color to the background of your phone input field, you'll notice 90 degree corners as shown in the middle popup example labeled "No Border Radius". By adding specifications to the border, you can be sure the background color applies to the rounded input field only.
Copy and paste the following code snippets into your CSS Editor and adjust the field color as desired.
.ps-widget-custom-form__phone-question{
background-color: #red;
border-radius: 40px;
}When adding a color to the background of your email input field, you'll notice 90 degree corners as shown in the middle popup example labeled "No Border Radius". By adding specifications to the border, you can be sure the background color applies to the rounded input field only.
Copy and paste the following code snippets into your CSS Editor and adjust the field color as desired.
.ps-widget-custom-form__email-question{
background-color: #purple;
border-radius: 40px;
}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:
*By providing your phone number, you agree to receive recurring automated marketing text messages (e.g. cart reminders) from this shop and third parties acting on its behalf. Consent is not a condition to obtain goods or services. Msg & data rates may apply. Msg frequency varies. Reply HELP for help and STOP to cancel. You also agree to the 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, "You also agree to the 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 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 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.