Desktop 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 desktop devices. Postscript makes it easy to customize your desktop popups (both full-screen and partial) to match the look and voice of your brand. With Postscript popups, you can:

  • Optimize your popup conversions by finding the best combination of popup creatives, timing, images, message copy, and incentives for your brand all through A/B testing.
  • Recapture subscribers and reclaim potentially lost revenue with an exit-intent popup.
  • Further customize the look of your popups with side-images or banners.

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.

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