Mobile Popup Template Gallery

   Tip: Select any of the images or GIFs in this article for a closer look.

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. 

We designed a few templates using CSS that take the basic Postscript mobile popup 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.

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