> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 🚀 How to Set Up a Popup Form

Want to collect emails, phone numbers, or any custom details right when shoppers are most engaged? 📝

That’s exactly what the **Popup Form** in Hoppy Popups is built for. It lets you create a fully customizable signup form that appears anywhere on your storefront — and turns casual visitors into subscribers you can market to later ✨

With a Popup Form, you can collect:

* 📧 Email addresses for your newsletter  
* 📱 Phone numbers for SMS updates  
* 🎂 Custom details like birthdays, preferences, or sizes  
* 🎁 Reward new signups with an automatic discount code

This guide walks you through setting up your first Popup Form step-by-step, using only the settings you actually need to get it live.

---

# **⚠️ Before You Begin**

Before setting up your Popup Form, make sure:

* The **Hoppy Popups** app is installed on your Shopify store  
* The **App Embed** is enabled in your theme (one-time setup — covered below)  
* You know what information you want to collect from shoppers

Optional, but helpful to decide ahead of time:

* 🎁 A discount code you'd like to reward new subscribers with  
* 🔗 Where subscribers should be stored (inside the app, or synced to an email tool like Klaviyo)

ℹ️ This guide focuses on the **Popup Form** type, which supports custom form fields. The **Email Capture PopUp** works almost the same way — it just skips the custom fields — so you can follow these steps for that too.

---

# **✅ Initial Step — Enable the App Embed**

For any popup to appear on your storefront, the app embed must be enabled inside your Shopify theme.

Go to:

**Shopify Admin → Online Store → Themes → Customize → App Embeds**

Then:

* Find **Hoppy Popups**  
* Toggle it **ON**  
* Click **Save**

💡 You only need to do this once. If it's not enabled, Hoppy Popups will also remind you with a banner right before you publish — so you won't miss it.

---

# **🛠️ Step 1 — Create a New Popup Form**

Open the **Hoppy Popups** app from your Shopify Admin.

Then:

→ Click **Create new popup**

This opens the **Choose Pop-up Type** screen.

→ Find the **Popup Form** card → Click **Create Popup Form**

The setup page opens automatically with:

* A **Content** tab — what the form says and collects  
* A **Design** tab — how the popup looks  
* A **Placement** tab — when and where it appears  
* A **live preview** on the right, so you can see changes as you go 👀

---

# **📝 Step 2 — Add Your Form Content**

You'll start inside the **Content** tab. This controls the text shoppers see and the information your form collects.

---

## **🏷️ Popup Form Name**

This name is for your internal reference only.

Shoppers will never see it.

Use something recognizable, such as:

* Homepage Newsletter Signup  
* Birthday Club Form  
* Welcome Discount Popup

💡 Clear naming makes it much easier to manage multiple popups later.

---

## **💬 Title & Description**

This is the main message shoppers see at the top of the popup.

### **Example**

* **Title:** "Join our Birthday Club 🎂"  
* **Description:** "Sign up and get a special treat on your birthday."

Keep it short, friendly, and focused on the benefit of signing up.

You can also add a **Logo** above the title if you'd like the popup to feel more on-brand.

---

## **📧 Email Field**

This is the core of most signup forms.

When **Show Email Field** is turned on, two extra fields appear:

* **Email field placeholder** → the hint text inside the box, e.g. "Enter your email"  
* **Error message** → shown if a shopper enters an invalid email

---

## **📱 Phone / SMS Field**

Turn on **Show Phone Number (SMS) Field** if you also want to collect phone numbers.

When enabled, a few more options appear:

* **Default country code** → pre-selects the country for the phone number  
* **Phone field placeholder**  
* **Phone error message**

This is useful if you plan to send SMS offers or order updates later 📲

---

## **🧩 Custom Form Fields**

This is what makes the **Popup Form** special — you can ask for almost anything, not just an email.

→ Click **Add Field** to create a new question

For each field, choose a **Field Type**:

* Text field  
* Multiple lines  
* Radio buttons  
* Checkboxes  
* Dropdown  
* Multi-select  
* Number  
* Link  
* File upload  
* Date  
* Time  
* Rating

Then give it a **Label** — this is the question shoppers see, like "Your Birthday" or "How did you hear about us?".

Depending on the field type, a few extra options appear automatically:

* 📝 **Placeholder** → appears for text-based fields (text, multiple lines, number, link, time)  
* ✅ **Options** → appears for choice fields (radio, checkboxes, dropdown, multi-select), where you add the answers shoppers can pick from  
* ❗ **Required** → turn this on if shoppers must answer before submitting

⚠️ Your form must include **at least one** of these: an Email field, a Phone field, or a Custom field. Otherwise there's nothing for shoppers to fill in.

💡 A brand-new Popup Form already starts with an Email field, a Phone field, and a sample **Birthday** date field — so you can launch quickly and adjust from there.

---

## **🔘 Submit Button Text**

This is the button shoppers click to send the form.

Set the **Button Text** to something action-focused, such as:

* "Sign Me Up"  
* "Get My Discount"  
* "Join the Club"

When your form has fields, this button automatically **submits** the form — no extra setup needed.

---

## **✔️ Opt-In Checkbox (Optional)**

You can add an **Opt-In Checkbox** so shoppers actively agree to receive marketing from you.

When turned on, an **Opt-In text** editor appears where you can write your consent message, such as:

"Yes, send me exclusive offers and updates."

This helps you collect clear marketing consent and stay compliant 🙌

---

# **🎉 Step 3 — Set What Happens After Signup**

After a shopper submits the form, the popup switches to a **success state**. This is your chance to thank them — and reward them.

You'll find these settings at the bottom of the **Content** tab.

---

## **💌 Success Message & Description**

Write the thank-you message shoppers see right after submitting.

### **Example**

* **Success Message:** "You're in\! 🎉"  
* **Success Description:** "Here's your reward for joining us."

---

## **🎁 Reward With a Discount (Optional)**

A small reward can dramatically increase signups.

ℹ️ This field is available once **Show Coupon Code** is toggled to **YES**.

To display a coupon code, you can either:

1. Select one of the Coupon Codes which you have created in Shopify Admin → Discounts by clicking on Select/Change Discount.  
2. You can create a new one by clicking on **Create New Discount**.

### **Example**

* SAVE10  
* WELCOME20  
* COUPON123

### **💸 Discount Application**

This option controls how the discount is applied. It has two options:

1. **Customer will have to Apply Discount Manually** — the customer will have to enter the coupon code during checkout to receive the discount.  
2. **Apply Discount Automatically** — the discount will be applied automatically during checkout without the customer having to enter the coupon code.

⚠️ **Important:**

* Our app does not create or manage coupon codes/discounts. You must create them in Shopify Admin → Discounts before using them in the popup.

---

## **➡️ Success Button (Optional)**

You can also show a button on the success screen.

Turn on **Show Success CTA button**, and two fields appear:

* **Success Button Text** → e.g. "Start Shopping"  
* **Success Button Link** → where the button should take shoppers

This is a nice way to send new subscribers straight to a collection or sale page 🛍️

ℹ️ Every signup is saved automatically inside **Hoppy Popups → Subscribers**. If you'd like subscribers sent to an email tool like Klaviyo or Mailchimp, you can connect it in the **Integrations** tab — see the dedicated Integrations guide for setup.

---

# **📍 Step 4 — Choose When & Where It Appears**

Now open the **Placement** tab. This controls the popup's timing, frequency, and location.

---

## **⏱️ When Should It Appear? (Trigger)**

Choose a **Trigger Type**, then use **Show Pop Up After** to fine-tune the timing:

* **After Time (Duration)** → immediately, or after a few seconds on the page  
* **Page Scroll** → after a shopper scrolls partway down  
* **Exit-intent** → when a shopper is about to leave  
* **Add to cart button is clicked** → when an item is added, or when the cart passes a value  
* **After page views** → after a shopper views a certain number of pages

Some triggers reveal extra options — for example, **Exit-intent** lets you pick what "leaving" means, and **Add to cart** lets you react to a minimum cart value.

💡 A short delay (a few seconds) is a friendly default — it gives shoppers a moment to look around before the form appears.

---

## **🔁 How Often Should It Show?**

Under **Display Settings**, choose how frequently the popup comes back:

* **Show every time** → appears on every visit  
* **Once every time anyone visits** → once per visit, and stops after the form is submitted  
* **Limit frequency** → after being closed, wait a set number of days before showing again

ℹ️ Once a shopper submits the form, the popup stops showing to them automatically — so you never ask twice.

---

## **📄 Where Should It Appear?**

Use **Display On** to choose the pages where the form shows up:

* Every page  
* Home page only  
* All product pages  
* Specific product pages  
* Collections, or specific collections  
* Products with specific tags

When you pick a specific option (like a product or collection), a selector appears so you can choose exactly which one.

---

## **📐 Position**

Choose where the popup sits on the screen:

* **Center** for a classic, attention-grabbing popup  
* A **corner** (like Bottom Right) for a softer, slide-in feel

ℹ️ Device visibility (Desktop, Mobile, or both) is set in the **Design** tab. More advanced rules — like targeting by customer login status, tags, lifetime spend, country, or UTM source — are available too. Those are covered in the dedicated **Targeting** guide so this setup stays simple.

📅 Running a limited-time campaign? You can add a **Start** and **End** date under **Scheduling**. By default the form runs continuously (starts right now, never ends). See the **Scheduling** guide for dated campaigns.

---

# **🎨 Step 5 — Style the Popup (Optional)**

Open the **Design** tab to make the popup match your brand.

Here you can quickly adjust things like:

* The **Template** to start from a ready-made look  
* The **Popup Size** and **position styling**  
* **Colors**, **fonts**, and **spacing**  
* The **button** and **input field** styling  
* A **background overlay** and entrance **animation**

You don't need to touch any of this to go live — the defaults look great out of the box ✨

For a full walkthrough of every styling option, see the **Design & Styling** guide. For advanced tweaks, the **Custom CSS** guide lets you fine-tune details with your own code.

---

# **✅ Step 6 — Save & Publish**

Once everything looks good in the preview:

1. **Save** your popup form  
2. Click **Publish** to make it live on your storefront

⚠️ Saving alone does **not** publish the form. Always click **Publish** when you're ready for shoppers to see it.

After publishing, the popup's status badge updates so you can tell at a glance whether it's **Published**, **Not published**, **Scheduled**, or **Expired**.

💡 If the app embed isn't enabled yet, Hoppy Popups will show a reminder with an **Enable App Embed** button right after you publish — just follow it and you're set.

---

# **💡 Helpful Tips**

* Test your form by opening your store in an **Incognito / Private** window and submitting a test email — then check **Subscribers** to confirm it arrived  
* Keep forms short — asking for just an email usually gets the most signups 📈  
* Make sure at least one field (Email, Phone, or Custom) is turned on, or the form can't be submitted  
* Want the form in another language? You can add translations in the **Translations** section — see the dedicated Translation guide

---

# **🎉 Final Result**

Once configured and published:

✅ Shoppers see a beautiful, on-brand signup form

✅ Emails, phone numbers, and custom details are collected automatically

✅ New subscribers can instantly receive a discount reward

✅ The form appears at the right time, on the right pages

✅ Every signup is saved and ready to sync with your marketing tools

A well-set-up Popup Form is one of the easiest ways to grow your audience and turn first-time visitors into long-term customers 🚀