Social Media
The Social Media Block displays social media links with icons on the thank you page, encouraging customers to connect with your brand across various platforms.
Overview#
Block Name: Social Media
Category: RedFox Thank You
Purpose: Display social media links with customizable icons
Available In: Pro
What It Does#
This block shows:
- Social media platform icons with clickable links
- Optional platform name labels below or beside icons
- Support for 25+ social media platforms
- Three icon styles: Filled, Outline, and Minimal
- Optional brand colors for each platform
When to Use#
Use This Block When:
- Encouraging customers to follow your brand on social media after purchase
- Building social media presence through the thank you page
- Providing easy access to your social channels
- Adding social proof and connectivity to the post-checkout experience
Supported Platforms#
The block supports the following platforms:
Facebook, Twitter/X, Instagram, LinkedIn, YouTube, Pinterest, TikTok, Snapchat, WhatsApp, Telegram, Discord, Reddit, GitHub, Dribbble, Behance, Medium, Tumblr, Vimeo, Twitch, Spotify, SoundCloud, Email, Website, RSS
Block Settings#
Social Media Platforms#
Manage your social media links:
- Platform List: A sortable list of all configured platforms
- Add Platform: Add a new social media platform to the list
- For each platform:
- Platform: Select the social media platform from the dropdown
- URL: Enter the link to your social media profile
- Custom Label: Override the default platform name with a custom label
- Enabled: Toggle to show or hide individual platforms
Platforms can be reordered by dragging and dropping in the list.
Display Options#
Control the visual presentation:
- Show Title: Toggle to display or hide the section title (default: on)
- Show Labels: Toggle to display platform name labels alongside icons
- Open in New Tab: Toggle to open social media links in a new browser tab
- Icon Style: Choose the icon visual style
- Filled — Solid background with icon
- Outline — Border outline with transparent background
- Minimal — Icon only, no background or border
Style Settings#
All style controls are found in the Styles tab of the block inspector panel.
Layout#
Control the arrangement of social media icons:
- Alignment: Horizontal alignment — Left, Center, or Right
- Gap: Spacing between social media icons
- Label Position: Position of labels relative to icons — Bottom or Right (only visible when Show Labels is enabled)
- Label Gap: Spacing between the icon and its label (only visible when Show Labels is enabled)
Responsive Support: Supported.
Title Text#
Control the section title styling:
- Font Family (Google Fonts) — Access to 1,000+ Google Fonts
- Font Weight — Light (300) to Extra Bold (800)
- Text Color — Set distinct color for the title
- Font Size — Adjust title size for better hierarchy
- Line Height — Control spacing for title text
- Letter Spacing — Fine-tune spacing between characters (-10 to 10)
- Word Spacing — Adjust spacing between words (-10 to 50)
- Font Style — Italic, Underline, Strikethrough
- Text Transform — Uppercase, Lowercase, Capitalize, or None
- Text Alignment — Left, Center, or Right
Responsive Support: Supported.
Note: Only visible when the title is enabled in Title Settings.
Label Text#
Control the platform label text styling (only visible when Show Labels is enabled):
- Font Family (Google Fonts) — Access to 1,000+ Google Fonts
- Font Weight — Light (300) to Extra Bold (800)
- Text Color — Set color for platform labels
- Font Size — Adjust label size
- Line Height — Control spacing for label text
- Letter Spacing — Fine-tune spacing between characters (-10 to 10)
- Word Spacing — Adjust spacing between words (-10 to 50)
- Font Style — Italic, Underline, Strikethrough
- Text Transform — Uppercase, Lowercase, Capitalize, or None
Responsive Support: Supported.
Icon Style#
Customize the social media icon appearance:
Sizing:
- Width: Icon container width
- Height: Icon container height
Colors:
- Use Brand Colors: Toggle to use each platform’s official brand colors (default: on)
When brand colors are disabled, custom color controls appear:
- Icon Color — Custom icon color
- Icon Hover Color — Icon color on hover
- Background Color — Icon container background
- Background Hover Color — Background color on hover
Spacing:
- Padding — Internal spacing within the icon container
- Margin — External spacing around the icon container
Border:
- Border Width — Set width in pixels or other units
- Border Style — Solid, Dashed, Dotted, and more
- Border Color — Full color picker
- Individual Sides — Set borders per side or all at once
- Border Radius — Round corners individually or all at once
Box Shadow:
- Color — Shadow color with full color picker
- Horizontal Offset — Range: -100 to 100
- Vertical Offset — Range: -100 to 100
- Blur — Range: 0 to 200
- Spread — Range: -100 to 100
- Inset — Toggle for inner shadow
Responsive Support: Supported.
Background#
Customize the block background:
- Background Color — Color picker with custom hex values
- Background Image — Upload or select from media library with size, position, repeat, and attachment options
- Background Gradient — Linear and radial gradients with presets
- Background Overlay — Color or gradient overlay with blend modes
Responsive Support: Supported.
Spacing#
Control block spacing:
- Padding: Internal space (inside the block) — Top, Right, Bottom, Left
- Margin: External space (around the block) — Top, Right, Bottom, Left
Features: Linked/unlinked sides, presets, box model visualization, auto values.
Responsive Support: Supported.
Sizing#
Control block dimensions with precision.
- Width / Height
- Min Width / Min Height
- Max Width / Max Height
Responsive Support: Supported.
Border#
Add and customize borders.
- Border Width — Set width in pixels or other units
- Border Style — Solid, Dashed, Dotted, and more
- Border Color — Full color picker
- Individual Sides — Set borders per side or all at once
- Border Radius — Round corners individually or all at once
Responsive Support: Supported.
Box Shadow#
Add depth and dimension.
- Color — Shadow color with full color picker
- Horizontal Offset — Range: -100 to 100 (default: 0px)
- Vertical Offset — Range: -100 to 100 (default: 2px)
- Blur — Range: 0 to 200 (default: 4px)
- Spread — Range: -100 to 100 (default: 0px)
- Inset — Toggle for inner shadow
Set a shadow color to get started — sensible defaults are applied automatically.
Responsive Support: Supported.