> ## 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 Social Media Icons Learn how to add and configure Social Media Icons to improve brand visibility, customer engagement, and social connectivity across your storefront. --- ## **✅ Step 1: Open Social Media 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 Social Media Icons to appear. ### **📍 Available Placement Types** ### **Product Page** * Show social icons directly on product pages * Helps customers discover and connect with your brand while browsing products ### **Footer** * Display icons in the footer section of your website * Keeps social links accessible across all pages ### **Floating Icons** * Display floating social icons that remain visible while customers scroll * Usually positioned in screen corners for quick accessibility ### **Cart Drawer** * Show social icons inside the mini cart or slide-out cart * Encourages engagement during the shopping journey ### **Cart Page** * Display icons directly on the cart page before checkout * Useful for promoting communities, reviews, or social proof ### **Checkout Page** * Display icons during the Shopify checkout process * Helps strengthen brand trust before order completion * Available only for **Shopify Plus** merchants ### **Custom Position** * Manually place icons exactly where you want them * Positioning can be adjusted using the Shopify Theme Editor --- ## **✅ Step 3: Setup Social Media Icons** Inside the **Content** tab, locate the **Badge Type** dropdown and select: ### **Social & Brand 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 for store admin reference and is not visible to customers --- ## **✍️ Promotional Text (Optional)** You can optionally add promotional text above the social icons. ### **Available Fields** ### **Title** Use engaging headings like: * “Follow Our Journey” * “Connect With Us” * “Stay Social” ### **Subheading** Add a supporting message such as: * “Stay updated on daily deals” * “Tag us to get featured” * “Join our community” --- ## **🎨 Choose & Manage Icons** You can customize the icons shown inside the Social Media block. ### **Available Actions** * Select icons from the built-in Icon Library * Replace existing icons * Remove unwanted icons * Add multiple icons side-by-side ### **Supported Platforms Include** * Instagram * Facebook * TikTok * Pinterest * X (Twitter) * YouTube ### **Custom Uploads** You can also upload custom icons directly from your device. --- ## **➕ Add More Icons** Click **Add New Icon** to include additional social or brand icons inside the same block. 💡 This allows merchants to showcase multiple social platforms together. --- ## **🔗 Configure Call to Action (CTA)** Each Social Media Icon can include clickable behavior. ### **Default Behavior** By default, icons use: ### **Add Link to Whole Block** This makes the entire icon block clickable for a seamless visitor experience. --- ## **📌 Available CTA Types** ### **Custom Link (Most Common)** Paste direct links such as: * Facebook page URLs * Instagram profiles * WhatsApp chat links * Discord invites * External landing pages ### **Product Page** Redirect visitors directly to a specific Shopify product. ### **Collection Page** Redirect visitors to a specific product collection. ### **No Call to Action** Icons remain static and non-clickable. ### **Add Button with Link** Creates a separate clickable button beside or below the icons. --- ## **🛒 Product Linking** If Product Page CTA is selected: → Use **Select Product** to choose the product destination directly from your Shopify store. --- ## **🔄 Arrange Icons** You can manage icon layout easily. ### **Available Options** * 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 Social Media Icons. ### **Available Design Controls** ### **Visibility** Choose: * Desktop & Mobile * Desktop Only * Mobile Only ### **Icon Colors** Choose between: * Official brand colors * Custom colors matching your storefront theme ### **Typography & Sizes** Adjust: * Font sizes * Icon spacing * Layout appearance * Animations 💡 You can use subtle animations to make social icons feel more interactive without becoming distracting. --- ## **✅ Step 5: Configure Placement & Visibility** Navigate to the **Placement & Visibility** tab. ### **Available Controls** ### **Pages** Choose where the icons should appear: * All pages * Homepage only * Product pages * Collection pages ### **Devices** Control visibility for: * Desktop * Mobile * Both ### **Position** Set icon placement such as: * Bottom-left * Bottom-right * Inline positions ### **Schedule** Optionally configure: * Start dates * End dates * Temporary campaign visibility --- ## **✅ Step 6: Save & Publish** Once your Social Media Icons are fully configured: * Click **Save** * Then click **Publish** After publishing: → Visit your live storefront and confirm that all icons redirect properly to the intended destinations. --- ## **💡 Quick Troubleshooting Tip** If the Social Media 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, Social Media Icons help make your storefront feel more connected, trustworthy, and community-driven. With proper setup: ✅ Customers can quickly connect with your brand ✅ Social visibility becomes stronger ✅ Community engagement improves ✅ Brand trust feels more authentic ✅ Storefront navigation becomes more interactive ✅ Visitors can access important social platforms instantly Social Media Icons work best when combined with clean placement, balanced spacing, and relevant social destinations. ---