If your store uses a side cart, drawer menu, or mobile navigation overlay, you may want to temporarily hide your popups while those elements are visible.
This helps prevent overlapping UI elements and creates a cleaner shopping experience for customers.
In this guide, you'll learn how to:
Identify the correct menu or cart selector using browser DevTools
Create a targeting rule using the element ID and open-state class
Apply the targeting rule to your popup campaign
Important:
If you are looking to hide popups on specific pages instead, please visit:
How to Hide Popups on Certain Pages
Step 1: Inspect Your Menu or Side Cart
Start by opening your storefront in a browser and enabling DevTools.
The process for opening DevTools varies slightly depending on your browser, but in most cases you can right-click the page and select Inspect.
Once DevTools is open:
Open the side cart or mobile menu you want to target
Inspect the menu element in DevTools
Watch for changes to the element as it opens and closes
You are looking for two things:
A unique ID
A class or attribute that indicates the element is currently open
For example, you may see something like:
<div id="site-mobile-nav" class="visible">
In this example:
The unique ID is:
#site-mobile-nav
The open-state class is:
visible
Every theme is different, so your selector and class names may vary.
The important part is identifying:
The unique element ID
How your theme indicates the menu or cart is open
Step 2: Create A Targeting Rule
Once you’ve identified the selector and open-state class, you can create a targeting rule in Alia.
1. Navigate to Targeting Rules
Inside the Alia app:
Open the Campaigns tab
Select Targeting Rules
2. Create a New Rule
Click Create Rule
3. Add a Custom Code Condition
Select:
Add Condition → Custom Code
4. Add the Following Snippet
Paste the following code into the custom code section:
return !document.querySelector('#site-mobile-nav')?.classList.contains('visible');Then replace:
#site-mobile-nav
with the ID you found in Step 1 (including the #)
And replace:
visible
with the class variable your theme adds when the menu or side cart is open.
How This Works
This rule checks whether the menu is currently open.
If the menu is open, the rule returns
false, preventing the popup from displayingIf the menu is closed, the rule returns
true, allowing the popup to appear normally
Step 3: Apply the Rule to Your Popup Campaign
Next, apply the targeting rule to the popup campaign you want to control.
Open the campaign
Click Edit Targeting
Select: Add Condition → In Targeting Rule or Campaign
Choose the targeting rule you created:
Click Save
Your popup will now stay hidden whenever the side cart or mobile menu is open.
What’s Next?
Now that your visibility rule is configured, consider:
🚀 Testing your campaign across desktop and mobile
🛒 Creating separate rules for carts, navigation drawers, and search overlays
📊 Refining visibility behavior for different storefront experiences
Tips
Always test your setup on both desktop and mobile devices
Some themes use different selectors for mobile vs desktop menus
If your popup still appears, double-check that the selector and class names match exactly
Use DevTools to monitor class or attribute changes while opening and closing the menu
Final Notes
Using visibility targeting is one of the best ways to improve popup behavior and avoid conflicts with important navigation elements.
If you’re unsure which selector to use, inspect the element while toggling the menu open and closed to see exactly which classes or attributes change in real time.