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
- TikTok
- 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
- Go to Shopify Admin → Online Store → Themes
- Click Edit Theme on your live theme
- Open App Embeds from the sidebar
- Toggle Hoppy Trust Badges (Badges & Icons) → ON
- 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.
Updated on: 10/09/2026
Thank you!