> ## 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 Icon Blocks Learn how to add and configure Icon Blocks to highlight your store’s key value propositions such as free shipping, secure checkout, easy returns, fast delivery, and more. Icon Blocks help improve customer confidence while making important storefront information more visually engaging. --- ## **✅ Step 1: Open Icon Blocks 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 Icon Blocks to appear. ### **📍 Available Placement Types** ### **Product Page** * Show Icon Blocks directly on product pages * Helps customers feel more confident before purchasing ### **Footer** * Display Icon Blocks in the footer section * Keeps trust messaging visible across the storefront ### **Floating Icons** * Display floating Icon Blocks while customers scroll * Usually positioned in screen corners for better visibility ### **Cart Drawer** * Show Icon Blocks inside the mini cart or slide-out cart * Reinforces trust during the cart experience ### **Cart Page** * Display Icon Blocks directly on the cart page before checkout * Helps reduce hesitation before purchasing ### **Checkout Page** * Display Icon Blocks during the Shopify checkout process * Helps reinforce confidence before order completion * Available only for **Shopify Plus** merchants ### **Custom Position** * Manually place Icon Blocks exactly where needed * Positioning can be customized using the Shopify Theme Editor --- ## **✅ Step 3: Setup Icon Blocks** Inside the **Content** tab, locate the **Badge Type** dropdown and select: ### **Icon Blocks** --- ## **📝 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** You can customize the messaging displayed alongside the icons. ### **Available Fields** ### **Title** Add the primary message for the Icon Block. ### **Example Titles** * Free Shipping * Secure Checkout * Easy Returns * Fast Delivery ### **Subheading** Add a supporting message below the title. ### **Example Subheadings** * No Extra Costs * 100% Secure Payments * Hassle-Free Returns * Ships Within 24 Hours --- ## **🎨 Choose & Manage Icons** You can customize the icons displayed inside the Icon Block. ### **Available Actions** * Select icons from the built-in Icon Library * Replace existing icons * Remove unwanted icons * Add multiple icons side-by-side ### **Supported Examples Include** * Visa * Mastercard * PayPal * Stripe * Shipping icons * Security icons --- ## **📤 Upload Custom Icons** Besides the built-in Icon Library, you can also upload custom icons directly from your device. This allows more flexibility for stores using custom branding or unique visual assets. --- ## **➕ Add More Icons** Click **Add New Icon** to include additional icons inside the same Icon Block. 💡 Multiple icons can be displayed together for stronger trust reinforcement. --- ## **🔗 Configure Call to Action (CTA)** Each Icon Block can optionally include clickable behavior. ### **Available CTA Types** ### **No Call to Action** Icons remain static and non-clickable. This is useful when the icons are only meant for visual trust-building. --- ### **Add Button with Link** Creates a separate clickable button beside or below the icons. This is useful when directing customers toward: * FAQ pages * Shipping policies * Return policies * Security information pages --- ### **Add Link to Whole Block** Makes the entire Icon Block clickable. This creates a more seamless visitor experience by allowing customers to click anywhere inside the block. 💡 This works especially well for linking customers to trust, shipping, or policy 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 * Shipping Policy * External pages --- ## **🛒 Product Linking** If Product Page linking is selected: → Use **Select Product** to choose the destination product directly from your Shopify store. --- ## **🔄 Arrange Icons** You can easily manage icon layout and arrangement. ### **Available Actions** * Add multiple icons * Remove individual icons * Rearrange icon combinations for cleaner layouts ⚠️ Too many icons together may affect spacing on smaller mobile screens. --- ## **✅ Step 4: Customize Design Settings** Open the **Design** tab to style your Icon Blocks. ### **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 Icon Blocks 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 Icon Blocks 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 Icon Blocks are fully configured: * Click **Save** * Then click **Publish** After publishing: → Visit your storefront and verify that the Icon Blocks appear correctly in the selected location. --- ## **💡 Quick Troubleshooting Tip** If the Icon Blocks 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, Icon Blocks help make your storefront feel more trustworthy, informative, and conversion-focused. With proper setup: ✅ Customers gain more confidence before purchasing ✅ Important store policies become more visible ✅ Trust messaging feels cleaner and more professional ✅ Storefront engagement improves ✅ Checkout hesitation can be reduced ✅ Brand credibility becomes stronger Icon Blocks work best when combined with clean layouts, balanced spacing, and meaningful trust-focused messaging. ---