Facebook Live | Website Live

2. SC (EN).png

4. 進階社群導購 (1).png

SHOPLINE introduces the "Website Live" feature, which allows customers to watch the livestream and place orders as they browse through the store website, thereby boosting the overall conversion rates.

*Notes:

  • This feature is only available for merchants with the “Advanced Social Commerce” module.
  • Currently, this feature is only available for Facebook Page livestream, SHOPLINE Live, and SHOPLINE Live synced to Facebook Page.

This article will cover the following:

 

1. App installation

Step 1

In the SHOPLINE Admin, go to [Social Commerce] > [SHOPLINE Live] and enter a livestream. Click the Website Live button on the top and select Go to Apps Store.

Screen Shot 2024-01-16 at 5.10.32 PM.png

 

Step 2

Click Free trial and follow the installation instructions.

Screen Shot 2024-01-16 at 5.13.26 PM.png

 

Step 3

Upon installation, go to [Apps] > [My Apps] and click Activate script next to Website Live.

*Note: Once the trial ends, please contact the Online Merchant Success Team for further inquiries.

Screen Shot 2024-01-16 at 5.15.04 PM.png

 

2. Enable Website Live

*Note: To enable the "Website Live" feature, please start the livestream in advance.

i. Facebook Page livestream

Once you start a livestream on the Facebook Page and connect to the livestream on the Admin, click the Website Live button on the top left.

  1. Switch on the "Website Live" toggle.
  2. Select the order method (non-editable once saved).
  3. Click Save.

Screen Shot 2024-01-16 at 5.26.42 PM.png

 

ii. SHOPLINE Live

Once you start a livestream on the SHOPLINE app, click the Website Live button on the top left.

  1. Switch on the "Website Live" toggle.
  2. Click Save.

*Note: Since you have selected the livestream mode (Keyword +1 or Live Catalog) while creating a SHOPLINE Live, it will apply the same setting and you do not need to customize it again.

Screen Shot 2024-01-16 at 5.30.22 PM.png

 

iii. SHOPLINE Live synced to Facebook Page

Select the "Sync live to Facebook Page" option when creating a livestream on the SHOPLINE app. Once you start the livestream, click the Website Live button on the top left.

  1. Switch on the "Website Live" toggle.
  2. Select the livestream channel interface to be displayed on the website: Facebook Page or SHOPLINE Live (non-editable once saved).
  3. Click Save.

*Note: Since you have selected the livestream mode (Keyword +1 or Live Catalog) while creating the livestream, it will apply the same setting and you do not need to customize it again.

Screen Shot 2024-01-16 at 5.16.49 PM.png

 

*Note: If the website live is already displaying an existing livestream on the storefront, a prompt will appear when you try to enable this feature.

Screen Shot 2024-01-16 at 5.29.55 PM.png

 

3. Website Live interface (Desktop version)

The Website Live feature will be displayed on the following pages in the storefront:

Screen Shot 2024-01-29 at 2.57.49 PM.png

 

i. Display the Facebook Page livestream interface on the storefront

With the following settings, the livestream interface from Facebook Page will be synced to website of your online store:

- "Website Live" is enabled for Facebook Page livestream
(The instructions below will be instructed based on this setting).
- "Website Live" is enabled for SHOPLINE Live synced to Facebook Page,
and the selected livestream channel is Facebook Page.

 

A. View the livestream

Customers can find the livestream window on the bottom right of the storefront.

Screen Shot 2024-01-25 at 12.12.52 PM.png

*Note: Upon entering the storefront, the system will take a while to load the livestream.

Screen Shot 2024-01-25 at 12.24.50 PM.png

 

Click on the livestream window to maximize and watch the livestream.

  • Click the icon on the top left to close or minimize the livestream window.
  • Click the 截圖 2023-12-04 下午7.06.57.png icon on the bottom to hide the icons on the page (number of viewers, share, chat, and cart). 
  • A recommended product (if any) will be displayed on the livestream. Click the "x" icon to close the recommended product block.

Screen Shot 2024-01-25 at 12.16.09 PM.png

*Note: Due to limitations from Facebook, the livestream defaults to muted when customers first enter. To enable sound, click the 截圖 2023-12-04 下午7.06.57.png icon to hide all SHOPLINE icons, then adjust it using the volume icon from Facebook.

Screen Shot 2024-01-25 at 12.16.59 PM.png

 

B. Add products to the cart

Customers must log in as a member to place an order. Click the "Leave comments" section and it will direct them to the store login page.

If you set the order method as "Keyword+1", customers can comment with the keyword to add the product to the cart.

Screen Shot 2024-01-25 at 12.20.04 PM.png

*Note: The Live Chat in Website Live will display comments customers leave on the Facebook platform, only if: 

  • "Website Live" is enabled for Facebook Page livestream, and the selected order mode is"Keyword +1".
  • "Website Live" is enabled for SHOPLINE Live synced to the Facebook Page,
    and the selected livestream channel is Facebook Page.

Screen Shot 2024-01-25 at 12.21.09 PM.png

 

If you select "Live Catalog" as the livestream mode, click the "cart" icon next to the product to add it to the cart. If the Live Products section is not displayed, click the Screen Shot 2024-01-25 at 2.02.33 PM.png icon to display it.

Screen Shot 2024-01-25 at 2.02.33 PM.png

 

C. Checkout

Click the 截圖 2023-12-04 下午8.04.11.png icon to open the cart. Upon confirmation, click Proceed to Checkout.

Screen Shot 2024-01-25 at 2.03.07 PM.png

 

You will be directed to the checkout page. Follow the subsequent steps to complete the checkout.

Screen Shot 2024-01-25 at 12.23.43 PM.png

 

D. Livestream playback

Once the livestream ends, the livestream playback will be available on the storefront unless you disable the "Website Live" feature in the Admin.

  • Keyword +1 livestream mode: Only supports livestream playback.
  • Live Catalog livestream mode: Supports placing orders from livestream playback.

Screen Shot 2024-01-25 at 12.27.17 PM.png

 

ii. Display SHOPLINE Live interface in the storefront

The following settings will display the interface from SHOPLINE Live:

"Website Live" is enabled for SHOPLINE Live
(The instructions below will be instructed based on this setting).
"Website Live" is enabled for SHOPLINE Live synced to Facebook Page,
and the selected livestream channel is SHOPLINE Live.

 

The following interface is pretty much the same as "i. Display the Facebook Page livestream interface on the storefront", only the system retrieves the livestream interface from a different channel.

A. View the livestream

Customers can find the livestream window on the bottom right of the storefront. Click the window to maximize and watch the livestream.

Screen Shot 2024-01-25 at 2.04.59 PM.png

 

B. Add products to the cart

Upon logging in as a member, if you set the order method as "Keyword+1", customers can comment with the keyword to add the product to the cart.

Screen Shot 2024-01-25 at 2.15.23 PM.png

 

If you select "Live Catalog" as the livestream mode, click the "cart" icon next to the product to add it to the cart. If the Live Products section is not displayed, click the Screen Shot 2024-01-25 at 2.02.33 PM.png icon to display it.

Screen Shot 2024-01-25 at 2.06.19 PM.png

 

C. Checkout 

Click the 截圖 2023-12-04 下午8.04.11.png icon to open the cart. Upon confirmation, click Proceed to Checkout.

You will be directed to the checkout page. Follow the subsequent steps to complete the checkout.Screen Shot 2024-01-25 at 2.03.07 PM.png

 

D. Livestream playback

Once the livestream ends, the livestream playback will be available on the storefront unless you disable the "Website Live" feature in the Admin.

  • Keyword +1 livestream mode: Only supports livestream playback.
  • Live Catalog livestream mode: Supports placing orders from livestream playback.

Screen Shot 2024-01-25 at 2.10.33 PM.png

 

4. Website Live interface (Mobile version)

*The following instructions are based on the IOS interface.

When customers tap on the Website Live window on the storefront, they need to enter full-screen mode to watch the livestream.

S__11583494_0.jpg

 

Tap the 截圖 2024-03-20 下午3.48.55.png icon to exit full-screen mode and watch the livestream in picture-in-picture mode.

S__11583497_0.jpg

 

Customers can access the live comments, add products to their cart, and more.

S__11583496_0.jpg

 

*Note: Android devices also support playing the livestream after exiting the full-screen mode. However, if they pause the video, they will need to enter full-screen mode to play the livestream again.

 

5. Disable Website Live

To disable the Website Live feature from the storefront, please proceed to the livestream backstage in the Admin, switch off the "Website Live" toggle, and click Save.

*Note: If you do not switch off the "Website Live" feature after the livestream ends, the customer can still view the playback on the storefront.

Screenshot 2024-01-30 at 4.03.30 PM.png

 

6. Notes

  • Once the "Website Live" feature is enabled for a Facebook Page livestream, the "Comment Management" and "Product Overview" tabs will have a "SHOPLINE Live" tab available, displaying statistics from the Website Live.
    Screen Shot 2024-01-25 at 2.20.59 PM.png

  • The following table outlines different livestream scenarios on the storefront:Screenshot 2024-01-30 at 3.56.48 PM.png
     
  • Customers using a mobile device to visit the storefront won't be able to view the ongoing livestream under the following two settings. They can only view it once the livestream ends:
    • "Website Live" enabled for Facebook Page livestream.
    • "Website Live" enabled for SHOPLINE Live synced to Facebook Page, and the selected livestream channel is Facebook Page.

 

Read more

 

 

 

 

 

Have more questions? Submit a request

Comments