Social Share Buttons by F2 — Installation & Testing Guideline

Thank you for reviewing Social Share Buttons by F2.

This guide explains how to install, configure, and test the app’s social sharing and social follow features on a Shopify storefront.

The app provides three storefront blocks:

• Standard Share Buttons
• Floating Share Bar
• Social Follow Buttons

No manual theme-code editing, external account, or API key is required.

1. Install the App

1. Install Social Share Buttons by F2 on the development store.
2. Complete the Shopify app installation process.
3. Open the app from Shopify Admin → Apps if required.
4. No external account or third-party service is required for basic setup.

2. Add Standard Share Buttons

The Standard Share Buttons block allows customers to share the current storefront page through the enabled social platforms.

Steps

1. Go to Shopify Admin → Online Store → Themes.
2. Find the active theme.
3. Click Customize.
4. Open a supported storefront template, such as:
   • Product
   • Collection
   • Blog Post / Article
   • Page
5. Select the appropriate section or area where you want to display the buttons.
6. Click Add block.
7. Select Social Share Buttons by F2 – Standard Share Buttons.
8. Add the block to the page.
9. Configure the available settings.
10. Click Save.

3. Configure Standard Share Buttons

After adding the block, configure the available settings from the Shopify Theme Editor.

Depending on the available block settings, you can configure:

• Social networks
• Button layout
• Button size
• Spacing
• Colors
• Styling
• Other available display options

Enable only the social platforms you want customers to use.

For example:

Enabled:

• Facebook
• X
• WhatsApp
• Copy Link

Disabled:

• Any platform you do not want to display

Click Save after making changes.

4. Test Standard Share Buttons

After saving the block:

1. Open the storefront preview.
2. Navigate to the page where the block was added.
3. Confirm that the enabled social share buttons are visible.
4. Confirm that disabled platforms are not displayed.
5. Click each enabled sharing button.
6. Verify that the appropriate sharing interface or action opens.
7. If Copy Link is enabled, click it and verify that the current page link is copied correctly.

Test the block on different supported storefront pages when appropriate.

5. Add the Floating Share Bar

The Floating Share Bar provides a floating social sharing interface on supported storefront pages.

Steps

1. Open Shopify Admin → Online Store → Themes → Customize.
2. Open a supported storefront template.
3. Click Add block.
4. Select Social Share Buttons by F2 – Floating Share Bar.
5. Add the block to the template.
6. Configure the available display and styling settings.
7. Enable the social platforms you want to display.
8. Click Save.

6. Test the Floating Share Bar

1. Open the storefront preview.
2. Navigate to the page where the Floating Share Bar was added.
3. Confirm that the floating share bar is visible.
4. Check that the enabled social platforms are displayed.
5. Click each enabled sharing option.
6. Verify that the corresponding sharing action works correctly.
7. Check the appearance on both desktop and mobile screen sizes.

7. Add Social Follow Buttons

The Social Follow Buttons block allows merchants to display links to their social media profiles.

Steps

1. Go to Online Store → Themes → Customize.
2. Open a supported storefront template.
3. Click Add block.
4. Select Social Share Buttons by F2 – Social Follow Buttons.
5. Add the block to the desired location.
6. Enter the social profile URLs for the platforms you want to display.
7. Enable the desired social platforms.
8. Configure the available styling settings.
9. Click Save.

8. Test Social Follow Buttons

1. Open the storefront preview.
2. Locate the Social Follow Buttons block.
3. Confirm that the enabled social profile buttons are displayed.
4. Verify that disabled platforms are not displayed.
5. Click each enabled social profile button.
6. Confirm that it opens the configured social profile.
7. Verify that the entered profile URL is correct.

9. Test Supported Storefront Pages

Test the app blocks on the supported storefront templates where they are added.

Recommended pages include:

• Product pages
• Collection pages
• Blog posts / Articles
• Pages
• Other supported storefront pages

For each page, verify that the selected block displays correctly and does not interfere with the existing theme layout.

10. Desktop and Mobile Testing

Test the blocks on both desktop and mobile storefront views.

Verify:

• Buttons are visible.
• Buttons are properly aligned.
• Spacing is correct.
• Text/icons are not cut off.
• The Floating Share Bar does not obstruct important storefront content.
• Social Follow Buttons remain usable on smaller screens.
• Sharing actions can be accessed normally.

11. Configuration Changes

You can modify the block settings directly from the Shopify Theme Editor.

After changing any setting:

1. Update the required configuration.
2. Click Save.
3. Open the storefront preview.
4. Verify that the change has been applied correctly.

No manual Liquid, CSS, or JavaScript code editing is required.