Social media icons

Easily add clickable social media icons to your site, control where they display based on device type, and encourage visitors to connect with your brand across multiple platforms while keeping your design clean and accessible.

Last updated 4 months ago

Helpful links

  1. https://help.shopify.com/en/manual/online-store/themes/customizing-themes/edit/theme-editor

  2. https://help.shopify.com/en/manual/online-store/themes/theme-structure/templates

  3. https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks

  4. https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks#metafields-and-dynamic-sources

Reference videos

Overview

The Social media icons block lets you display clickable icons for your social profiles in key sections of your site. By offering direct links to your external channels, you can increase brand engagement and help visitors connect with your presence on other platforms. Convenient placement of this block encourages users to interact with your brand beyond your primary storefront.

⚠️ Important: Well-placed Social media icons provide a seamless path for visitors to follow and engage with your brand across channels.

Key components and functionality

The Social media icons block is designed to be highly adaptable, making it easy to surface your social channels exactly where they’re most effective. Its visibility controls offer a streamlined experience that remains user-friendly on all devices.

Visibility settings

Visibility settings determine which visitors can see your social media icons, based on the device they’re using. This control helps you maintain a clean interface and personalize the experience for your customers.

You can adjust the Display visibility setting with these options:

  1. Do not hide — The icons will appear on both desktop and mobile devices.

    • Default setting

  2. Hide on desktop — The icons are shown only on mobile devices.

  3. Hide on mobile — The icons are shown only on desktop devices.

Customizing icon visibility ensures your design remains uncluttered while placing your social presence where it matters most.

💡 Tip: Fine-tune Display visibility to match your overall site design. For example, hide icons on mobile for simplicity, or display them everywhere for maximum reach.

Available in sections

Add the Social media icons block to these sections:

  1. Footer navigation

  2. Product information

Thoughtful placement ensures social links are always accessible without overpowering your page design.

Usage notes

Review how your Social media icons appear across different devices and background colors to maintain clarity and contrast. Always provide clear labels or alternative text for each icon to support accessibility and provide a better experience for people using assistive technologies.

Select only the most relevant social media platforms to display, helping to keep your design focused. Avoid overcrowding your storefront, and regularly check that icon links remain up to date and accurate.

📝 Note: Regularly revisit the location and visibility settings of your Social media icons block to keep your site both engaging and accessible for a wide range of visitors.