> ## 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 Place and Upload Trust Badges in a Custom Position

This guide explains how to:

* Upload your own custom Trust Badge icons  
* Place Trust Badges manually using Custom Position  
* Find and use the Badge ID correctly  
* Connect badges with Shopify App Blocks

Custom Position gives merchants complete flexibility over where Trust Badges appear on the storefront.

In addition, merchants can also upload their own custom icons whenever the built-in Icon Library does not contain the design they need.

---

# **📤 Part 1 — Uploading Custom Trust Badge Icons**

## **🎨 Upload Your Own Custom Icons**

All types of Trust Badge and Icon Blocks support custom icon uploads.

Although the app includes a built-in Icon Library, merchants may sometimes want to use:

* Brand-specific icons  
* Custom-designed trust badges  
* Unique payment icons  
* Store-specific graphics

Custom uploads make this possible.

---

# **📂 Where to Upload Custom Icons**

Inside the setup:

→ Open the **Content** Tab

This is where your existing icons or default icons are displayed.

---

# **🛠️ How to Upload a Custom Icon**

You can either:

* Replace an existing icon  
* Upload a completely new custom icon

---

# **🔄 Replacing an Existing Icon**

1. Locate the existing icon block  
2. Click: **Remove** Icon  
3. This will reveal icon selection options  
4. Below the **Select/Remove** Icon section, click the **UploadIcon** button  
5. Upload your custom image/icon file

Once uploaded, the new custom icon will replace the previous icon.

---

# **💡 Recommended Image Size Guidelines**

For the best visual appearance:

* Upload images that closely match the display size  
* Avoid uploading extremely large images for small badge areas  
* Use properly cropped icons whenever possible

⚠️ Large or mismatched image sizes may look:

* Distorted  
* Stretched  
* Blurry

---

# **⚡ Recommended for Better Site Speed**

For better storefront performance:

* Upload lightweight image files  
* Use optimized icon sizes  
* Avoid unnecessarily large image dimensions

Smaller optimized icons help improve:

* Store loading speed  
* Performance scores  
* Mobile responsiveness

---

# **📍 Part 2 — Placing Trust Badges Using Custom Position**

# **⚠️ Before You Begin**

The Badge ID becomes available only when:

* Placement is changed to **Custom Position**  
* The setup is properly saved afterward

If the setup is not saved, the Badge ID will not appear.

---

# **🛠️ Step 1 — Open Trust Badges & Icons**

Open the **Trust Badges & Icons** app/setup from your Shopify Admin.

---

# **📂 Step 2 — Open or Create a Badge Setup**

You can either:

→ Open an existing badge setup

OR

→ Create a new badge/icon setup

Once opened, you can configure placement settings.

---

# **⚙️ Step 3 — Navigate to Placement & Visibility**

Inside the setup:

→ Open the **Placement & Visibility** tab.

This section controls where and how your badges appear on the storefront.

---

# **🎯 Step 4 — Change Placement to Custom Position**

Inside:

Select pages to display the icon/badge block

→ Change the placement option to:

Custom Position

Then:

→ Click **Save**

⚠️ Important:

The Badge ID will not appear until the setup is saved after selecting Custom Position.

---

# **🆔 Step 5 — Locate the Badge ID**

Once the setup is saved successfully:

→ The **Badge ID** will automatically appear inside the setup.

You can:

* View the Badge ID  
* Copy the Badge ID using the clipboard icon

⚠️ Custom Position must remain selected for the Badge ID to work correctly.

---

# **📋 How to Copy the Badge ID**

To copy the Badge ID:

1. Locate the Badge ID field  
2. Click the clipboard icon beside it  
3. The Badge ID will be copied instantly

This copied ID can now be used inside Shopify App Blocks.

---

# **🧩 Using the Badge ID**

Once the Badge ID is copied:

→ Add it inside your Shopify App Block settings

This allows Shopify to load the correct Trust Badge setup in the selected custom location.

---

# **⚠️ Important Notes**

Before using the Badge ID:

* Placement must already be set to **Custom Position**  
* The setup must already be **Saved**

Otherwise:

* The Badge ID may not appear  
* Badges may not display correctly on the storefront

---

# **🎉 Final Result**

Once configured successfully:

* ✅ Custom Trust Badge icons can be uploaded easily  
* ✅ Merchants can use their own branded icons  
* ✅ Badge IDs become available correctly  
* ✅ Trust Badges can be placed manually anywhere on the storefront  
* ✅ Shopify App Blocks can connect correctly with the selected badge setup  
* ✅ Custom storefront placement becomes far more flexible  
* ✅ Merchants gain precise control over badge positioning

Using Custom Position together with custom icon uploads makes storefront customization far more powerful and personalized.