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.

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.

1. Mobile Popup with Desktop Popup Design


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.
Popup Design CSS Code

Popup Requirements

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.

2. Half-Sized Partial Popup


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).
Popup Design CSS Code

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.

3. Floating Circle Popup


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).
Popup CSS Code

Popup Requirements

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.

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.

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