> ## 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 Trust Badge or Icon Banner

Learn how to create and configure a Trust Badge or Icon Banner to highlight important store benefits such as free shipping, secure checkout, fast delivery, easy returns, and more.

Trust Badge Banners help improve customer confidence while making key storefront information more noticeable and visually engaging.

---

## **✅ Step 1: Open Trust Badge Settings**

1️⃣ Go to **Shopify Admin** → **Apps** → **Hoppy Trust Badges** app.

2️⃣ Click on **Create new badge**.

---

## **✅ Step 2: Choose Your Placement**

From the available placement options, select where you want the Trust Badge Banner to appear.

### **📍 Available Placement Types**

### **Product Page**

* Show Trust Badge Banners directly on product pages  
* Helps customers feel more confident before purchasing

### **Footer**

* Display Trust Badge Banners in the footer section  
* Keeps trust messaging visible across the storefront

### **Floating Icons**

* Display floating trust banners while customers scroll  
* Usually positioned in screen corners for better visibility

### **Cart Drawer**

* Show Trust Badge Banners inside the mini cart or slide-out cart  
* Reinforces trust during the shopping journey

### **Cart Page**

* Display Trust Badge Banners directly on the cart page before checkout  
* Helps reduce hesitation before purchasing

### **Checkout Page**

* Display Trust Badge Banners during the Shopify checkout process  
* Helps reinforce confidence before order completion  
* Available only for **Shopify Plus** merchants

### **Custom Position**

* Manually place Trust Badge Banners exactly where needed  
* Positioning can be customized using the Shopify Theme Editor

---

## **✅ Step 3: Setup Trust Badge Banner**

Inside the **Content** tab, locate the **Badge Type** dropdown and select:

### **Single Banner**

---

## **📝 Configure Block Content**

Inside the **Block Content** section:

* Add an internal block name for easier management inside your admin dashboard  
* This name is only visible inside the admin area and is not shown to storefront visitors

---

## **✍️ Configure Promotional Text**

You can customize the messaging displayed inside the Trust Badge Banner.

### **Available Fields**

### **Title**

Add the primary trust message for the banner.

### **Example Titles**

* Free Shipping  
* Secure Checkout  
* Easy Returns  
* Fast Delivery

### **Subheading**

Add a supporting message below the title.

### **Example Subheadings**

* No Extra Costs  
* 100% Secure Payments  
* Hassle-Free Returns  
* Ships Within 24 Hours

---

## **🎨 Choose & Manage Icons**

You can customize the icon displayed inside the Trust Badge Banner.

### **Available Actions**

* Select icons from the built-in Icon Library  
* Replace existing icons  
* Remove icons  
* Upload custom icons from your device

### **Supported Examples Include**

* Visa  
* Mastercard  
* PayPal  
* Stripe  
* Shipping icons  
* Security icons

💡 Built-in icons help maintain cleaner visual consistency across storefront themes.

---

## **📤 Upload Custom Icons**

Besides the built-in Icon Library, you can also upload custom icons directly from your device.

This is useful for stores using:

* Custom branding  
* Unique visual assets  
* Brand-specific graphics

⚠️ Uploaded icons may retain their original colors depending on the image format used.

---

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

The Trust Badge Banner can optionally include clickable behavior.

### **Available CTA Types**

### **No Call to Action**

The banner remains static and non-clickable.

This works well when the banner is only intended for visual trust-building.

---

### **Add Button with Link**

Creates a separate clickable button beside or below the banner.

This is useful when directing customers toward:

* FAQ pages  
* Shipping policies  
* Return policies  
* Security information pages

---

### **Add Link to Whole Block**

Makes the entire Trust Badge Banner clickable.

This creates a more seamless visitor experience by allowing customers to click anywhere inside the banner.

💡 This works especially well for linking visitors to trust, shipping, or policy pages.

---

## **📌 Available Link Destinations**

Once a CTA type is selected, you can choose where customers should be redirected.

### **Product Page**

Redirect visitors directly to a Shopify product.

### **Collection Page**

Redirect visitors to a Shopify collection.

### **Custom URL**

Redirect visitors to:

* Terms of Service  
* About Us page  
* Shipping Policy  
* External pages

---

## **🛒 Product Linking**

If Product Page linking is selected:

→ Use **Select Product** to choose the destination product directly from your Shopify store.

---

## **✅ Step 4: Customize Design Settings**

Open the **Design** tab to style your Trust Badge Banner.

### **Available Design Controls**

### **Visibility**

Choose:

* Desktop & Mobile  
* Desktop Only  
* Mobile Only

### **Typography & Colors**

Customize:

* Fonts  
* Text sizes  
* Background colors  
* Borders  
* Spacing

⚠️ Important:

Custom color editing is only available for supported built-in icons.

Uploaded custom images and certain standard payment logos may retain their original colors.

---

### **Animations**

Choose animation styles to make the Trust Badge Banner feel more dynamic and noticeable.

💡 Subtle animations often perform best without becoming distracting.

---

## **✅ Step 5: Configure Placement & Visibility**

Navigate to the **Placement & Visibility** tab.

### **Available Controls**

### **Pages**

Choose where the Trust Badge Banner should appear:

* All pages  
* Homepage only  
* Product pages  
* Collection pages

### **Devices**

Control visibility for:

* Desktop  
* Mobile  
* Both

### **Position**

Set positioning such as:

* Bottom-left  
* Bottom-right  
* Inline positions

### **Schedule**

Optionally configure:

* Start dates  
* End dates  
* Temporary campaign visibility

---

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

Once your Trust Badge Banner is fully configured:

* Click **Save**  
* Then click **Publish**

After publishing:

→ Visit your storefront and verify that the Trust Badge Banner appears correctly in the selected location.

---

## **💡 Quick Troubleshooting Tip**

If the Trust Badge Banner does not appear on your storefront after publishing:

Your Shopify theme may be blocking the app embed.

### **To Fix This**

1. Go to **Shopify Admin** → **Online Store** → **Themes**  
2. Click **Edit Theme** on your live theme  
3. Open **App Embeds** from the sidebar  
4. Toggle **Hoppy Trust Badges (Badges & Icons)** → **ON**  
5. Click **Save**

---

## **✅ Final Result**

Once configured successfully, Trust Badge Banners help make your storefront feel more trustworthy, informative, and conversion-focused.

With proper setup:

✅ Customers gain more confidence before purchasing  
✅ Important trust messaging becomes more visible  
✅ Store policies feel easier to access  
✅ Storefront engagement improves  
✅ Checkout hesitation can be reduced  
✅ Brand credibility becomes stronger

Trust Badge Banners work best when combined with clean layouts, balanced spacing, and meaningful trust-focused messaging.

---