How to Connect Button to Popup in EComposer

Want a button on your page that opens a popup, like a “Get Discount” button that shows an email signup form or a “Contact Us” button that shows your inquiry form? EComposer lets you do exactly that by connecting a Button element to a Popup template.

It’s a simple way to show extra content only when visitors ask for it, so your page stays clean while still encouraging them to interact. Below, you’ll create a popup first, then link your button to it.

1. Create a popup template

Before a button can open anything, you need a popup to open. Here’s how to create one and make sure it only appears when someone clicks your button. If you’d like to learn more about designing popups, see our Popup Builder guide.

Step 1: In the EComposer app, click Start building in the top-right corner to open the page type picker.

Step 2: In the Select page type window, expand Other Templates (Cart, Quickview…), choose Popups, and then click Create.

Step 3: The builder opens with a template library. Pick a popup you like, click Insert now, and confirm with Insert. You can also start from scratch if you prefer, then customize the content to fit your offer.

Step 4: When your popup looks right, click Publish in the top bar. In the Create a new template window, enter a Section title and a Template slug on the General tab, and keep the Publish toggle on.

Step 5: Switch to the Popup settings tab, find Popup triggers, and set Popup show when to Button click/Form submit. This step matters because the default is Time delay, which makes the popup open on its own a moment after the page loads instead of waiting for your button.

Step 6: Click Save & publish. Once you see the success message, you can click Hide to dismiss it.

2. Connect the Button to your popup

Now that the popup exists, you can link it to any Button on your page. The page you’re editing will need to be published afterward so the change goes live.

Your popup must be created, saved, and published first. Otherwise, it won’t appear in the Select popup list.

Step 1: Open the page that contains your button in the builder, then click the Button on the canvas. The Editing button panel will open on the right.

Step 2: In the Content tab, find the Button group and change Button type to Open popup. The regular Button link field is then replaced with a Popup container field.

Step 3: Click the Popup container field to open the Select popup panel, then choose your popup from the list. Confirm with the button at the bottom of the panel (it reads Select the first time, and Update once a popup is already linked). The popup’s name will now show in the field, so you know the link is in place.

Step 4: Click Publish in the top bar, then Save & publish in the Save page window to push the change live.

3. Test on your storefront

To make sure everything works, click View in the success message to open your live page, then click your button. The popup should appear in the center of the screen right away, and it shouldn’t pop up before you click.