> ## 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 an Announcement Bar

Want to share updates, promotions, or important messages with every visitor who lands on your store? 📢

An **Announcement Bar** is one of the easiest ways to grab attention without disrupting the shopping experience. Whether it’s a flash sale, a shipping update, or a newsletter signup prompt, a well-placed bar keeps customers informed from the moment they arrive.

This guide walks you through the full setup — from creating your first bar to making it live on your storefront 🚀

---

# **📍 What You’ll Learn**

By the end of this guide, you’ll know how to:

* Create a new announcement bar  
* Choose the right placement and bar type  
* Add your message and call-to-action  
* Apply a design that matches your brand  
* Set where and when it appears  
* Publish it to your store

---

# **✅ Before You Begin**

Make sure the **Hoppy Announcement Bar** app embed is enabled in your theme. Without this, your bar won’t appear on the storefront, no matter how perfectly it’s configured.

**To enable it:**

1. Go to **Shopify Admin → Sales Channels → Online Store → Themes**  
2. Click **Edit Theme** on your active theme  
3. Select **App Embeds** from the left sidebar  
4. Find **Announcement Bar/Banner**  
5. Toggle it **ON**  
6. Click **Save**

💡 *Already enabled? You’re ready to go\!*

---

# **⚙️ Step 1 — Create a New Announcement**

Open the **Hoppy Banners** app from your Shopify admin.

On the dashboard, click **Create New Announcement**.

You’ll be taken to the placement selection screen.

---

# **📌 Step 2 — Choose a Placement**

Placement decides **where** your announcement bar will appear in your store.

You’ll see six options:

* **Storefront Page** — Appears on your main storefront (home, products, collections, etc.)  
* **Email Collection Bar** — A bar focused on collecting visitor emails  
* **Cart Page** — Appears on the dedicated cart page  
* **Cart Drawer** — Appears inside the slide-out cart drawer  
* **Checkout Page** — Appears during checkout *(Shopify Plus only)*  
* **Custom Position** — Place it manually on specific product or collection pages

Select the one that fits your goal. For most merchants, **Storefront Page** is the best starting point.

Once selected, click **Continue**.

---

# **🎨 Step 3 — Pick a Preset (or Start from Scratch)**

Next, you’ll see a collection of **visual presets** — pre-designed combinations of colors, fonts, and layouts.

You can:

* **Choose a preset** to jumpstart your design  
* Or click **Make your Own** to build everything manually

Don’t worry — you can change every design detail later. Presets just save time ⏱️

After selecting a preset (or choosing to start fresh), the editor will open automatically.

---

# **📝 Step 4 — Add Your Content**

You’ll land in the **Content** tab. This is where you write your message and choose how the bar behaves.

---

## **🏷️ Announcement Name**

This is for your internal reference only. Customers won’t see it.

Use something recognizable like:

* Summer Sale Banner  
* Free Shipping Alert  
* Black Friday Header

💡 *Good naming helps when you have multiple bars running at once.*

---

## **📢 Announcement Type**

This controls how your message is displayed. There are four types:

| Type | Best For |
| ----- | ----- |
| **Simple** | A single static message |
| **Running** | A scrolling marquee or ticker |
| **Multiple** | Rotating slides with multiple messages |
| **Email** | Collecting visitor email addresses |

### **Choosing a Type**

* **Simple** is perfect for one clear message — like "Free Shipping on Orders Over $50."  
* **Running** works great for urgency or flash sales. When selected, you’ll see an **Animation Speed** slider and a checkbox to change the scroll direction.  
* **Multiple** lets you cycle through up to 20 different slides. When selected, a **Display Duration** slider appears to control how long each slide stays visible.  
* **Email** transforms the bar into a lead-capture tool. When selected, standard CTA options are replaced with a **Success Message** and **Email Placeholder** field.

💡 *You can always come back and switch types later.*

---

## **✍️ Title & Subheading**

* **Title** — This is your main message. It supports rich text formatting (bold, italics, links, colors).  
* **Subheading** — A smaller supporting line below the title.

ℹ️ The subheading field is hidden if you select the **Running** type, since marquee bars typically use one line of text.

---

## **🔗 Call to Action (CTA)**

Your CTA tells customers what to do next.

Choose a **CTA Type**:

* **No Call to Action** — No button or link  
* **Button** — A clickable button with custom text and a link  
* **Make entire bar clickable** — The entire bar becomes clickable  
* **Coupon** — Displays a coupon code with a copy-to-clipboard button  
* **Trigger App Event** — Fires a custom event for use with other apps

If you select **Button**, **Make entire bar clickable**, or **Trigger App Event**, you’ll see fields for the link or button text. If you select **Coupon**, a **Coupon Code** field appears along with a checkbox to show a copy icon.

---

## **🚪 Close Icon**

Enable this if you want customers to be able to dismiss the bar.

When enabled, two extra fields appear:

* **Appear again after** — How long before the bar reappears for that visitor  
* **Unit** — Hours or days

This is useful if you don’t want to annoy repeat visitors with the same message.

---

## **🎭 Banner Icons**

Banner Icons allow you to add clickable social or branding icons directly inside the Announcement Bar for better engagement and quick access to external platforms.

This is especially useful for promoting social media profiles, communities, or important external links without adding extra text clutter to the bar.

---

### **📌 Maximum Icons Allowed**

You can add up to **6 Banner Icons** inside a single Announcement Bar setup.

This helps maintain a clean and balanced layout across both desktop and mobile devices.

---

### **🖥️ Desktop & Mobile Visibility**

Each icon can be configured to appear on:

* Desktop devices  
* Mobile devices  
* Or both simultaneously

This gives you more flexibility depending on how you want the Announcement Bar to appear across different screen sizes.

---

### **🔄 Replace Icon**

Icons can be replaced anytime using the built-in **Icon Library**.

### **Available Behavior**

* Browse available icons from the Icon Library  
* Replace existing icons instantly  
* Update icons without affecting the rest of the setup

⚠️ Important:

Custom icon uploads are currently not supported. Only icons available inside the Icon Library can be used.

---

### **🔗 Call to Action (CTA)**

Each Banner Icon can optionally include its own Call to Action behavior.

### **Available Options**

* No call to action  
* Add Link

---

### **➕ Add Link**

When **Add Link** is selected:

→ A CTA Link field appears

This allows the icon to redirect visitors to external or internal pages.

### **Example Use Cases**

* Social media profiles  
* WhatsApp chats  
* Discord communities  
* Product collections  
* Promotional landing pages

---

### **⚠️ Important Notes**

* Each icon can have its own independent CTA behavior  
* Some icons may remain non-clickable while others redirect visitors  
* Removing an icon only removes that specific icon and does not affect the remaining icons  
* Icon arrangement can impact spacing and visibility on smaller mobile screens

💡 For the best storefront experience, avoid overcrowding the Announcement Bar with too many icons and links simultaneously.

---

# **🎨 Step 5 — Choose a Design**

Click the **Design** tab to style your bar.

For a quick setup, focus on these essentials:

* **Template** — Pick from 20+ pre-made styles or stay with your preset  
* **Visibility** — Choose whether it appears on **Desktop and Mobile**, **Desktop Only**, or **Mobile Only**  
* **Background** — Select a **Single Color**, **Gradient**, or **Pattern**  
* **Typography** — Choose a font and set your title color  
* **Button** — Adjust the button color, text color, and corner radius *(if you’re using a button CTA)*

💡 *For deeper design customization — including animations, custom CSS, advanced button effects, and social icon styling — see the dedicated **Design & Styling** documentation.*

---

# **📍 Step 6 — Set Position & Visibility**

Click the **Placement** tab to control where and when your bar appears.

---

## **📐 Display Position**

This sets the physical location of the bar:

* **Top Push** — Pushes the page content down  
* **Top Push (Sticky)** — Stays fixed at the top while scrolling  
* **Top Overlap** — Floats over the top of the page  
* **Top Overlap (Sticky)** — Floats and stays fixed while scrolling  
* **Bottom Overlap (Sticky)** — Appears at the bottom of the viewport  
* **Manual** — You place it yourself using a code snippet or app block

ℹ️ If you select **Manual**, the page targeting dropdown is disabled and a code snippet is provided for you to paste into your theme.

---

## **🎯 Page Targeting**

Decide which pages the bar appears on:

* **Every page**  
* **Home page only**  
* **All products**  
* **Products in specific collections**  
* **Specific products**  
* **All collections**  
* **Specific collections**

If you choose a "specific" option, a **Select Products** or **Select Collections** button appears so you can hand-pick exactly where it shows.

---

## **⏰ Scheduling**

Want the bar to go live later or stop automatically? Set a **Start Date** and **End Date**.

If left blank, the bar appears immediately and stays live until you manually unpublish it.

💡 *Advanced targeting options — including customer tags, geolocation, UTM sources, and time-on-site delays — are available in the same tab. These are covered in detail in the **Advanced Targeting** documentation.*

---

# **🚀 Step 7 — Publish Your Bar**

Once everything looks good, it’s time to go live.

Click **Publish** in the top-right corner.

A success banner will appear. If your **App Embed** is already enabled, you’re all set\! 🎉

If the App Embed is **not enabled**, the banner will remind you and provide a quick link to turn it on in your theme editor.

⚠️ **Important:** Saving alone does not make the bar visible to customers. You must click **Publish**.

---

# **🎉 Final Result**

Once published successfully:

✅ Your announcement bar appears on the selected pages  
✅ Customers see your message immediately upon visiting  
✅ Your CTA drives clicks, signups, or sales  
✅ The design blends seamlessly with your store branding  
✅ You can edit, duplicate, or unpublish anytime from the dashboard

---

# **📚 Related Documentation**

Want to go further? Check out these dedicated guides:

* **Design & Styling** — Deep customization of colors, fonts, animations, and custom CSS  
* **Advanced Targeting** — Geolocation, customer tags, UTM filtering, and time-on-site rules  
* **Translations** — Running multilingual announcement bars  
* **Troubleshooting** — What to do if your bar isn’t showing

Happy announcing\! 🥂