> ## 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 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** 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, 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. ---