Home Trust Badges & Icons

Trust Badges & Icons

Support
By Support
• 14 articles

How do I set up a Trust Badge?

Learn how to add trust badges to build customer confidence. ✅ Step 1: Open the Hoppy Trust Badge app. 1️⃣ Go to Shopify Admin → Apps → Hoppy Trust Badges 2️⃣ In the Content tab, choose the types of badges you want to display (e.g., Single Banner, Icon Block, Payment Icons). ✅ Step 2: Customize Your Trust Badge. 3️⃣ Enhance Your Trust Badge Icons/block. - Enter the badge details, such as the title, subheading, and select icons. - Tooltip: Use this to show extra info when someone hovers or clicks on a badge. - Choose how it appears: On Hover or On Click - Add a title and subheading to explain your badge with links and rich text. - Don’t want it? Just select No Tooltip 4️⃣ Now, go to the Design tab - Customize the appearance, such as size, color, border style, icon styling, animation, spacing, and alignment, to match your store's design. ✅ Step 3: Navigate to the Placement tab 5️⃣ Choose where you want the trust badges to be displayed. - All Products: The trust badge will be displayed on all products in your store. - Specific Product: You can select specific products where you want the trust badge to be displayed. - All Products in a Specific Collection: You can select collections where you want the trust badge to be displayed. - Custom Position: This option allows you to display the trust badge anywhere in your store. ✅ Step 4: Publish and Verify the Trust Badges 6️⃣ Click the Save button to apply your settings. 7️⃣ Ensure that the Trust Badges are enabled for your store. - Go to Online Store > Themes > Customize. - Click on App Embeds and ensure that Hoppy Trust Badges is enabled. 8️⃣ Visit your store to ensure the badges display correctly. 9️⃣ If necessary, return to the Hoppy Trust Badge app and make adjustments. 🎉 Awesome! Your badges are live and securing customer trust! 🔒

Last updated on Oct 23, 2025

How do you set and customize icons for the Trust Badge?

Learn to customize and add trust badges to your store. ✅ Step 1: Add Icons to Your Trust Badge. 1️⃣ Go to Shopify Admin → Apps → Hoppy Trust Badge app. 2️⃣ In the Content tab, locate the Badge Content option. - Below the Title and Subheading fields, you will see the option to add icons🖼️. - First, click on Remove Icon📌. Then, you will see an option to select an icon from a wide range of choices. Click on Select Icon and choose the icon you want. - You can also upload a Custom Icon by clicking on the Upload icon and selecting a custom icon file from your device. ✅ Step 2: Customize the Appearance of Icons 3️⃣ Now, navigate to the Design tab to Customize Icon Appearance. Scroll down and locate the Icon option. - Click on the Icon size box, then use the ⬆️⬇️ arrow keys on your keyboard to adjust the size of the icon. - Click on the color box🎨 to choose the color of the icon and the background color of the icon. - Adjust the corner radius and icon spacing - Icon Pro Styling & Icon Separator🎨 The Icon Pro Styling feature lets you add advanced visual customizations to your icons — to better match your store's branding. The Icon Separator option allows you to place a visual divider between icons, making your email collection bar look cleaner and more organized. -Use these features to give your email bar a polished, professional appearance! 💡 Please note: You can only change the color of icons available in our icon library. This does not apply to user-uploaded icons or payment icons. - Select Orientation - how the trust badges are arranged on your store. From the dropdown: - Select Horizontal if you want the badges to appear side by side. - Select Vertical if you want the badges to appear one below the other. ✅ Step 3: Save & Publish 4️⃣ After customizing the icons, click Save to apply the changes. 5️⃣ Ensure the Trust Badge is enabled and properly configured for display. 6️⃣ Visit the store and check if the icons are correctly appearing under the Title and Subheading. 7️⃣If necessary, return to the Hoppy Trust Badge app and adjust icon size or selection. 🎨 Customization complete! Your badges are styled and ready! 💡

Last updated on Nov 05, 2025

How do I add a Call to Action (CTA) button and a link to the Trust Badge?

Learn how to add and customize a CTA button and a link to the Trust Badge. ✅ Step 1: Open the Call To Action Settings 1️⃣ Open the Hoppy Trust Badge App in your Shopify Admin and Go to the Content Tab. 2️⃣ Scroll down to locate the Call to Action (CTA) Settings dropdown and click the dropdown to view the three options: - No Call to Action❌ - Button 🔘 - Whole Banner Clickable 🖱️ Option 1: No Call to Action (Default) ❌ - If you do not want any clickable elements on your Trust Badge, simply select 'No Call to Action' from the dropdown. - The Trust Badge will be displayed without any button or link. 💡 Use Case: Ideal for displaying trust signals without redirecting customers to Another page. Option 2: Add a CTA Button Below the Trust Badge 🔘 - In the CTA Settings dropdown, select Button. - A new section will appear to customize the button. - Button Text: Enter the text for your CTA (e.g., "Learn More," "Secure Checkout," "Shop now"). - Below the button text, you will see two options: Product Page and Collection Page. These options allow you to select a specific product or collection page where customers will be redirected when they click the button. - Select the product page or collection page where you want customers to be redirected. 💡 Use Case: Recommended for directing customers to important pages such as security policies, money-back guarantees, or payment information. Option 3: Make the Whole Banner Clickable 🖱️ - In the CTA Settings dropdown, select Whole Banner Clickable. - You will see two options: Product Page and Collection Page. These options allow you to select a specific product or collection page where customers will be redirected when they click anywhere in the banner. - Select the product page or collection page where you want customers to be redirected. 💡 Use Case: Best for maximizing customer engagement, ensuring they can click anywhere on the badge to get more details. ✅ Step 2: Save & Publish 3️⃣ When you're happy with your selection, click 'Save' to confirm and apply the changes. 4️⃣ Visit the store and navigate to a product page, cart page, or wherever the Trust Badge is displayed. 5️⃣ Test the CTA button or clickable banner: - If you added a button, click it and ensure it redirects to the correct page. - If you made the banner clickable, click anywhere on it to verify the link. 🎉 That’s it! Your Trust Badge now includes a CTA button or a clickable banner for better engagement! 🚀

Last updated on Nov 05, 2025

How to add custom CSS styles for trust badges?

Learn how to add your own custom CSS to Trust badges. ✅ Step 1: Open the Hoppy Trust Badge app. 1️⃣ Go to Shopify Admin → Apps → Hoppy Trust Badge app. 2️⃣ Navigate to the Design tab and scroll down to locate the Custom CSS box. ✅ Step 2: To Create the Boilerplate (Base Structure) 3️⃣ Start by targeting the Shopify Trust Badge with the following selector: .futureblink-trust-badge { /* This is the main trust badge */ } ✅ Step 3: To Add Background Styling 4️⃣ Set a background color for the Trust Badge: .futureblink-trust-badge { background: Purple; } - You can replace Purple with any color based on user preferences. ✅ Step 4: To Customize Font, Size & Text Color 5️⃣ To ensure the text looks clean and readable, apply the following styles: .futureblink-trust-badge .title { color: white; font-size: 16px; font-family: 'Arial', sans-serif; font-weight: bold; text-align: center; } - Modify the color, font-size, and font-family values to match your brand. - For paragraph text inside the trust badge: .futureblink-trust-badge p { color: whitesmoke; } - For links inside the trust badge: .futureblink-trust-badge a { color: Yellow; text-decoration: none; } ✅ Step 5: To Style the Call-to-Action (CTA) Button 6️⃣ If the trust badge includes a CTA button, style it properly: .futureblink-trust-badge .cta-button { background: green; color: yellow; font-size: 14px; font-weight: bold; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; display: inline-block; } ✅ Step 6: To Apply Complete Custom CSS .futureblink-trust-badge { background: linear-gradient(green,aqua); } .futureblink-trust-badge .title { color: white; background: transparent; } .futureblink-trust-badge .subheading{ color: white; background: transparent; } .futureblink-trust-badge .cta-button{ background: black; color: white; } .futureblink-trust-badge .button-prev{ background: black; } .futureblink-trust-badge .button-next{ background :black; } ✅ Step 7: Save & Publish 7️⃣ Click Apply and then Save to confirm your changes. 8️⃣ Refresh your store to check how it looks! 🎉 That’s it! Your trust badge now has a custom style to match your brand! 🚀

Last updated on Oct 23, 2025

How to add trust badges on checkout page?

Learn to add trust badges in the checkout page ✅ Step 1: Open the Hoppy trust badges 1️⃣ From your Shopify admin, open the Hoppy trust badges app. 2️⃣ Select the Badge Type as Checkout page(you will require shopify plus plan to add the trust badge in the checkout page) ✅ Step 2: Customize your Trust badge 3️⃣ Under the Content tab, fill in the following fields: - Choose the types of badges you want to display (e.g., Single Banner, Icon Block, Payment Icons). - Enter the badge details, such as the title, subheading, and select icons. - Set Start & End Date for the trust badge ✅ Step 3: Customize the Design of the Trust badge 4️⃣ Navigate to the Design tab to personalize your badges. - Typography: - Adjust the font, text color, and size of the title and subheading. - Icon Styling: Adjust icon size and colour. You can also check the box to use the original icon colour. ✅ Step 4: Placement of the trust badge 5️⃣ In the Placement tab, you will see: - Select Pages to Display (Checkout Page) This option is pre-selected as “Custom block placement set by the merchant”, meaning the badges’ position is already placed manually in your checkout page ✅ Step 5: Publish and Verify the Trust badges 6️⃣ Click Save & Publish to activate the trust badges. 7️⃣ Refresh your store to ensure it displays correctly. 🎉 That’s it! Your Trust Badge with payment icons is now active on the checkout page and boosting customer confidence! 🚀 ​

Last updated on Nov 05, 2025

How do I set the Placement/Custom Position for badges and icons?

You can use Custom Position to manually place badges anywhere on your site. ✅ Step 1: Open the Hoppy Trust Badge app. 1️⃣ Go to Shopify Admin → Apps → Hoppy Trust Badges. 2️⃣ In the Placement tab, you will see multiple placement options for your Trust Badges & Icons: - All Product Pages – Display badges on every product page. - Specific Product Pages – Choose specific products where badges should appear. - All Collection Pages – Show badges on all collection pages. - Custom Position – Manually place badges anywhere on your store. ✅ Step 2: Placement of the Trust Badges 3️⃣ To place Trust Badges in a custom location, select Custom Position in the Placement tab settings and click Save. This will unlock two options: 🔹 Option 1: Using App Block (Recommended for Beginners) This method uses the Badge ID to place the Trust Badges. 📌 Steps to Add Badges Using App Block: - First, Copy the Badge ID. - Go to Shopify Admin → Online Store → Themes. - Click on Customize to open the Theme Editor. - Navigate to the page and the section where you want to add the badges. Click on Add Section → Scroll to Apps → Select Badges & Icons. - Paste your Badge ID in the empty field of the settings panel. 🔹Option 2: Using Custom Liquid (Advanced) This method requires adding a code snippet to your theme using Custom Liquid. 📌 Steps to Add Badges Using Custom Liquid: - First, copy the Code snippet. - Go to Shopify Admin → Online Store → Themes. - Click on Customize to open the Theme Editor. - Navigate to the page and section where you want to add the badges. Click on Add Section → Search for Custom Liquid → Click on it. - Paste your Badge & Icons Code Snippet into the Custom Liquid editor. ✅ Step 3: Save and Test Your Placement 4️⃣ Click Save in Shopify's Theme Editor. 5️⃣ Visit your store and check if the badges appear in the correct position. 6️⃣ If the badges are not visible, try: - Clearing your browser cache. - Checking if Custom Positioning is enabled in the Hoppy Trust Badge app. - Refreshing your store page. 🔥 Great job! Your trust badges are now positioned just the way you want! 🚀

Last updated on Oct 24, 2025

How to set up payment icons in the trust badge app?

Learn to add and customize payment icons to your store. ✅ Step 1: Open the Hoppy Trust Badge app. 1️⃣ Go to Shopify Admin → Apps → Hoppy Trust Badges.. 2️⃣ In the Content tab, in Badge type, select Payment Icons. ✅ Step 2: Customize the Title and Subheading. 3️⃣ In the Badge Content section, you’ll see options to enter the badge title, subheading, and select icons. Enter the badge details: - Edit the Title🏷️**:** Locate the Title field and add a relevant Title (e.g., “Secure & Easy Checkout”). - Edit the Subheading🏷️**:** Locate the Subheading field below the title. Add a short, reassuring message for customers (e.g. "No Extra Costs", "Return with Ease", "Secure and trusted payment methods."). 4️⃣ Below the Title and Subheading fields, you will see the option to add icons🖼️. - First, click on Remove Icon📌. Then, you will see an option to select an icon from a wide range of choices. - Click on Select Icon and choose the icon you want. - You can also upload a Custom Icon by clicking on the Upload icon and selecting a custom icon file from your device. - Call to Action (CTA): Choose one of the following from the dropdown: - No Call to Action ❌ - Button 🔘 - Make Entire Bar Clickable 🖱️ - Link Field: Add the URL where you want customers to be directed. This will activate when they click the button or the entire bar (based on your CTA setting). 5️⃣ Similarly, add the content for the second badge using the same steps. To add more badges, click on ‘Add Icon’. Each badge will appear next to the others. 6️⃣ Set Start & End Date for the payment icons ✅ Step 3: Customize Icon Design 7️⃣ Navigate to the Design tab to style your bar: - Template: Choose a design template from the dropdown. - Visibility: Select where the bar should appear: - Desktop & Mobile - Desktop Only - Mobile Only - Background, Border, and Spacing: - Pick a background color. - Customize the border style and size. - Adjust the spacing of your icons. - Icon: - Pick a background color. - Customize the Icon style and size. - Customize the Icon Pro styling and the Icon separator. 💡 Please note: You can only change the color of icons available in our icon library. This does not apply to user-uploaded icons or payment icons. - Typography: - Adjust the font, text color, and size of the title and subheading. - Button Design (only if you chose Button under CTA): - Modify button text color, size, background, style (from dropdown), and font. - Choose an animation style to make your icons stand out. ✅ Step 4: Choose the Placement of the Payment Icons 8️⃣ Choose where you want the payment icon to be displayed. Here, you will see three placement options in a dropdown: - Top of the Cart🔝 -Shows the badge at the very top of the cart page. Great for building trust right away! - Bottom of the Cart ⬇️-Displays the badge just above the checkout button. Perfect for giving that final trust push before checkout! - Custom Position⚙️-Want full control? Select this to manually place the badge anywhere in your theme using the theme customizer or code snippet. Best for custom designs and flexibility! ✅ Step 5: Publish and Verify the Payment Icons 9️⃣ Click Save & Publish to activate the Payment icons. 🔟 Refresh your store to ensure it displays correctly. 🎉 That’s it! Your Trust Badge with payment icons is now active and boosting customer confidence! 🚀

Last updated on Oct 24, 2025

Trust Badge is not showing on my store [Fixed]

Troubleshoot and resolve the issue of the Trust Badge not showing on your store. ✅ Step 1: Ensure Your Trust Badge is Created & Published 1️⃣ Go to Shopify Admin → Apps → Hoppy Trust Badges app. 2️⃣ Check if you have created the Trust Badge and ensure it is set to Published. ✅ Step 2: Enable App Embed in Theme Editor 3️⃣ For the Trust Badges to appear on your store, you must enable the App Embed feature in the Shopify Theme Editor. 🔹 How to Enable App Embed: 1. Go to Shopify Admin → Online Store → Themes. 2. Click Customize on your active theme. 3. In the left menu, click on App Embeds (⚙️ settings icon at the bottom). 4. Find Badges & Icons and toggle it ON. 5. Click Save in the top right corner. 💡 Tip: If the toggle was already ON, try turning it OFF and then back ON to refresh the settings. ✅ Step 3: Using a Custom Theme? 4️⃣ If you are using a custom theme, you will need to add Trust Badges as a Block or Code. To manually add it: - Open your Theme Editor (Online Store → Themes → Customize) and navigate to the Sections or Blocks panel. - Look for an option to Add Section or Add Block, select the Hoppy Trust Badge app, position it where you want it to appear, and click Save. ✅ Step 4: Check Geolocation Settings 5️⃣ Ensure the geolocation settings are not restricting the bar from appearing in your country. To check: - Open the Hoppy Trust Badge app and navigate to the Placement tab. - Scroll down to the Geolocation Targeting settings and ensure your country is included in the list of allowed locations. ✅ Step 5: Check Scheduling Settings 6️⃣ Make sure to check if the trust badge is scheduled for a future date instead of being live immediately. To Check: - Open the Hoppy Trust Badge app and navigate to the Content tab. - Scroll down to locate the Scheduling option. Check the Start Date and End Date settings. - If the Start Date is set to a future time, change it to Right Now to display immediately. If the End Date has expired, update it or remove the restriction. - Click Save. ✅ Step 6: Check the “Allowed UTM Sources” Section 7️⃣ The Trust Badge will only show when the visitor comes from a selected source, like Facebook, Instagram, Twitter, Google, or others via a UTM-tagged link. - Open the Hoppy Trust Badge app and click on the "Placement" tab. - Scroll to the section titled "Allowed UTM Sources". - Based on the checkmarks next to the platforms (e.g., ✅ Facebook, ✅ Instagram) in the 'Allowed UTM Sources' section, when a visitor lands on your store from one of those platforms, the Trust Badge will appear ✅ Step 7: Trust Badge Not Visible in Cart and Product Page? 8️⃣ If the badges & icons are supposed to be displayed in the cart, then there should be products in the cart already. 🛒 Cart Page: Trust Badge Not Showing - Ensure Products Are in the Cart: Trust badges on the cart page typically appear only when items are added to the cart.​ - Enable App Embeds: Verify that app embeds are enabled in your theme settings to allow badges to display correctly. 🛍️ Product Page: Trust Badge Not Showing - Verify Badge Placement: Ensure that the trust badge is correctly placed within your product page template, such as in the product-template.liquid file.​ - Check App Integration: If using a third-party app, confirm it's properly integrated and configured to show badges on product pages.​ - Test on Different Products: Sometimes, badges may be configured to display only on specific products. Test the badge visibility on various product pages.​ 💡 Tip: If the badge still doesn’t appear, try adding multiple products and refreshing the page. ✅ Step 8: Hard Refresh Your Page 9️⃣ If all else looks good, try to hard refresh the page. - Windows: Press Ctrl + Shift + R - Mac: Press Cmd + Shift + R ✅ Step 9: Check for Theme Styling Conflicts 🔟 Your Shopify theme's custom CSS might be overriding the trust badge. To check: - Open the Hoppy Trust Badge app, go to the Design tab, change the background or text color, then save and refresh your store. - If the issue persists, contact your theme developer or tech team to resolve CSS conflicts. ✅ Step 10: Still Not Visible? Contact Support! 🔵 If you’ve tried all the above steps and the trust badge is still not showing, reach out to Support for further assistance. - Hoppy Trust Badge app → Help & Support → Contact Support, or you can simply click the message box in the bottom right corner to contact support. - Provide screenshots & details for faster help. By following these steps, your Hoppy Trust Badge should be up and running in no time! 🚀

Last updated on Nov 05, 2025