Skip to content

Social media icons

Show your configured social profiles with flexible styles, selective network display, and simple visibility controls.

This block shows links to the social profiles already set up in your theme settings. For a broader overview of how theme blocks are organized, see Shopify documentation on sections and blocks. Use it where customers expect quick brand touchpoints, such as in a header, footer, contact area, or support-focused content.

The main settings control how the social links look and which networks appear.

Choose an Icon style based on the role of the block in your layout. Branded is easiest to recognize at a glance, Solid gives you a cleaner and more consistent visual style, and Text only works well when you want the links to feel more like navigation than decoration.

By default, Show all displays every social network that has been configured in your theme settings. Turn this off when you want this block to show only selected networks, such as keeping a header minimal while showing a fuller list in the footer.

When Show all is disabled, you can choose individual networks for this block. This is the best option when space is limited or when different areas of your store should highlight different channels.

This block only shows networks that already have account details added in your theme settings. Enabling a network here does not create the social link by itself.

These settings let this block override your broader theme color choices when needed. They are most useful when the block sits on a different background or needs stronger contrast than the surrounding content.

Icon color affects the Solid style only, and Text color affects the Text only style only. If a color change does not appear, first check that it matches the style you selected.

See the shared color settings reference: Company XYZ documentation on color settings.

Use visibility controls to decide whether this block appears on desktop, mobile, or both. This is helpful when you want social links in one layout but not another, especially in compact mobile designs.

Hide the block only when the same links are available elsewhere or when the placement feels repetitive. That helps keep the layout clean without making your social links harder to find.

See the shared visibility settings reference: Company XYZ documentation on visibility settings.

  1. Match the style to the placement. Use branded icons for quick recognition, solid icons for a tidier look, and text only for navigation-like areas.
  2. Trim the network list when needed. Turn off Show all in tighter spaces so the block highlights only the channels customers are most likely to use.
  3. Override colors with a purpose. Change icon or text colors when you need better contrast or clearer emphasis in a specific area.
  4. Check account setup first. If a network should appear but does not, confirm that its social profile has already been added in your theme settings.
  5. Use responsive visibility carefully. Hide the block on mobile or desktop only when another placement already covers the same need.
  6. Review both viewports. Desktop and mobile controls can lead to different spacing, alignment, visibility, and media behavior, so check both layouts before publishing.