Materia Theme
  • What is Materia?
  • Getting Started
    • Download & Install
    • Theme License & Activation
    • Create Pages - Required
  • Theme Updates
  • Required Apps
  • Recommended Apps
  • Mega Menu
  • Store Settings - Required
  • Materia Theme Dashboard
  • Theme Settings
    • Logo
    • Favicon
    • Layout Settings
    • Typography
    • Color Schemes
    • Website Intro
  • Overall Zoom
  • Browser Tab Messages
  • Badges
  • Notification Bubble
  • Buttons Customization
  • Main Collection Filter
  • Product Card Settings
  • Product Variant Swatches
  • Search Behavior Settings
  • Wishlist
  • Cart Settings
  • Social Media
  • Preloader Settings
  • Currency Display Settings
  • Cookies
  • Speed Optimization
  • General Store Information
  • Terms and Conditions Settings
  • Theme Sections
    • Header
    • Announcement Bar Basic
    • Upper Navigation Bar
    • Announcement Bar Pro 1
    • Hero Pro 1
    • Hero Image 1
  • Hero Banner 2
  • Hero Product 2
  • Carousel Hero Slider
  • Slideshow Pro
  • Image
  • Video
  • Benefits Cards Pro 2
  • Benefits Pro
  • Image & VIdeo With Text
  • Image With Icons
  • Image With Benefits
  • Image With Text Pro
  • Page's global sections
    • Announcement Bars
    • Header
    • Footer
    • Mobile Navigation Bar
    • Back To Top Pro
  • Overlay Group
    • Cookie Consent Banner
    • Mobile Navigation Bar
    • Page Tag
    • Custom Color Swatches
    • Order Notification Pro 1
    • Image Banner Popup
    • Promotion Banner Pro
    • Back To Top Pro
  • Products & Collections
    • Product Page
      • Breadcrumbs
      • Product Snippets
        • Product – Trust Badges
        • Product - Upsell Addon
        • Product-Payment Badges #1
        • Product - Sold Social Proof
        • Product - Bundle Pro
        • Product – Text Timer
        • Product - Promo Banner
        • Product - Vertical Benefits
        • Product - Payment Badges #2
        • Ecomz – Discount Coupon
        • Product - Size Chart Image
        • Product - Circle Images
      • Product Information
      • Product Templates
    • Collection Page
      • Collection Template
  • Other Pages
    • 404 Page
    • Blogs
    • Customer Login
    • Cart & Checkout
  • FAQs
    • Missing images when install Materia
    • Why are some pages missing?
    • Theme translation
    • Change currency
    • Why Does the Desktop Preview Look Compressed in the Theme Editor?
    • How to change fonts?
Powered by GitBook
On this page
  • Social Media Icon Styling
  • Social Media Links

Social Media

PreviousCart SettingsNextPreloader Settings

Last updated 1 month ago

Social Media Icon Styling

Customize how your social icons look across desktop and mobile.

Social Media Icons – Default Color

Set the base color of the icons before hover. Example: #E1E1E1

Social Media Icons – Hover Color

Define the icon color on hover to add a visual cue. Example: #B4B4B4

Icon Size on Desktop

Adjust the size of the icons for desktop view (in pixels). Example: 35

Icon Size on Mobile

Set a slightly different size for mobile view if needed. Example: 37

Spacing Between Icons (px)

Control the horizontal spacing between each icon. Example: 8


Social Media Links

The icons are only shown if a link is entered into the corresponding field. If you leave the field empty or remove the text, the icon will not appear on your store.

Facebook Profile URL

Paste the full URL to your Facebook page. Example: https://facebook.com/yourbrand

Instagram Profile URL

Enter your Instagram profile link. Example: https://instagram.com/yourbrand

X (formerly Twitter) Profile URL

Paste your X (Twitter) profile link. Example: https://x.com/yourbrand

YouTube Channel URL

Add your YouTube channel link. Example: https://youtube.com/@yourbrand

TikTok Profile URL

Insert your TikTok profile link. Example: https://tiktok.com/@yourbrand

Pinterest Profile URL

Provide your Pinterest page link. Example: https://pinterest.com/yourbrand

LinkedIn Profile URL

Include your LinkedIn company or personal profile. Example: https://linkedin.com/company/yourbrand

WhatsApp Contact Number

Enter your full WhatsApp number (including country code). Example: +1234567890 Used for direct messaging via WhatsApp.


Summary

  • Icons are fully customizable in color, size, and spacing

  • Only icons with links entered will be shown

  • Removing a link or leaving it blank will hide the corresponding icon