Create a popup

In short. Go to Popups → Add New, give the popup a title (admin-only), write its body in the Text Editor or SG-Builder, tick the config checkboxes that control when it appears, set the status to Published or Draft, and click Create a Popup. The form assigns a hashcode (#sgp_<id>) you can paste into any button's link to fire the popup on click instead of on page load. That's it.

On this page: What it's for · Use cases + examples · Before you start · Steps · What success looks like · Troubleshooting

How to create a popup

What is this for?

The Add New form is the single authoring surface for creating a popup. Give it a title (admin-only label), write the body in either the WYSIWYG Text Editor or the visual SG-Builder, and tick the configuration checkboxes that control display behavior.

• Published — the popup goes live on your site immediately.
• Draft — stored but invisible on public pages; useful while iterating on copy or waiting for a Form to be ready.

The Popups list gives you a live count across each status. A site with two active promos and one draft in progress reads like this:

Scope

The Add New form covers the full creation lifecycle for a single popup: title, body content, display options, and status. Out of scope: editing an existing popup (use the Edit row action from the list); deleting or recovering trashed popups (use the Trash tab); site-wide analytics (SG-Dashboard → Popups); building a form to embed (Forms area first, then reference by shortcode).

Supported popup types:

Good use cases

Example 1: Newsletter signup with a coupon hook. Open Add New, title it Newsletter Signup — 10% Off First Order, write a short heading plus [form id="4"] in the body, tick Autoload, set Popup Width to 480px, and save as Published. The Add New form filled in for this scenario:

When a visitor lands on any page at yourdomain.com for the first time, the overlay fires automatically over the page content. The close button (the X) is visible by default, so the visitor can dismiss without signing up. The form shortcode renders the embedded form right inside the popup body — the visitor submits their email without leaving the page:

Example 2: Age gate on a restricted product launch. Title it Age Verification — Reserve Collection. Body: short age-confirmation prompt with two buttons ("Yes, I'm 18+" / "No"). Tick Autoload, Disable Close Button, and Prevent Closing on Overlay Click — all three together mean the visitor must click one of the buttons; there is no other way to dismiss. Set Popup Width to 500 px. Save as Published. Every page shows the gate until the visitor responds.

Example 3: Spring sale banner triggered by a button (not auto-load). Title it Spring Roast Sale — 20% Off, write the body with the offer details, leave Autoload UNCHECKED, and save as Published. After saving, copy the popup's hashcode from its edit page — for example #sgp_3. Go to the Pages editor for the homepage, edit the button, and set its link target to #sgp_3. Save the page. Visitors who click the button see the popup; visitors who don't, never do.

The exact button markup that wires the trigger:

<a  href="#sgp_3"  class="btn btn-primary"> Get Spring Deal &rarr;a>

After creating all three popups, the Popups list at Popups → All Popups confirms the roster. The Publish count reads 3 — the newsletter signup, the age gate, and the spring sale trigger. The Draft count reads 1 for the holiday seasonal popup being prepared for later:

What NOT to use this for

• Don't author site-wide JavaScript snippets here.

Popups are for overlay content — the overlay body, its heading, its CTA. If you want to install Google Analytics, a cookie-consent banner, or a chat widget, use Custom Codes instead. Scripts placed in a popup body only run when the popup opens, not on page load.

• Don't try to limit a popup to a specific page from this form.

Popups have no per-page targeting in SGEN. The choice is binary: Auto-load (every public page on your site shows the popup) or button-triggered (only the page where you placed the #sgp_<id> button can fire it). If you need popup-on-this-page-only behavior, use the button-trigger method and place the button on one page only.

• Don't paste raw <script> or <iframe> tags into the popup body expecting them to behave like standalone pages.

The popup body renders inside an overlay container. Scripts may load slowly or behave differently inside a popup than they do on a normal page. Where possible, use shortcodes — [form id="N"], [product id="N"], Err: Template not found! — instead of raw embed code.

• Don't create multiple Autoload popups without enabling Avoid Multiple Popup.

If three popups all have Autoload on, all three fire on the same page view. That is almost never what you want. Tick Avoid Multiple Popup to limit the visitor to one auto-load popup per page view.

• Don't put heavy content — large images, multiple SG-Builder sections, embedded video — in a popup.

Published Autoload popups are loaded alongside every public page. Heavy popup bodies slow every page on your site, not just the popup itself. Keep popup bodies focused: one heading, one short paragraph, one CTA.

How this connects to other features

• Forms — popup body can embed a Form ([form id="N"]) for newsletter signup, contact captures, or surveys.

Build the form first in the Forms area so you have its ID ready, then reference it in the popup body. Submissions land in the form's normal Submissions tab — not in the popup area. See Browse your popups list for how to manage popups after creation.

• Pages / Posts — the standard button-trigger workflow is: author the popup → copy the hashcode from its edit page → open the page or post in the Pages editor → edit the button's link target to #sgp_<id> → save.

The popup fires for any visitor who clicks that button anywhere on your site.

• Products (Ecommerce) — popup body can embed a Product quick-card ([product id="N"]) to show a purchase option without navigating away.

Useful for a "limited stock" popup on a campaign page.

• SG-Builder — switching the Editor select to SG-Builder turns the popup body into a visual canvas.

You compose it like any SGB page, then publish from inside the SGB canvas. Use SG-Builder when the popup needs multi-column layout, custom imagery, or styled sections that the WYSIWYG Text Editor cannot produce.

Before you start

• You are signed in to SGEN as an Administrator.
• If the popup will embed a Form using [form id="N"], that Form already exists in the Forms area and you have its ID number.
• If the popup will use the button-trigger method instead of Autoload, you know which page the button is on and you have edit access to that page.
• You have a draft of the popup's title, heading, and body text ready.

You can refine in Draft status before publishing, but having a starting point avoids placeholder text shipping accidentally.

Where to go

1. Open the left navigation.
2. Click Popups → All Popups to land on the popups list.
3. Click the + Add New button at the top right of the list.

Alternatively, navigate directly to /sg-admin/popups/add_new in your browser address bar.

Steps

1. Title your popup

The Title field at the top of the form is an admin-only label. It is how you find this popup later in the Popups list. It also renders as the heading inside the popup body (wrapped in the tag set by Popup Title Tag) unless you tick Disable Popup Title.

The default value is "My Popup". Replace it with something that describes what the popup does and for what context — "Newsletter Signup — 10% Off First Order" or "Reserve Collection Age Gate". Descriptive titles are essential once your site has more than two or three popups, because the list view shows title only.

The title must be at least 2 characters; the form blocks save if the field is empty or a single character.

2. Choose the editor

The Editor select below the Title offers two modes.

Text Editor is the default. It gives you a WYSIWYG box for writing HTML body content. Text Editor is the right choice for popups that consist of a heading, a short paragraph, a shortcode, and a button — the vast majority of popup use cases. In Text Editor mode, the Content area below the Editor select is the WYSIWYG box you type or paste into.

SG-Builder swaps the Content area for an "Edit with SG-Builder" submit button. Clicking Create a Popup with SG-Builder selected saves a stub record and redirects you into the SG-Builder canvas so you can compose the popup body visually. Use SG-Builder when the popup needs multi-column layouts, custom hero sections, styled CTA blocks, or imagery that would be laborious to write as raw HTML in the WYSIWYG. After composing in SG-Builder, publish from within the SGB canvas — saving there is what makes the body live.

3. Write the body

In Text Editor mode, the Content area is the full popup body. Write or paste whatever the visitor should see when the overlay opens.

You can embed SGEN shortcodes directly in the body:

• [form id="4"] — renders the Form with ID 4 inside the popup.

Submissions go to that form's Submissions tab.

• [product id="12"] — renders a Product quick-card.
• Err: Template not found! — renders a saved Template.

You can also write raw HTML: headings, paragraphs, links, images, and inline styles all work. Keep the body focused — one clear call-to-action is stronger than a popup that tries to do three things.

A newsletter signup popup body that works well for your business:

<h2>Get 10% off your first order</h2><p>Subscribe to the your business Roast Notes newsletter. We'll send the coupon straight to your inbox.</p>[form id="4"]

The shortcode [form id="4"] expands on the public side into the full form — email field, submit button, and any other fields you configured in the Forms area. Visitors submit without leaving the page or closing the popup.

4. Configure how the popup behaves

The right-side configuration panel has six checkboxes and one dependent field. Review each one before saving — most popups only need one or two of these.

• Avoid Multiple Popup — when this is on and multiple popups have Autoload ticked, only one popup shows per page view (the one with the lowest ID).

Turn this on any time you have more than one Autoload popup.

• Disable Close Button — removes the X button from the overlay.

Visitors cannot dismiss the popup by clicking X. They must take an action in the body (submit the form, click a button, navigate away). Use sparingly — this is the right choice for age gates and mandatory legal confirmations; it is the wrong choice for promotional or marketing overlays.

• Prevent Closing on Overlay Click — normally clicking the dim area outside the popup closes it.

This checkbox disables that behavior. Pair with Disable Close Button when you need full lock-in: the visitor must interact with the popup body to proceed.

• Disable Popup Title — suppresses the title's rendering inside the popup body.

Turn this on when your body HTML already contains its own heading (as in the your business example above, where the <h2> is in the body HTML itself). Leaving it off would show the admin Title as a second heading above the body.

• Disable AJAX Content — changes how the popup body is loaded.

Default behavior (AJAX off) fetches the popup body on demand when the visitor first triggers it. Turning this on loads the popup body inline with the page HTML. Inline loading removes the flash-of-empty-popup on trigger, but adds the popup body's weight to the initial page load. Most popups work fine with the default.

• Autoload — shows the popup automatically on the visitor's first page view.

When Autoload is off, the popup only appears when a visitor clicks a link or button on the site with href="#sgp_<id>". When Autoload is on, a Frequency number field appears — set this to control how often the popup re-fires for repeat visitors. Frequency 1 means re-show on every visit; Frequency 3 means re-show every third visit; Frequency 0 means show once and never again.

5. Set the title tag and width

Two fields below the checkboxes control how the popup renders visually.

Popup Title Tag — the HTML heading element SGEN uses to wrap the popup title in the overlay body. Options: H1 / H2 / H3 / H4 (default) / H5 / H6 / P. Choose based on what heading level makes sense in the popup body's content hierarchy. If your body already has an <h2>, set the title tag to H3 or tick Disable Popup Title.

Popup Width — a number in pixels, minimum 350. Controls the maximum width of the popup overlay on the visitor's screen. Good starting points: 400–480px for compact newsletter signups; 520–600px for popups with a form with several fields; 700px+ for SG-Builder popups with imagery. The popup is always constrained by the viewport — a 700px popup still renders narrower on a 375px mobile screen.

Extra Class — an optional CSS class added to the popup wrapper element. Use this to target the popup with custom CSS rules you've written in Custom CSS. Leave it blank unless you have specific styling needs.

6. Pick a status and save

The Status select in the right sidebar offers Publish and Draft.

• Publish — the popup goes live immediately when you click Create a Popup.

If Autoload is on, it fires on the next visitor's page view. If Autoload is off, it fires the moment a visitor clicks a #sgp_<id> link anywhere on the site.

• Draft — the popup is saved to your list but renders nowhere on the public site.

The hashcode is assigned but inactive. Flip to Publish from the edit page when you're ready.

Click Create a Popup to submit.

What success looks like

After clicking Create a Popup:

• The form saves and the page reloads to the popup's edit page.

The breadcrumb changes from "Dashboard / Popups / New" to "Dashboard / Popups / Edit".

• The popup now has a numeric ID and a hashcode visible on the edit page — for example #sgp_3.

Copy this hashcode now if you plan to wire a button trigger.

• A green confirmation flash appears near the top of the edit page with a timestamp confirming the save committed:

• The popup appears in the Popups list at the status you chose.

The All tab count increments by one; the Publish or Draft tab increments correspondingly.

• If you saved as Published with Autoload on, open any public page on your site in a private / incognito window (not your logged-in admin browser, where admins are sometimes excluded from popup display).

The popup should appear after the page finishes loading.

• If you saved as Published with Autoload off, the popup is live but invisible until a button somewhere on the site has href="#sgp_<your-id>" set.

What to do if it does not work

• The form says "Title is required" or "Title must be at least 2 characters."

The Title field is empty or has a single character. Add a title of at least 2 characters and click Create a Popup again.

• I saved as Published with Autoload but the popup isn't showing.

Open your site in a private / incognito window — logged-in admins are sometimes excluded from popup display so that you can work on the site without being interrupted by your own popups. Hard-refresh once (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac). Wait for the full page to load; the popup fires after the page settles, not during the loading spinner. If it still does not appear, go back to the Popups list and confirm the row's status column reads Published, not Draft.

• The popup shows on every page but I only want it on one page.

Edit the popup and untick Autoload. Save. Then go to the page where you do want the popup, edit the button or link you want to use as the trigger, and set its link target to #sgp_<this-popup-id>. Save the page. The popup will only fire when that specific button or link is clicked.

• My popup body has a Form shortcode but the form isn't showing inside the popup.

Check two things: (1) the form ID in the shortcode matches a form that exists in the Forms area — open Forms → All Forms and confirm the ID; (2) the form's status is Published, not Draft. Draft forms render nothing even when the shortcode is in place. Also confirm the shortcode syntax is exactly [form id="N"] with double quotes around the ID number.

• The popup looks too narrow or too wide.

Edit the popup and adjust the Popup Width number field. Minimum is 350px; there is no hard maximum, but values above the viewport width on mobile are ignored — the popup will fill the available width. Save and test in an incognito window.

• The popup is firing but the X close button is not showing.

You ticked Disable Close Button when creating the popup. Edit the popup, untick that checkbox, and save. The X reappears on the next page load.

• I have several popups with Autoload and they are all firing at once.

Tick Avoid Multiple Popup on each popup that should participate in the one-at-a-time rule. Only one popup (the one with the lowest ID) will show per page view once all participating popups have this checkbox on.

Vocabulary

Examples

Three patterns covered in detail above under Good use cases:

Next step

Once you've created a popup, the most common follow-on tasks are:

• Wire a button trigger — if you left Autoload off, go to the page in the Pages area, open Edit, find the button, and paste the popup's hashcode (e.g. #sgp_3) into the button's link target.

Save the page. From that point, any visitor clicking the button sees the popup.

• Check the Form submissions — if the popup body embeds a Form, check the Forms → Submissions area after the popup has been live for a day or two.

Submissions from the popup appear there, indistinguishable from submissions from the form embedded on any other page.

• Manage your full list — return to Browse your popups list to edit, trash, restore, or audit every popup on the site.