Desktop 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 desktop devices.


Postscript makes it easy to customize your desktop popups (both full-screen and standard) to match the look and voice of your brand. 

We designed a few templates using CSS that take the  basic Postscript desktop 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, logo image, text color, and button text and color on the native Desktop Popup page.

1. Side-by-Side Popup


We designed this popup to feature the following:

  • Side-by-side design that allows you to feature a product or brand image beside subscriber collection fields.
  • Imported custom font care of Google Fonts.
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 Desktop Popup page:

  • You can collect phone and email subscribers with this design.
  • Ensure you have Modal Window selected as your popup type.
  • This design doesn't allow for a logo. You can include your logo as part of your left-side image if desired.
  • You can use this design with square or rounded edges.

2. Circle Popup With Spinning Border


This popup features the following:

  • Circular shape with the close X button outside the circle.
  • Dynamic spinning border
  • Imported custom font care of Google Fonts.
Popup Design CSS Code

Popup Requirement

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

  • You can collect phone and email subscribers will this design.
  • Ensure you have Modal Window selected as your popup type.
  • You can upload a logo with this design. We recommend you use a logo with a transparent background if you are also using a color or image popup background.

Add a Spinning Border

You will need to create a circular image border in your preferred design program. You can choose to feature symbols, like the paw prints pictured above, or you can use text to alert visitors to a sale, giveaway, or new product drop.

Here's what you need to know for your spinning border:

  • Dimensions for your image should be 1241 x 1240
  • Host the image in your Shopify files. You will need to add the URL to the code we've prepared below.
  • Once you've copied the below code into your CSS editor, you can paste the URL for your image in place of the image listed in the #ps-desktop-widget__body:after section. We've changed the color of that particular line of code to hot pink.

3. Desktop Popup With Rounded Edges


We designed this popup to feature the following:

  • Deeper rounded edges and sides than those on our standard desktop popup.
  • Edited the color of the phone and email fields to stand out against a light background image.
  • Imported custom font care of Google Fonts.
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 Desktop Popup page:

  • You can collect phone and email subscribers will this design.
  • Ensure you have Modal Window selected as your popup type.
  • You can upload a logo with this design. We recommend you use a logo with a transparent background if you are also using a color or image popup background.

Compliance Language Requirements


When collecting subscribers, the TCPA requires you to include necessary compliance language that informs visitors they are opting into SMS mes saging 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