Everything you need to display and customize social media icons in your store — from adding your social links in Shopify to adjusting icon size, spacing, and alignment in the Theme Editor.
Social icons are small, clickable icons that link to your brand's social media profiles. They give visitors a quick way to find and follow you on platforms like Instagram, Facebook, YouTube, TikTok, and more. Displaying social icons on your store helps build trust, grow your audience, and keep customers connected with your brand beyond your website.
In the Boardwalk theme, the Social Icons block displays a row of circular icon buttons that link to your social media accounts. The block pulls its links from your global theme settings, so you only need to enter your social URLs once — every Social Icons block on your store will update automatically. The block supports 13 platforms and gives you control over icon size, spacing, alignment, and padding.
Follow these steps to add social media icons to your store using the Boardwalk theme.
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize. In the Theme Editor,
click the gear icon at the bottom of the
left sidebar to open Theme settings.
Look for the Social media section and
paste the full URL for each platform you want to display
(e.g., https://instagram.com/yourstore).
Note: Social media links are managed in Theme settings, not inside the block itself. The Social Icons block reads these global links and displays an icon for every platform that has a URL filled in. If you leave a platform's URL blank, its icon won't appear.
Use the page selector dropdown at the top center of the Theme Editor to navigate to the page where you want to display social icons — for example, your homepage, a landing page, or the footer.
In the Theme Editor sidebar, click Add block inside the section where you want the icons to appear, then choose Social icons from the block list. A row of icons will appear for each social platform you configured in Step 1.
Click the Social icons block in the sidebar to open its settings. Adjust the icon size, spacing between icons, top and bottom padding, and alignment to match your design.
Click Save in the Theme Editor. Preview your page to confirm the icons are displaying correctly and linking to the right social profiles.
The Social Icons block supports the following 13 platforms. Each platform will display an icon automatically when its URL is filled in under Theme settings → Social media.
Links to your Facebook page or profile.
Links to your Instagram profile.
Links to your YouTube channel.
Links to your TikTok profile.
Links to your X profile.
Links to your Threads profile.
Links to your LinkedIn company page or personal profile.
Links to your Bluesky profile.
Links to your Snapchat profile.
Links to your Pinterest profile or board.
Links to your Tumblr blog.
Links to your Vimeo channel or profile.
A generic link icon for any additional social platform or website not listed above.
These settings are available when you click the Social Icons block in the Theme Editor sidebar. They control the appearance and spacing of the icon row.
Controls how large each social media icon appears inside its circular button. Range: 16px to 28px.
Sets the spacing between each icon button. Range: 8px to 32px.
Adds extra space above the icon row. Range: 0px to 200px. On mobile, this value is reduced to 75% of the desktop value automatically.
Adds extra space below the icon row. Range: 0px to 200px. On mobile, this value is reduced to 75% of the desktop value automatically.
The Social Icons block comes with features that work automatically — no apps or custom code needed.
Social media URLs are stored in your theme settings and shared across your entire store. When you update a link in one place, every Social Icons block updates automatically.
Icons only appear for platforms that have a URL filled in. If you leave a platform blank, no icon is displayed — and the entire block is hidden when no social links are configured at all.
The icon color and border automatically adapt to the color scheme of the section or card the block is placed in. Icons use the foreground color from the active color scheme, so they look right on both light and dark backgrounds without manual adjustments.
Each icon is displayed inside a circular button with a subtle border. On hover, the button fades slightly to provide visual feedback to visitors.
On mobile screens, the icon row automatically centers itself and takes the full available width. Padding values are scaled down to 75% on smaller screens for a balanced look.
If you have many social icons and they don't all fit in a single row (especially on mobile), they will automatically wrap to a second line rather than overflowing or being cut off.
Keep these details in mind when working with the Social Icons block.
Social media URLs are not configured inside the block itself. You must add them in Theme settings → Social media. The block simply reads whatever links you've entered there.
Icons always appear in a fixed order: Facebook, Instagram, YouTube, TikTok, X, Threads, LinkedIn, Bluesky, Snapchat, Pinterest, Tumblr, Vimeo, and Other. This order cannot be rearranged.
Always enter the complete URL for each platform,
including https://. For example, use
https://www.instagram.com/yourstore
instead of just @yourstore.
All social icon links open in a new browser tab so visitors don't leave your store when they click through to a social profile.
https://. Also confirm that you clicked
Save in the Theme Editor after adding
the link. If the link is saved to the wrong field (for
example, pasting an Instagram URL into the Facebook
field), the wrong icon will display — double-check that
each URL is in the correct field.