Mobile Popup CSS Template Gallery

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

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.

About This Gallery

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.

We designed this popup to mimic the look and feel of a standard desktop popup. This includes:

Compliance language appears below the phone number field (or two-touch button, if you have two-touch enabled).
The close action X is on the top-right corner of the popup.
Our powered by Postscript text is centered at the bottom of the popup.

In order for this design to display correctly, we ask that you follow the below guidelines. You can do so from your Mobile Popup page:

You can collect phone and email with this design.
You can choose whether to enable two-touch. If enabled, you will see the button as pictured above.
Ensure you have Partial selected as your popup type.
You can use this design with square or rounded edges.

Copy and paste the following code snippets into your CSS Editor and adjust the custom font and text size as desired. We've colored those code snippets in red.

You can learn more about importing a Google Font here.

Note: When previewing your popup, we recommend that you select Overwrite above the CSS Editor field and refresh your website on your mobile device. The dynamic preview to the right of the CSS Editor does not always accurately display the exact position of elements.

@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');
h2 {
    font-family: 'Rock Salt', serif !important;
    font-weight: 300;
}

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

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

#ps-mobile-widget-partial__container {
    border-radius: 25px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
}

#ps-mobile-widget-partial__form-wrapper{
    position: absolute;
    top: 49%;
}

#ps-mobile-widget-partial__terms {
    font-size: 25px;
    text-align: center;
    width: 100%;
    padding: 7px;
    font-size: 2.1vw;
    line-height: 1.5;
    position: absolute;
    top: 75%;
}

#ps-mobile-widget-partial__footnote-container {
    text-align: center;
    line-height: 1;
    font-size: 10px;
    position: absolute;
    top: 95%;
    right: 35%;
}

#ps-mobile-widget-partial__buttons-container {
    position: absolute;
    top: 50%;
    padding: 0 15%;
    width: 100%;
}

#ps-mobile-widget-partial__close-button {
    position: absolute;
    top: 5%;
    left: 88%;
}

We designed this popup to appear as a slim popup on a mobile device. In order to make this happen, we've simplified which elements appear on the popup.

Use a headline to incentivize visitors with VIP membership, giveaways, discounts, or updates.
Enable two-touch to give visitors a streamlined opt-in experience
Compliance language appears below the phone number field (or two-touch button, if you have two-touch enabled).

In order for this design to display correctly, we ask that you follow the below guidelines. You can do so from your Mobile Popup page:

You can only collect phone numbers with this design.
Enable two-touch. This is required for the code.
Ensure you have Partial selected as your popup type.
You can use this design with square or rounded edges.

Copy and paste the following code snippets into your CSS Editor and adjust the custom font and text size as desired. We've colored those code snippets in red.

You can learn more about importing a Google Font here.

@import url('https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap');
h2 {
    font-family: 'Bungee Shade', serif !important;
    font-weight: 300px;
}  

#ps-mobile-widget-partial__container {
    height: 40%;
}

#ps-mobile-widget-partial__logo-container {
    display: none;
}

#ps-mobile-widget-partial__sub-headling {
    display: none;
}

#ps-mobile-widget-partial__header-container{
    text-align: center;
    height: 24vh;
}

#ps-mobile-widget-partial__headline {  
    font-size: 20px;
}

#ps-mobile-widget-partial__buttons-container {
    position: absolute;
    bottom: 19%;
    left: 14%;
    width: 75%;
    height: 20%;
}

#ps-mobile-widget-partial__accept-button-text {
    font-size: 15px;
    position: absolute;
    bottom: 60%;
    left: 16%;
    width: 71%;
    height: 20%;
}

#ps-mobile-widget-partial__accept-button {
    position: absolute;
    bottom: 8%;
    left: 10%;
    width: 75%;
    height: 20%;
    border: 0px;
}

#ps-mobile-widget-partial__terms {
    text-align: center;
    width: 100%;
    padding: 7px;
    font-size: 2vw;
    line-height: 1.1;
    position: absolute;
    top: 66%;
}

#ps-mobile-widget-partial__footnote-container {
    text-align:center;
    line-height: 1;
    font-size: 7px;
    position: absolute;
    top: 92%;
    right: 40%;
}

#ps-mobile-widget-partial__footnote-link {
    font-size: 7px;
}

#ps-mobile-widget-partial__close-button {
    position: absolute;
    top: 5%;
    left: 88%;
}

We designed this popup to float in the center of a mobile device rather than appear at the bottom of the screen. In order to make this happen, we've simplified which elements appear on the popup.

Use a headline to incentivize visitors with VIP membership, giveaways, discounts, or updates.
Enable two-touch to give visitors a streamlined opt-in experience
Compliance language appears below the phone number field (or two-touch button, if you have two-touch enabled).

In order for this design to display correctly, we ask that you follow the below guidelines. You can do so from your Mobile Popup page:

You can only collect phone numbers with this design.
Enable two-touch. This is required for the code.
Ensure you have Full selected as your popup type.

Copy and paste the following code snippets into your CSS Editor and adjust the custom font and text size as desired. We've colored those code snippets in red.

You can learn more about importing a Google Font here.

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
h2, span {
  font-family: 'Bebas Neue', cursive !important;
  font-weight: 200;
}

#ps__container {
  background: transparent;
  height: 100vh;
  width: 100vw;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

#ps-mobile-widget-overlay__container {
  max-height: 530px;
  max-width: 530px;
  height: calc(100vw - 15px);
  width: calc(100vw - 15px);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 15px;
  position: relative;
  top: unset;
  bottom: unset;
  left: unset;
  right: unset;
  z-index: 4;
}

#ps-mobile-widget-overlay__close-container {
  bottom: 0;
  top: unset;
  right: unset;
  color: #000000;
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100vw;
}

#ps-mobile-widget-overlay__close-button {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  padding-top: calc(50vh + 50vw + 17px);
  padding-right: calc(50vw - 12px);
}

#ps-mobile-widget-overlay__logo-container {
  display: none;
}

#ps-mobile-widget-overlay__pre-headline {
  display: none;
}

#ps-mobile-widget-overlay__post-headline {
  display: none;
}

#ps-mobile-widget-overlay__header-container {
  position: absolute;
  top: 13%;
}

#ps-mobile-widget-overlay__header {
  position: relative;
  top: unset;
  transform: unset;
}

#ps-mobile-widget-overlay__headline {
  font-size: 50px;
  text-align: center;
}

#ps-mobile-widget-overlay__buttons-container {
  position: absolute;
  top: 55%;
  height: auto;
  padding: 0 15%;
  width: 100%;
  z-index: 4;
  margin-bottom: 0;
}

#ps-mobile-widget__email-input {
  margin-top: 0;
  margin-bottom: 12px;
  height: 40px;
  border: 1px solid black;
  text-align: left;
  font-size: 13px;
  line-height: 18px;
  background-color: #FFFFFF;
}

#ps-mobile-widget-overlay__accept-button {
  position: relative;
  top: 70%;
  width: 100%;
  height: 50px;
  min-width: 125px;
  padding: 10px 35px;
  font-size: 24px;
  letter-spacing: .01em;
  box-sizing: border-box;
  margin-top: 1px;
  display: inline-block;
}

#ps-mobile-widget-overlay__reject-button {
  display: none !important;
}

#ps-mobile-widget-overlay__terms-container {
  position: absolute;
  top: 65%;
  padding: 0;
  margin: 7px auto 0;
  max-width: 75%;
  z-index: 4;
  order: 6;
}

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.

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

About This Gallery

1. Mobile Popup with Desktop Popup Design

Popup Requirements

2. Half-Sized Partial Popup

Popup Requirements

3. Floating Circle Popup

Popup Requirements

Compliance Language Requirements

Additional Resources

Get Support