Customize Your Desktop Back in Stock Popup with CSS

   Tip: Select any images or gifs in this article for a closer look.

This guide walks through how to edit your brand's back-in-stock popup with CSS.

Understanding Where Your BIS Popup is Inheriting its Design


Your back-in-stock (BIS) popup inherits the original design of your mobile or desktop popup-- or the design of the popup that was automatically added to your Postscript account upon installation.

If your shop has multiple desktop popups, be sure to locate the original popup that the BIS popup design is inheriting. If your original popup was deleted, please contact our support team via chat or by emailing support@postscript.io and indicate your original desktop popup needs to be restored.

Once you have located or restored the original desktop popup, you can begin editing the back-in-stock desktop popup with CSS. 

Let's take a look at an example below to identify which popup the back-in-stock popup is inheriting its design from. The shop has two desktop popups - a pink popup and a white popup. Notice the back-in-stock popup's design is pink. This indicates that the pink desktop popup is this shop's original popup and that the back-in-stock popup is inheriting the design of the pink popup. To edit the back-in-stock popup, we'll need to open the CSS editor of the pink desktop popup.

Pink Desktop Popup Design

Screen_Shot_2023-01-26_at_3.13.23_PM.png

White Desktop Popup Design

Screen_Shot_2023-01-26_at_3.13.09_PM.png

Desktop Back In Stock Popup

Screen_Shot_2023-01-26_at_3.15.32_PM.png

Customize Font Size


Once you've located or restored your shop's original popup, follow the instructions below to add CSS to your desktop popup editor.

CSS_BIS_Desktop.gif

  1. Head to Acquisition on the left-side navigation bar. Then select Popups.
  2. Select the appropriate popup - the original popup that the back-in-stock popup is inheriting its design.
  3. In the upper-right corner of the popup editor, select Edit CSS.
  4. Use the following CSS to adjust font size:
    #ps__bis_container_root #ps-desktop-widget-overlay__headline {
    font-size: 5vw;
    }
  5. Select Save in the upper right corner of the CSS editor once your popup has been adjusted to your liking.
  6. A popup will appear asking you to confirm. Select Overwrite CSS in the bottom-right corner of the popup.
  7. Tip! We recommend viewing your back-in-stock popup live to confirm recent changes.

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