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.

About This Gallery

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.

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.

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.

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 in the browser window. The dynamic preview to the right of the CSS Editor will not accurately display the exact position of elements.

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400&display=swap');
h4, p, button, div {
    font-family: 'Josefin Sans', sans-serif !important;
    font-weight:400;
}

#ps-desktop-widget__logo-image {
    display: none !important;
}

#ps-desktop-widget__body {
    max-width: 640px !important;
    min-width: 420px !important;
    min-height: 500px !important;
    padding: 50px 50px 80px;
}

form {
    position: relative;
    top: 160px;
    right: -150px;
    max-width: 300px !important;
    margin: 0 auto;
}

#desktop-widget__aria-description {
    position: absolute;
    top: 24px;
    right: 40px;
}

#ps-desktop-widget__logo-image {
    max-width: 86px;
    margin: 0 auto;
}

#ps-desktop-widget__disclaimer-text {
    text-align: center;
}

#ps-desktop-widget__submit {
    order: 1;
    max-height: 50px;
}

#ps-desktop-widget__close-link {
    order: 2;
}

#ps-desktop-widget__headline {
    font-size: 56px;
    letter-spacing: 0.3px;
    font-weight: 500;
    max-width: 300px;
}

#ps-desktop-widget__post-headline {
    font-size: 16px;
    margin: 16px 56px 56px
}

#ps-desktop-widget__email-input {
    border-top-width: 0;
    border-left-width: 0;
    border-right-width: 0;
}


#ps-desktop-widget__phone-input {
    border-top-width: 0;
    border-left-width: 0;
    border-right-width: 0;
}

#ps-desktop-widget__phone-input-wrapper {
 margin-top: 20px;
}

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.

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.

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 in the browser window. 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=Chewy&display=swap');
h4, p {
  font-family: 'Chewy', cursive !important;
}

@keyframes spin {
 from {transform:rotate(0deg);}
 to {transform:rotate(360deg);}
}
 
#ps-desktop-widget__body {
 border-radius: 100%;
 width: 100%;
 height: 100%;
 max-width: 530px;
 max-height: 530px;
 margin: 20px;
 padding: 0;
 z-index: 10;
 box-sizing: border-box;
 position: relative;
 text-align: center;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 flex-grow: 1;
}
 
#ps-desktop-widget__body main {
 max-width: 100%;
 box-sizing: border-box;
 padding: 0 20%;
}
 
main.fade-in.animate-height-in {
 padding: 0 18% !important;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}
 
#ps-desktop-widget__body:after {
 content: '';
 height: 100%;
 background-image: url('https://cdn.shopify.com/s/files/1/0582/4783/9894/files/paws.png?v=1628135619');
 width: 100%;
 background-repeat: no-repeat;
 background-position: center;
 background-size: cover;
 position: absolute;
 top: 0;
 left: 0;
 animation-name: spin;
 animation-duration: 40s;
 animation-iteration-count: infinite;
 animation-timing-function: linear;
 z-index: -1;
}
 
#ps-desktop-widget__pre-headline {
 font-size: 20px;
 margin-bottom: 8px;
}
 
#ps-desktop-widget__headline {
 font-size: 40px;
 text-align: center;
 line-height: 120%;
 margin-top: 0;
}
 
#ps-desktop-widget__post-headline {
 font-size: 16px;
 line-height: 140%;
}
 
#ps-desktop-widget__close svg {
 fill: #FBF8F2;
}
 
#ps-desktop-widget__email-input-wrapper {
 margin-top: 30px;
}
 
#ps-desktop-widget__phone-input-wrapper {
 margin-top: 15px;
 margin-bottom: 15px;
}
 
#ps-desktop-widget__email-input, #ps-desktop-widget__phone-input {
 border: 1px solid #000000;
 text-align: left;
 height: 50px;
 font-size: 16px;
 background-color: #FFFFFF;
}
 
#ps-desktop-widget__phone-input {
 padding: 1px 2px;
}
 
#ps-desktop-widget__submit {
 font-size: 13px;
 line-height: 15px;
 letter-spacing: 0.01em;
 height: 50px;
 width: 100%;
 padding-left: 40px;
 padding-right: 40px;
 min-width: 150px;
 display: block;
}
 
#ps-desktop-widget__close-link { 
  display: none !important; 
}
 
section {
 margin: 0 auto;
}
 
form {
 display: flex;
 flex-direction: column;
 width: 100%;
}
 
form  article {
 order: 3;
}
 
#ps-desktop-widget__disclaimer-text {
 margin: 15px auto 0;
 max-width: 285px;
 text-align: center;
}
 
#ps-desktop-widget__container {
 box-sizing: border-box;
}
 
#ps-desktop-widget__closed-body {
 border-radius: 25px;
 padding-left: 50px;
 box-sizing: border-box;
 left: 10px;
 bottom: 25px;
}
 
#ps-desktop-widget__closed-bodydiv {
 position: unset !important;
 width: 100%;
 height: 100%;
 border-radius: unset !important;
}
 
#ps-desktop-widget__close-text {
 padding: 12px 23px 12px 0;
 border-radius: 25px;
 white-space: nowrap;
}
 
#ps-desktop-widget__close-widget {
 top: 50%;
 left: 11px;
 background: none;
 transform: translateY(-50%);
}
 
#ps-desktop-widget__close-widget svg {
 fill: white;
}
 
#ps-desktop-widget__success-pre-headline {
 font-size: 16px;
 text-align: center;
}
 
#ps__widget {
 width: auto;
}
 
form {
 margin-bottom: 0;
}
 
form  *[style*="visibility: hidden"] {
 display: none;
}
 
#ps-desktop-widget__post-headline {
display: none;
}

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.

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.

Copy and paste the following code snippets into your CSS Editor and adjust the custom font and text size as desired. You can also adjust the background color of your phone and email input fields, and adjust how rounded you want the edges to appear. 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=Chewy&display=swap');
h4, p {
  font-family: 'Chewy', cursive !important;
}

#ps-desktop-widget__close {
  display: none;
}
 
#ps-desktop-widget__post-headline {
  display: none;
}
 
#ps-desktop-widget__body {
  border-radius: 40%;
}
 
#ps-desktop-widget__phone-input {
  background-color: #eee2ea;
  border-color: #eee2ea;
}

#ps-desktop-widget__email-input {
  background-color: #eee2ea;
  border-color: #eee2ea;
}

#ps-desktop-widget__headline {
  font-size: 60px;
}

#ps-desktop-widget__pre-headline {
  font-size: 20px;
}

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:

*By providing your phone number, you agree to receive recurring automated marketing text messages (e.g. cart reminders) from this shop and third parties acting on its behalf. Consent is not a condition to obtain goods or services. Msg & data rates may apply. Msg frequency varies. Reply HELP for help and STOP to cancel. You also agree to the 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.

About This Gallery

1. Side-by-Side Popup

Popup Requirements

2. Circle Popup With Spinning Border

Popup Requirement

Add a Spinning Border

3. Desktop Popup With Rounded Edges

Popup Requirements

Compliance Language Requirements

Additional Resources

Get Support