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:
- App installation
- Enable Website Live
- Website Live interface (Desktop version)
- Website Live interface (Mobile version)
- Disable Website Live
- Website Live supports the Event feature
- Announcement
- Notes
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.
Step 2
Click Free trial and follow the installation instructions.
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.
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.
- Switch on the "Website Live" toggle.
- Select the order method (non-editable once saved).
- Click Save.
ii. SHOPLINE Live
Once you start a livestream on the SHOPLINE app, click the Website Live button on the top left.
- Switch on the "Website Live" toggle.
- 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.
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.
- Switch on the "Website Live" toggle.
- Select the livestream channel interface to be displayed on the website: Facebook Page or SHOPLINE Live (non-editable once saved).
- 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.
*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.
3. Website Live interface (Desktop version)
The Website Live feature will be displayed on the following pages in the storefront:
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.
*Note: Upon entering the storefront, the system will take a while to load the livestream.
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.
- A recommended product (if any) will be displayed on the livestream. Click the "x" icon to close the recommended product block.
- Click the icon on the bottom right to hide the icons on the page (live chat, cart, etc.), and the recommended product block.
*Notes:
- Due to limitations from Facebook, the livestream defaults to muted when customers first enter. To enable sound, hover the cursor on the livestream interface and then adjust it using the volume icon from Facebook.
- Click the "share" icon to share the livestream.
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.
*Notes: 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.
If you select "Live Catalog" as the livestream mode, click the icon to open the Live Products page. Then, click the "cart" icon next to the product to add it to the cart.
C. Checkout
Click the 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.
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.
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.
- Click the icon on the top left to close or minimize the livestream window.
- A recommended product (if any) will be displayed on the livestream. Click the "x" icon to close the recommended product block.
- Click the icon on the bottom right to hide the icons on the page (live chat, cart, volume, etc.), and the recommended product block.
*Note: Click the icon to adjust the resolution.
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.
If you select "Live Catalog" as the livestream mode, click the icon to open the Live Products page. Then, click the "cart" icon next to the product to add it to the cart.
C. Checkout
Click the 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.
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.
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, tap play and enter full-screen mode to watch the livestream.
Tap the icon to exit full-screen mode and watch the livestream in picture-in-picture mode. Customers can access the live comments, add products to their cart, and more.
*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.
6. Website Live supports the Event feature
If you enable the "Website Live" feature for the Facebook Page livestream, the viewers from Website Live will be able to participate in the event.
*Note: The following instructions will be illustrated using the "Lucky Draw" event.
Step 1
Click the Event button.
Step 2
Click Add and select Lucky Draw.
Step 3
Enter the event title, keyword, event quota, event time. Then, set up the advanced setting and prize content.
*Note: Viewers in Website Live are unable to tag friends and like a live post. Therefore, if these two options are selected, the system will automatically consider customers to have fulfilled these conditions.
Step 4
Then, you can set up the event message. Upon completion, click Create.
Customers participate in event (Merchant's interface)
Follow the steps similar to starting a Facebook livestream and enable the Website Live feature. Then, click the Go icon next to the event to begin.
i. Customers comment the event keyword
ii. Customers win the lucky draw
Customers participate in event (Customer's interface)
i. Customers comment the event keyword
ii. Customers win the lucky draw
Customers who won in the event can click the icon to check the winning information (prize, limited voucher, etc.).
Customers can go to the Storefront > [Member Center] > [Messages] to view the winning message.
7. Announcement
You can create an announcement for SHOPLINE Live and SHOPLINE Live synced to Facebook Group Live. If you enable the "Website Live" feature, viewers on your website can also view the announcement.
Step 1
Click the Announcement button on the bottom right.
*Note: You need to start the livestream before creating the announcement.
Step 2
Enter the announcement and click Send.
*Note: If you select the Facebook interface for the Website Live, a tip will appear in the lower section to guide viewers on how to watch Facebook Live on your website using mobile devices.
Upon completion, the announcement will appear on the Website Live. You can click the announcement to view the complete message.
You can remove the announcement during the livestream.
You can also create a new announcement.
8. 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.
- The following table outlines different livestream scenarios on the storefront:
Read more
- Facebook Live | Integrating Facebook Live and Setting
- SHOPLINE Live | Keyword +1
- SHOPLINE Live | Livestream Event
Comments