Configure popup display rules

Choose how a popup opens

Control where and when a Revup popup appears automatically, or connect it to a custom button or link.

Before you start

The matching Revup promotion block must be present on the page and configured as Popup. For Shopify, paste the promotion token from Revup into the theme block before adding a custom trigger.

The examples below use promotion ID 21. Replace it with the numeric ID at the beginning of your promotion token. For example, the promotion ID in 21-a1b2c3d is 21.

Configure automatic display rules

Open Share → Embed on site → Popup and the Popup Display Rules editor. Purchase Sweepstakes exposes its Shopify popup setup through Install.

Customize the reopen button

The reopen button uses your promotion's button colors, so it matches the popup.

Middle right and Middle left show a slim tab on the side of the screen. They leave the bottom corners free for chat and help widgets. Bottom right and Bottom left show a rounded button in that corner. If your site already has a chat widget in the lower right, avoid Bottom right.

The popup still needs to be installed on the page. These display preferences are not participant eligibility or security restrictions. Browser storage and a new browser/device can affect whether a visitor is recognized. There is no separate device selector in this editor.

Open a popup programmatically

Dispatch this event after the Revup popup code has loaded:

window.dispatchEvent(new CustomEvent('revup_open_popup', {
  detail: { promotion_id: '21' }
}));

Running this command directly in a page script opens the popup as soon as that script runs. Use a click listener when a visitor should open it from a button or link instead.

Connect a Shopify button or link

Add an ID to the Shopify link or button that should open the popup, then listen for clicks on that ID:

<a href="#" id="open-revup-popup">
  Enter without purchase
</a>

<script>
document.addEventListener('click', function (event) {
  const trigger = event.target.closest('#open-revup-popup');

  if (!trigger) return;

  event.preventDefault();

  window.dispatchEvent(new CustomEvent('revup_open_popup', {
    detail: { promotion_id: '21' }
  }));
});
</script>

You can change open-revup-popup to another unique ID as long as the value in the HTML and the selector in closest() remain identical.

Test the popup

Test matching and nonmatching pages, new and returning sessions, mobile screens, keyboard close behavior, and the promotion lifecycle. Confirm the popup stops appearing after completion or at the intended frequency. Close the popup once to check the reopen button's text, icon, and position.

Avoid conflicting with cookie notices, checkout, accessibility tools, or another modal.