> ## 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 Setup Custom PopUps

Want full control over where and how your popup appears? 🛠️

Custom PopUps are built for advanced use cases. They default to **manual placement**, which means you decide exactly where the popup lives in your theme — plus you get access to a **custom CSS** field and a **floating action button** for maximum flexibility.

This guide walks you through the entire setup so you can launch your first Custom PopUp in minutes.

---

# **✅ Before You Begin — 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 → Sales Channels → Online Store → Themes → Edit Theme → App Embeds**

Then:

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

ℹ️ Without this step, your popup will not render on the storefront even after publishing.

---

# **⚙️ Step 1 — Create a New Custom PopUp**

Open the **Hoppy PopUps** app.

Then:

→ Click **Create New PopUp**

→ Select **Custom PopUp** from the list of popup types.

The setup page will open automatically with **manual placement** selected by default.

---

# **📝 Step 2 — Configure the Content**

After opening the setup page, you'll land inside the **Content** tab.

This section controls what your visitors see and how they interact with the popup.

---

## **🏷️ PopUp Name**

This field is used for internal purposes only. Customers will never see this name.

You can use any recognizable name such as:

* Custom Announcement  
* Theme-Placed Banner  
* Developer Custom Popup  
* Hardcoded Promo

💡 Using proper internal naming makes it easier to identify setups later, especially if your store runs multiple campaigns.

---

## **💬 Title & Description**

These appear at the top of your popup and should clearly communicate your message.

### **Example**

* **Title:** "Special Announcement"  
* **Description:** "Check out our latest collection"

You can customize these to match your campaign voice.

---

## **📧 Email & Phone Collection**

Choose which fields to show in your popup:

* **Show email collection field** — captures visitor emails  
* **Show phone number field** — captures phone numbers with country-code selection

You can show both, only one, or neither if you're purely displaying an announcement.

---

## **🔗 Button Link**

If you're not collecting emails or phone numbers, the popup becomes a simple call-to-action button. Set the **Link** to the page you want visitors to visit — for example, a collection page, product page, or external URL.

---

## **⚙️ Additional Collection & Coupon Settings**

This section gives you additional control over how visitor information is collected and how discounts are presented inside the popup.

---

### **📩 Email Collection Field Placeholder**

Customize the placeholder text shown inside the email input field.

### **Example**

* "Enter your email"  
* "Your best email address"

This helps guide visitors on what information they should enter.

---

### **❌ Email Error Message**

Set the validation message shown when a visitor enters an invalid email address.

### **Example**

* "Please enter a valid email address"

This appears automatically if the entered email format is incorrect.

---

### **📱 Default Country Code**

Choose the default country code for the phone number field.

### **Example**

* United States (+1)  
* United Kingdom (+44)  
* India (+91)

Visitors can still change the country manually unless restricted.

---

### **📞 Phone Number Placeholder**

Customize the placeholder text shown inside the phone number field.

### **Example**

* "Enter your phone number"  
* "Mobile number"

This improves clarity and encourages proper formatting.

---

### **⚠️ Phone Number Error Message**

Set the message displayed when an invalid phone number is entered.

### **Example**

* "Please enter a valid phone number"

This helps visitors understand why submission failed.

---

### **🔘 Button Text**

Customize the call-to-action button text shown inside the popup.

### **Example**

* "Shop Now"  
* "Claim Discount"  
* "Unlock Offer"

Using action-oriented text can improve conversions.

---

### **🏷️ Show Coupon Code**

Choose whether the coupon code should appear inside the popup after successful email capture.

Available options:

* **Yes** — displays the coupon code to visitors  
* **No** — hides the coupon code section

This is useful if discounts are applied automatically or handled externally.

ℹ️ The coupon code can only be shown if the email is getting captured.

---

### **🎟️ Coupon Code**

ℹ️ 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.

---

### **☑️ Add Opt-In Checkbox**

Choose whether to show an additional opt-in checkbox inside the popup.

This can be used for:

* Marketing consent  
* SMS consent  
* Newsletter subscriptions  
* Terms acknowledgement

Available options:

* **Yes** — displays the checkbox  
* **No** — hides the checkbox

---

### **❎ Close Icon**

Enable or disable the close icon shown on the popup.

* **Enabled** — visitors can manually close the popup  
* **Disabled** — removes the close icon from the popup

This helps control how dismissible the popup experience should be.

---

## **✉️ Success Messages**

After a visitor submits their details, a success message appears.

* **Success Message:** "Welcome to our store\!"

You can also add a description below the message with next steps or instructions.

---

## **🖱️ Button Click Behavior**

ℹ️ This option is available only when "Show Email Field" & "Show Phone Number Field" are unchecked.

It allows you to control what happens when a visitor clicks the CTA button inside the popup. It handles either of the following:

1. **Close Popup** — the popup will close  
2. **Reveal Coupon Code** — the coupon code will be revealed to the visitor, but you will have setup the Coupon Code as described above in the "Show Coupon Code" section.  
3. **Redirect to Link** — selecting this would give you an input field called "Link" where you can specify the URL to which the visitor will be redirected

---

## **🔄 Floating Action Button**

Even with manual placement, you can add a **Floating Action Button** that stays visible on the page so visitors can reopen the popup after closing it.

Choose a position:

* **Bottom right**  
* **Bottom left**  
* **Screen right**  
* **Screen left**

Then enter the **Button Text** — e.g. "Open Offer", "Get Discount", or "Learn More".

To disable the floating button entirely, select **Disable floating action button**.

---

# **🎨 Step 3 — Apply Custom CSS (Optional)**

Switch to the **Design** tab to access the **Custom CSS** section.

This is where Custom PopUps really shine. You can write your own CSS to override any default styling.

---

## **📝 CSS Template**

The app provides a ready-made template with common selectors:

.futureblink-popup {  
  /\* Main popup container \*/  
}  
.futureblink-popup .title {  
  /\* Popup title \*/  
}  
.futureblink-popup.mobile .title {  
  /\* Mobile title override \*/  
}  
.futureblink-popup .description {  
  /\* Popup description \*/  
}  
.futureblink-popup.mobile .description {  
  /\* Mobile description override \*/  
}  
.futureblink-popup .cta-button {  
  /\* Call-to-action button \*/  
}  
.futureblink-popup.mobile .cta-button {  
  /\* Mobile button override \*/  
}  
.futureblink-popup .close-btn {  
  /\* Close icon \*/  
}  
.futureblink-popup.mobile .close-btn {  
  /\* Mobile close icon override \*/  
}

Paste your custom CSS into the field and click **Apply**.

---

## **⚠️ Important Notes**

* Custom CSS overrides all other design settings — use it when you need pixel-perfect control  
* Mobile-specific selectors let you style differently for phone users  
* Click **Reset** to restore the default CSS template at any time

---

# **🖱️ Step 4 — Set the Trigger & Display Rules**

Move to the **Placement/Targeting** tab to control when and where your Custom PopUp appears.

Because Custom PopUps use manual placement, most standard trigger settings don't apply in the same way. However, you can still configure:

* **Display Frequency** — Show every time, once per visit, or limit with a cooldown  
* **Customer Targeting** — Login status, customer tags, lifetime spent  
* **Geolocation** — All world or specific countries  
* **Scheduling** — Optional start and end dates

For deep explanations of each targeting option, see the dedicated Advanced Targeting documentation.

---

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

Once everything looks good:

1. Click **Save** to store your configuration   
2. Click **Publish** to make the popup live on your storefront 

⚠️ **Saving alone does not make the popup visible to customers.** You must publish it.

⚠️ **For manual placement:** Remember to also add the code snippet to your theme — publishing alone won't place the popup automatically.

If the app embed is not yet enabled, a banner will remind you to activate it in your Shopify theme editor.

---

# **🎉 Final Result**

Once configured successfully:

✅ Your popup appears exactly where you placed it in your theme   
✅ Custom CSS gives you full visual control   
✅ A floating action button keeps the popup accessible (if enabled)   
✅ Your popup respects targeting rules, scheduling, and device settings   
✅ Visitors interact with a fully on-brand, custom-placed experience

Your Custom PopUp is now live and uniquely yours 🚀

---