How to Open a Popup on Click

In the Display Rules tab, find the section Triggers (or similar wording) and select the option for Show on Click. Then enter the CSS selector you want to target, for example: .js-mypopup-open. You’ll find more example selectors below.

Now, any element with the class js-mypopup-open will open the popup when clicked.

Examples:

<button class="js-mypopup-open">Submit Request</button>
<a href="#" class="js-mypopup-open">Link Example</a>
<img src="image.jpg" class="js-mypopup-open" alt="Open Popup">

How to Open a Popup from the Menu

Go to Appearance > Menus and add a new Custom Link with # as the URL.

Next, add a custom CSS class to that menu item. If you don’t see the CSS Classes field, click on Screen Options at the top of the page:

And enable CSS Classes:

Now you can add the class js-mypopup-open (without the dot) to your menu item:

That’s it! When a visitor clicks this menu item, it will trigger the popup you set up.

How to Add a Popup Button in a Widget

The principle is the same—add an element with the trigger class. Go to Appearance > Widgets, create a new Custom HTML widget, and add your button code:

<button class="btn js-mypopup-order-form">Submit Request</button>

In this example, btn is for styling (most themes include button styles for this class), and js-mypopup-order-form is the trigger for opening the popup.

Selector Examples

In the Show on Click field you can use any jQuery-style selector. Here are some examples:

• .js-mypopup-order-form — the dot indicates a class selector.
  Example:

  <button class="btn js-mypopup-order-form">Submit Request</button>

• #order_form — the hash indicates an ID selector.
  Example:

  <button id="order_form">Submit Request</button>

• .site-header button — targets any button inside .site-header.
  This is useful when you can’t add a specific class or ID to the clickable element:

  <div class="site-header"><button>Submit Request</button></div>