Skip to main content

Hide Elements

Hide any element on your site instantly — without editing your code, rebuilding, or waiting for a deploy. Use it to clean up legacy UI, hide things you're phasing out, or fix something that shouldn't be visible right now.

When to use this​

Fix something fast A broken widget, an outdated promotional element, a legacy section you forgot to remove — hide it in 30 seconds without a developer.

Phase out legacy UI You're rebuilding your navigation but the old version still exists in the code. Hide the old one for everyone while the new one goes through review.

A/B test support Use hidden elements as the starting state for trigger-based experiments. Hide an element by default, then reveal it with a Smart Trigger for certain visitors or after certain behaviors.

Clean up third-party widgets Hide a chat widget on landing pages where it creates distraction. Hide a cookie banner on pages where it's redundant. Hide a promotional bar on the checkout page to reduce distraction at the most critical moment.

How to set it up​

  1. Go to Rules → Hide Elements
  2. Click New rule
  3. Click Pick to select the element directly from your site, or enter a CSS selector manually
  4. Set which pages to hide it on
  5. Toggle on

The element disappears immediately for all visitors on those pages.

Finding the element​

Recommended: use the element picker

  1. Click New rule then click Pick
  2. Enter your site's URL and click Open — your site loads with a visual overlay
  3. Hover over any element — a live tooltip shows its tag name, id, classes, and resolved selector
  4. Click the element you want to hide
  5. A confirmation toast appears, then the selector fills in the editor automatically

The picker UI runs in Shadow DOM so it never shifts your page layout or inherits your site's CSS. It captures a rich element fingerprint — not just a class name — so rules stay accurate after CSS changes, framework upgrades, or layout refactors that would break a hand-written selector.

The picker also detects selectors that match zero elements and reports them automatically, so the dashboard can warn you if a rule stops working after your site changes.

Manual selector (advanced)

Open DevTools (right-click → Inspect) and look for class or id attributes:

  • .promo-banner → hides any element with class "promo-banner"
  • #old-chat-button → hides the element with id "old-chat-button"
  • .navbar-legacy-cta → hides a specific nav item

Use cases by industry​

E-commerce: Hide a "Free shipping on orders over $75" header banner on the cart page (where it's irrelevant once someone is already checking out). Hide a product recommendation section on the checkout flow to reduce distraction.

SaaS: Hide an old pricing plan that's no longer offered but still exists in your CMS. Hide a deprecated feature badge while you transition.

Blogs: Hide a cookie consent popup on your thank-you or confirmation pages where it creates friction. Hide a sidebar widget on long-form posts to improve reading focus.

Agencies: Hide client-specific sections on demo versions of a site. Hide legacy project cards while a portfolio update is in progress.