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 mobile 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 that your original mobile popup needs to be restored.
Once you have located or restored the original mobile popup, you can begin editing the back-in-stock popup with CSS.
Let's take a look at an example below of a mobile popup. The shop has two mobile popups - a gold 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 design. To change the font size of the back-in-stock popup, we'll need to open the CSS editor of the dark grey mobile popup.
Dark Grey Mobile Popup Design
Gold Mobile Popup Design
Mobile Back In Stock Popup
Customize 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".
- Head to Acquisition on the left-side navigation bar. Then select Popups.
- Select the appropriate popup - the original popup that the back in stock popup is inheriting it's design from.
- Under Popup Size, note if your mobile popup display is Full or Partial.
- In the upper-right corner of the popup editor, select Edit CSS.
- If your mobile popup display is Full, use the following CSS:
#ps__bis_container_root #ps-mobile-widget-overlay__headline { font-size: 5vw; } - If your mobile popup display is Partial, use the following CSS:
#ps__bis_container_root #ps-mobile-widget-partial__headline { font-size: 5vw; } - Adjust the value of the font size up or down as needed.
- Select Save in the upper right corner of the CSS editor once your font size has been adjusted to your liking.
- A popup will appear asking you to confirm. Select Overwrite CSS in the bottom-right corner of the popup.
- 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.