Hide Fomo based on CSS selectors

Page Rules help you customize when and how Fomo notifications are displayed.

A common Page Rule is to hide Fomo when your visitor is on a /cart page. The rationale is you don't want to distract a visitor who is ready to purchase (ie. on a /cart page).

What about when your cart page is not its own URL path (like mystore.com/cart), but you have a cart drawer that opens for 1-click purchase, like this?:

No worries! You can still add a Page Rule that hides Fomo whenever this cart is open. Use a Rule like this:

Of course, the value you see above of ".PageOverlay.is-visible" depends on the HTML of the cart drawer on your own site. If you don't know what this is, follow the steps in How to Set Up an Instant Action, or we can help you identify what this value would be on your site - just ping us at hello@fomo.com!

This Page Rule checks every couple seconds to ensure that the CSS Selector (in this example, a cart drawer) is not visible. When it is visible, Fomo will be hidden. When it is not visible, Fomo is displayed.