Customizing Social Media Icons in Page Footers

1. Overview

Adding social media icons to your WeSupply page footers helps you strengthen your brand presence and engage with customers even after they’ve completed a purchase. By customizing these icons, you can direct users to your official social media accounts and maintain a consistent brand identity across all touchpoints.

This article will guide you through the steps to configure and customize social media icons within the Branding Pages section of your WeSupply admin panel.

2. Pre-requisites

Before you begin, ensure the following:

• You have Admin Access to your WeSupply account.
• You have active links to your official social media pages (e.g., Facebook, Instagram, Twitter/X, YouTube, TikTok, etc.).
• Your page templates (e.g., Tracking, Returns, Order Lookup) are already created and active under Branding → Pages.

3. Step-by-Step Instructions

Step 1: Upload Custom Icons

To use custom icons, you’ll need to upload them to a server or hosting service.

1. Create or Download Custom Icons:
   • Design or download social media icons in your preferred color and style.
2. Upload the Icons:
   • Upload the custom icon images to your own server or a hosting service (e.g., Shopify CDN, AWS, or Google Drive).
3. Get the Direct URL:
   • Copy the direct URL of each uploaded icon image.

Step 2: Replace the Icon Source Code

Once your custom icons are uploaded, update the source code for the social media icons in your page footer.

1. Locate the Icon Code:
   • Navigate to Settings → Branding → Pages, scroll down to the Page Blocks section and, on the Page Footer, select Edit Template.
     
   • Find the HTML code for the social media icons in your website’s footer section.
2. Replace the src Attribute:
   • Replace the src attribute of each icon with the direct URL of your custom icon image.
     • Example: <img style="display: block; border: 0;" src="https://yourdomain.com/cdn/shop/files/facebook-logo.png" width="23" height="23" alt="Facebook" />
3. Run HTML
4. Save and Publish:
   • Save your changes and publish the updated code to your live website.

Step 3: Test the Changes

After updating the code, test the changes to ensure the custom icons display correctly:

1. Refresh Your Website:
   • Open your website and navigate to the footer section.
2. Verify the Icons:
   • Confirm that the custom icons appear as expected and link to the correct social media pages.

4. Examples / Best Practices

• Keep URLs updated: If you ever rebrand or change your social media handle, remember to update the links here to prevent broken redirects.
• Use consistent handles: Keep your brand handle uniform across all platforms for easy customer recognition.
• Select relevant networks: Only include the social channels where your business is active and responsive.
• Preview your changes: Check how your icons display on both desktop and mobile before publishing.

(screenshot placeholder: example of responsive footer layout with icons)

5. Troubleshooting / FAQ

Q: My social media icons are not displaying on the footer.
A: Double-check that each platform field contains a full URL (starting with https://) and that the template was saved successfully.

Q: Can I change the icon colors or size?
A: The icons follow your WeSupply theme design automatically. For advanced customization, use the Global Custom CSS section under the Design tab of the same page template.

Q: Can I add additional platforms not listed (e.g., TikTok or Pinterest)?
A: If your platform isn’t listed, you can manually add a custom HTML link in the Footer Content section using your icon or brand imagery.

Q: Do I need to add the icons to every page?
A: Yes. Social media icons are configured per page template, so repeat the process for any other WeSupply pages where you’d like the icons to appear.

By customizing your social media icons, you create a cohesive, branded post-purchase experience that drives engagement and builds customer loyalty.