💳 How to Setup Payments Icons
Learn how to add and customize Payment Icons to improve checkout confidence and reassure customers about secure payment methods available on your store.
Payment Icons help make the storefront feel more trustworthy while clearly displaying supported payment providers.
✅ Step 1: Open Payment Icons 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 Payment Icons to appear.
📍 Available Placement Types
Product Page
- Show Payment Icons directly on product pages
- Helps customers feel more confident before purchasing
Footer
- Display Payment Icons in the footer section
- Keeps payment trust messaging visible across the storefront
Floating Icons
- Display floating Payment Icons while customers scroll
- Usually positioned in screen corners for better visibility
Cart Drawer
- Show Payment Icons inside the mini cart or slide-out cart
- Reinforces trust during the shopping journey
Cart Page
- Display Payment Icons directly on the cart page before checkout
- Helps reduce hesitation before purchasing
Checkout Page
- Display Payment Icons during the Shopify checkout process
- Helps reinforce payment confidence before order completion
- Available only for Shopify Plus merchants
Custom Position
- Manually place Payment Icons exactly where needed
- Positioning can be customized using the Shopify Theme Editor
✅ Step 3: Setup Payment Icons
Inside the Content tab, locate the Badge Type dropdown and select:
Payment Icons
📝 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 (Optional)
You can optionally customize the messaging displayed above the Payment Icons.
Title
Add a heading that reassures customers about payment safety.
Example Titles
- Secure Checkout
- Trusted Payments
- Safe Payment Methods
Subheading
Add supporting information below the title.
Example Subheadings
- 100% secure transactions
- No hidden payment fees
- Trusted by thousands of customers
🎨 Choose & Manage Icons
You can customize the payment methods displayed inside the Payment Icons block.
Available Actions
- Select icons from the built-in Icon Library
- Replace existing icons
- Remove unwanted icons
- Upload custom icons from your device
Supported Examples Include
- Visa
- Mastercard
- PayPal
- Stripe
- Apple Pay
- Google Pay
💡 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 payment-related graphics directly from your device.
This is useful for:
- Region-specific payment providers
- Custom branding assets
- Alternative payment solutions
⚠️ Uploaded custom images may retain their original colors depending on the image format.
➕ Add More Icons
Click Add New Icon to include additional payment methods inside the same block.
💡 Multiple icons help customers quickly recognize supported payment providers.
🔗 Configure Call to Action (CTA)
Payment Icons can optionally include clickable behavior.
Available CTA Types
No Call to Action
The Payment Icons remain static and non-clickable.
This is ideal when the icons are only meant for visual trust-building.
Add Button with Link
Creates a separate clickable button beside or below the Payment Icons.
This is useful when directing customers toward:
- Payment FAQs
- Security information pages
- Shipping policies
- Refund policies
Add Link to Whole Block
Makes the entire Payment Icons block clickable.
This creates a more seamless visitor experience by allowing customers to click anywhere inside the block.
💡 This works especially well for linking visitors to payment security or trust-related 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
- Payment policies
- 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 Payment Icons.
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 Payment Icons 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 Payment Icons 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 Payment Icons are fully configured:
- Click Save
- Then click Publish
After publishing:
→ Visit your storefront and verify that the Payment Icons appear correctly in the selected location.
💡 Quick Troubleshooting Tip
If the Payment Icons do not appear on your storefront after publishing:
Your Shopify theme may be blocking the app embed.
To Fix This
- Go to Shopify Admin → Online Store → Themes
- Click Edit Theme on your live theme
- Open App Embeds from the sidebar
- Toggle Hoppy Trust Badges → ON
- Click Save
✅ Final Result
Once configured successfully, Payment Icons help make your storefront feel more secure, trustworthy, and conversion-focused.
With proper setup:
✅ Customers feel more confident during checkout
✅ Supported payment methods become more visible
✅ Payment trust messaging feels more professional
✅ Checkout hesitation can be reduced
✅ Store credibility becomes stronger
✅ Overall storefront trust improves
Payment Icons work best when combined with clean layouts, balanced spacing, and recognizable payment provider branding.
Updated on: 03/06/2026
Thank you!