> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/blocks/links/social-media.md).

# Social media

Social proof matters to online shoppers. Linking to active, well-followed profiles can build trust and give customers another way to engage with your brand beyond the storefront.

The **Social media** block displays icons or text links to your store's connected social media profiles, such as Instagram, Facebook, or TikTok. Use it in your header, footer, or any custom section where you want to direct customers to your social channels.

### 1. What you can do

* Show or hide individual platforms: Facebook, Instagram, TikTok, X, Snapchat, Pinterest, Tumblr, YouTube, and Vimeo
* Display links as icons or as text
* Control direction, alignment, width, and spacing between links
* Apply a custom style (classic or boxed) independent of your theme's default social styling
* Set different layout and size values for mobile

### 2. How to add a Social media block

You can add a **Social media** block to any [custom section](/arctos-theme/section-templates/section.md) or any compatible block, with no limit on how many you use in a single section.

{% stepper %}
{% step %}
**Click the section**

In the Theme Editor (Customize), click the section where you want to add social links.
{% endstep %}

{% step %}
**Add a block**

Click **Add block**.
{% endstep %}

{% step %}
**Select Social media**

Select **Social media** from the block list.
{% endstep %}

{% step %}
**Enable your platforms**

Turn on the platforms you want to display.
{% endstep %}

{% step %}
**Adjust the settings**

Control appearance and layout using the settings below.
{% endstep %}

{% step %}
**Save your changes**

Click **Save**.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
**Note:** To add or change a profile link, go to [Social media](/arctos-theme/theme-settings/social-media.md) settings.
{% endhint %}

### 3. Block settings

These settings let you control which platforms appear, how the links are arranged, and how they're styled.

<details>

<summary>Platforms</summary>

Turn on each platform you want to display. Each one only appears if you've also added the matching link in your Social media settings.

Supported platforms: Facebook, Instagram, TikTok, X, Snapchat, Pinterest, Tumblr, YouTube, and Vimeo.

</details>

<details>

<summary>Layout</summary>

Controls how the social links are sized and arranged within the block, including width, direction, alignment, and spacing. For a detailed explanation of how these layout settings work together, see [Inner content layout settings in a Group](https://ursus-ecom.gitbook.io/arctos-theme/blocks/links/pages/ABvGsQq7dgOOxcwgztbs#id-3.2.-inner-content-layout).

</details>

<details>

<summary>Style</summary>

By default, links inherit your theme's global social media styling. Turn on **Custom style** to override that for this block only (including **Shape**: **Sharp**, **Rounded**, or **Circle** for icons, and **Sharp**, **Rounded**, or **Pill** for text links).

{% hint style="info" %}
If you want to update the style globally, or learn more about social media styling, see [Social media settings](/arctos-theme/theme-settings/social-media.md).
{% endhint %}

</details>

<details>

<summary>Spacing</summary>

<table><thead><tr><th width="113.93359375">Setting</th><th width="192.8046875">Options</th><th width="376.23828125">When to use</th></tr></thead><tbody><tr><td><strong>Padding</strong></td><td>Custom value per side</td><td>Sets the spacing between the block and its surrounding edge.</td></tr><tr><td><strong>Margin</strong></td><td>Custom value per side</td><td>Sets the spacing around the block to separate it from neighboring blocks.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Set separate padding and margin values for mobile.</td></tr></tbody></table>

</details>