> ## 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 the Currency Converter Cart Notification Banner

The Cart Notification Banner helps international shoppers understand that orders will be processed using your store's default currency, even if they're browsing prices in a different currency.

This helps set clear expectations before checkout, reduces confusion, and creates a smoother shopping experience for global customers. 🌍

---

# **⚠️ Before You Begin**

Before configuring the Cart Notification Banner, make sure:

* Hoppy Currency Converter is installed and active  
* The App Embed is enabled  
* The onboarding process has been completed  
* At least one additional currency is available for shoppers

ℹ️ The banner only appears when a shopper has selected a currency that differs from your store's default currency.

---

# **✅ Step 1: Open the Cart Notification Settings**

Open the **Hoppy Currency Converter** app from your Shopify Admin.

Then:

→ Click **Cart Notification** from the app navigation menu

This opens the Cart Notification Banner settings page.

---

# **✅ Step 2: Enable the Banner**

At the top of the page, you'll find the banner visibility settings.

### **Available Options**

#### **Show on Cart Page**

Displays the notification banner on your dedicated cart page.

Use this option if your Shopify theme redirects customers to a separate cart page.

---

#### **Show on Cart Drawer**

Displays the notification banner inside the slide-out cart drawer.

Use this option if your theme uses a mini-cart drawer instead of a dedicated cart page.

---

### **Using Both Options**

If your theme supports both a cart page and a cart drawer:

→ Enable both settings

This ensures customers see the notification regardless of how they access their cart.

💡 Not sure which cart experience your theme uses? Add a product to cart and see whether the cart opens as a new page or slides out from the side.

---

# **✅ Step 3: Configure the Banner Message**

The **Content** field allows you to customize the message shown to customers.

### **Default Message**

The app includes a default message that explains how checkout currency works.

---

### **Use the Store Currency Variable**

You can use:

{STORE\_CURRENCY}

This variable automatically displays your store's default currency.

### **Example**

We process all orders in {STORE\_CURRENCY}.

When displayed to shoppers, the placeholder is automatically replaced with the correct currency code.

💡 This ensures your message stays accurate even if your store currency changes in the future.

---

### **Customize the Message**

You can edit the content to match your store's branding and communication style.

### **Example Messages**

* Prices are shown in your local currency for convenience. Final checkout occurs in {STORE\_CURRENCY}.  
* Orders are processed in {STORE\_CURRENCY}. Exchange rates may vary slightly at checkout.

The editor supports common formatting options such as:

* Bold text  
* Italics  
* Links

---

# **✅ Step 4: Customize the Banner Design**

You can customize the appearance of the Cart Notification Banner to match your storefront.

---

## **🎨 Background Color**

Controls the background color of the notification banner.

### **How to Use**

* Select a color using the color picker  
* Or enter a Hex Code manually

A subtle contrasting color usually works best for visibility.

---

## **🖊️ Text Color**

Controls the color of the message text.

### **How to Use**

* Select a color using the color picker  
* Or enter a Hex Code manually

Choose a color that remains easy to read against the selected background color.

---

## **🔤 Font Family**

Controls which font is used inside the notification banner.

### **Available Options**

#### **Use Your Theme Font**

Matches the typography already used by your Shopify theme.

This is recommended for visual consistency.

---

#### **Google Fonts**

Choose from a wide selection of supported Google Fonts.

Examples include:

* Roboto  
* Montserrat  
* Open Sans  
* Poppins

Selected fonts are loaded automatically without requiring any additional setup.

---

# **✅ Step 5: Preview the Banner**

As you make changes, the preview section updates automatically.

This allows you to review:

* Content  
* Colors  
* Typography  
* Overall appearance

before saving the changes.

### **Preview Language**

If translations have been added, you can switch between languages to preview localized content.

---

# **✅ Step 6: Save Your Changes**

Once you're happy with the banner configuration:

→ Click **Save**

The changes are applied immediately to your storefront.

---

# **🌍 Add Translations (Optional)**

If your store supports multiple languages, you can create translated versions of the notification banner.

### **How to Add a Translation**

1. Click **Add Translation**  
2. Select a language  
3. Enter the translated message  
4. Click **Save**

When a shopper visits using a supported language, the translated version will automatically be displayed.

If no translation exists, the default message will be shown.

---

# **⚠️ Important Notes**

### **Banner Only Appears When Needed**

The Cart Notification Banner only appears when:

* The shopper has selected a currency different from the store currency

If both currencies match, the banner remains hidden automatically.

---

### **Shopify Markets Compatibility**

If Shopify Markets handles localized checkout currencies, the banner may not appear because checkout already occurs in the shopper's selected currency.

---

### **Theme Compatibility**

The Cart Notification Banner includes built-in support for many popular Shopify themes.

If a theme isn't recognized, the banner automatically falls back to a safe default placement.

---

### **Custom Placement**

Advanced users can manually position the banner by adding:

\<div class='futureblink-currency-cart-notification'\>\</div\>

to a custom element within the cart template.

The notification banner will automatically render inside that location.

---

# **🎉 Final Result**

Once configured successfully:

✅ Customers clearly understand checkout currency behavior

✅ International shoppers experience less confusion

✅ Cart and checkout expectations become clearer

✅ Trust and transparency improve

✅ The shopping experience feels more professional

Using the Cart Notification Banner helps create a smoother purchasing experience for customers browsing your store in multiple currencies. 🌍

---