Edit Back in Stock's Mobile Popup Font Size with CSS

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

This guide walks through how to adjust the font size of the back in stock (BIS) mobile popup that reads, "Receive a Notification When This Item is Restocked" via CSS.

Understanding Where Your BIS Popup is Inheriting its Design


Currently, the back in stock (BIS) mobile popup inherits your shop's original mobile popup design, or the design of the popup that was automatically added to your Postscript account upon installing. If your shop has multiple mobile popups, be sure to locate the original popup that the BIS popup design is inheriting. If you have deleted your original popup, please contact our support team via chat or by emailing support@postscript.io. Once you have located or restored the original popup, you can begin editing the back in stock popup's font size with CSS. 

Let's take a look at an example below. The shop has two mobile popups - a gold colored popup and a dark grey popup. Notice the back in stock popup's design is also dark grey. This indicates that the dark grey mobile popup is this shop's original popup and that the back in stock popup is inheriting its grey-colored design. To change the font size of the BIS popup, we'll need to open the CSS editor of the dark grey popup.

Dark Grey Mobile Popup Design

nelo_charcoal.png

Gold Mobile Popup Design

nelo_yellow.png

Back In Stock Popup

nelo_BIS.png

Editing The Font Size


Once you've located or restored your shop's original popup, follow the instructions below to change the font size of your mobile Back in Stock popup that reads "Receive a Notification When This Item is Restocked".

bis css.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 it's design from.
  3. Under Popup Size, note if your mobile popup display is Full or Partial.
  4. In the upper-right corner of the popup editor, select Edit CSS.
  5. If your mobile popup display is Full, use the following CSS:

    #ps__bis_container_root #ps-mobile-widget-overlay__headline {

    font-size: 5vw;

    }

  6. If your mobile popup display is Partial, use the following CSS:

    #ps__bis_container_root #ps-mobile-widget-partial__headline {

    font-size: 5vw;

    }

  7. Adjust the value of the font size up or down as needed.
  8. Select Overwrite in the upper right corner of the CSS editor once your font size has been adjusted to your liking.
  9. A popup will appear asking you to confirm. Select Overwrite CSS in the bottom-right corner of the popup.
  10. Tip! We recommend viewing the live back in stock popup on your mobile device to confirm the font size has been adjusted accordingly.

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