✅ Step 1: Open the Hoppy Trust Badge app.
1️⃣ Go to Shopify Admin → Apps → Hoppy Trust Badge app..
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 Appearance
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.
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! 🚀