Popups are a powerful way to grab attention and engage users who visit your website on their mobile devices. Postscript makes it easy to customize your mobile popups (both full-screen and partial) to match the look and voice of your brand. With Postscript popups, you can:
- Boost your acquisition by easily and compliantly collecting SMS and email subscribers.
- Indicate specific pages that you'd like to include or exclude the popup display on.
- Use CSS to have more creative freedom when customizing your popup.
Before We Get Started
Key Information
We designed a few templates using CSS that take the Postscript mobile popups to the next level. The CSS code you'll see below focuses on object size, object position, custom headline font, and text size.
With each, you will still need to set your background image, text color, and button text and color on the native Mobile Popup page.
Compliance Language Requirements
When collecting subscribers, the TCPA requires you to include necessary compliance language that informs visitors they are opting into SMS messaging from your store. At Postscript, we hard code compliance language into the popups you use.
While you have the ability to customize the look of your popup, it's imperative to keep disclaimer text visible. Disclaimer text needs to be at least 12px in size and maintain a minimum 4.5:1 contrast ratio to remain TCPA compliant. Please use caution when modifying the disclaimer text.
Displaying Imported Fonts
In the example below, Huron calls to a few imported fonts throughout their popups. The text below shown in blue describes the elements that the subsequent code will influence. You can learn more about importing fonts here.
Font imported from Google Fonts to use throughout the popup
@import 'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap';
@font-face {
font-family: 'ITC Avant Garde';
src: url(https://cdn.shopify.com/s/files/1/avantgardemditc-bold.ttf);
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Neuzit';
src: url(https://cdn.shopify.com/s/files/1/Neuzeit_S_LT_Std_Book.woff);
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Platform Bold';
src: url(https://cdn.shopify.com/s/files/1/Platform-Bold.woff);
font-weight: 400;
font-style: normal;
font-display: swap;
}
Main logo image inside the popup
#ps-widget-custom-form__logo-image {
height: 20px;
}
Text before the main large headline text
#ps-widget-custom-form__pre-headline {
font-family: 'ITC Avant Garde';
}
Main header text
#ps-widget-custom-form__headline {
font-family: 'ITC Avant Garde';
font-size: 35px;
margin-top: 20px;
}
Sub-heading text
#ps-widget-custom-form__post-headline {
font-family: 'Neuzit';
font-size: 14px;
margin-top: 15px;
margin-bottom: -15px;
}
Form field for phone input
.ps-widget-custom-form__phone-question {
font-family: 'Neuzit';
}
Form field for email address collection on step 2
.ps-widget-custom-form__email-question {
font-family: 'Neuzit';
}
Submission button at bottom of popup
#ps-widget-custom-form__submit-button {
font-family: 'ITC Avant Garde';
font-size: 27px;
}
Link beneath button used to dismiss the popup
#ps-widget-custom-form__close-button {
font-family: 'Neuzit';
font-size: 12px;
}
#ps-mobile-widget-close__body {
font-family: 'ITC Avant Garde';
font-size: 20px;
}
Customizing Radio Buttons
In the example below, Jones Road's mobile popup uses CSS to customize the look of the radio buttons displayed on their popup for subscriber data collection. The text below shown in blue describes the elements that the subsequent code will influence.
Font imported from Google Fonts to use throughout the popup
@import url("https://cdn.shopify.com/s/files/1/0424/9527/9254/t/69/assets/fonts.static.css?v=98063671479515456291673006152");
Main logo image inside the popup
#ps-widget-custom-form__logo-image {
width: 200px;
}
Main header text
#ps-widget-custom-form__headline {
font-family: GeogrotesqueCondBoldWeb,Courier,Courier New,sans-serif;
font-size: 24px;
font-weight: bold;
letter-spacing: 0px;
padding: 8px 12px;
margin: 0 0 12px 0;
background-image: url("https://cdn.shopify.com/s/files/1/0424/9527/9254/files/newpinktapestrips-postscript.png?v=1687966711");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
Sub-heading text
#ps-widget-custom-form__post-headline {
font-family: RingsideWideWeb,Courier,Courier New,sans-serif;
font-size: 18px;
letter-spacing: 1px;
}
Disclaimer text beneath the phone form field (please use caution when editing this text)
#ps-widget-custom-form__disclaimer-text {
margin-top: 10px;
margin-bottom: 30px;
line-height: 1.3;
font-family: RingsideWideWeb,Helvetica,Arial,sans-serif;
text-align: center;
}
Form field for phone input
.ps-widget-custom-form__phone-question {
font-family: BaseMonoWideWeb,Courier,Courier New,sans-serif !important;
}
Form field for email address collection
.ps-widget-custom-form__email-question {
font-family: BaseMonoWideWeb,Courier,Courier New,sans-serif !important;
margin: 0px !important;
padding: 0px !important;
}
Radio Buttons
.ps-widget-custom-form__radio-question-legend {
font-family: BaseMonoWideWeb,Courier,Courier New,sans-serif !important;
font-size: 18px;
text-align: center;
}
.ps-widget-custom-form__radio-question-label {
font-family: RingsideWideWeb,Helvetica,Arial,sans-serif;
color: grey;
font-size: 14px;
}
.ps-widget-custom-form__radio-question-input {
border: 1px solid gray !important;
}
Submission button at bottom of popup
#ps-widget-custom-form__submit-button {
padding: 15px;
font-family: BaseMonoWideWeb,Courier,Courier New,sans-serif !important;
font-size: 16x;
letter-spacing: 1px;
margin-top: -20px !important;
}
Link beneath button used to dismiss the popup
#ps-widget-custom-form__close-button {
font-family: BaseMonoWideWeb,Courier,Courier New,sans-serif !important;
font-size: 12px;
margin-top: 0px !important;
pointer-events: none;
cursor: default;
}
Adjusting Headlines
In the example below, the brand customizes the spacing, font, and sizing of all three of their headlines. The text below shown in blue describes the elements that the subsequent code will influence. You can learn more about importing fonts here.
Font imported from Google Fonts to use throughout the popup
@font-face {
font-family: 'Moderat Bold';
src: url(https://www.carawayhome.com/static/Moderat-Bold-dfab4f58a63e9634ee150b832857c2ae.woff2);
}
@font-face {
font-family: 'Moderat Regular';
src: url(https://www.carawayhome.com/static/Moderat-Regular-4fabee333084659a1a5251f0f435c2df.woff2);
}
@font-face {
font-family: 'SuisseWorks Bold';
src: url(https://www.carawayhome.com/static/SuisseWorks-Bold-WebS-27c764da594f2f1bf34373624e125e59.woff2);
}
@font-face {
font-family: 'SuisseWorks Medium';
src: url(https://www.carawayhome.com/static/SuisseWorks-Medium-WebS-28749322806815cb73635fedb1fa10cf.woff2);
}
This code contains all elements from the top of the headline to below the submit button.
ps-popup-form {
margin-top: -60%;
}
Disclaimer text beneath the phone form field (please use caution when editing this text)
#ps-widget-custom-form__disclaimer-text {
color: #000000;
font-size: 10px;
text-align: center;
padding-right: 10px;
padding-left: 10px;
}
Submission button at bottom of popup
#ps-widget-custom-form__submit-button {
}
#ps-widget-custom-form__submit-button {
color:rgb(0, 0, 0);
}
The X in the upper right corner
#ps-mobile-widget-overlay__close-button
{ border: none;
}
The third paragraph starting with "Sign up"
#ps-widget-custom-form__pre-headline {
font-size: 30px;
color: #000000;
font-family: 'SuisseWorks Bold';
line-height: 36px;
margin-bottom:10px;
}
Main heading text in the popup
#ps-widget-custom-form__headline {
font-family: 'Moderat Regular';
font-size: 13px;
color: #000000;
line-height: 22px;
margin-bottom: 15px;
font-weight: 100;
}
Sub-heading text following the headline
#ps-widget-custom-form__post-headline {
font-family: 'Moderat Regular';
font-size: 12px;
color: #020202;
line-height: 18px;
}
#ps-widget-custom-form__close-button {
background-color: #1F3438;
color:rgb(255, 255, 255);
}
Submission button at bottom of popup
#ps-widget-custom-form__submit-button {
color: #FFFFFF;
margin-top: -20px;
}
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 this tutorial for how to customize your popup font, text size, text color, and more.
- Did you know you can customize your mobile 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.