TikTok Feed Widget for Magento 2

Magento 2 TikTok Feeds extension allows the store owner to show the feeds from the TikTok channel. Customers can view the videos from the TikTok without leaving the store. The store owner can add any number of TikTok feeds in a widget. This feature will make your e-commerce store more attractive and eye-catching. Thus helps to increase customer engagement to your online store.

• The admin can create a widget to display Tiktok videos.
• Set the number of TikTok feeds as a slider to display in the widget.
• Select the store view for TikTok Video Feed.
• The admin can specify on which page will widget be rendered at.
• A customer can view the TikTok feeds on the store itself.

To install this extension, please follow each and every step carefully as follows:

Step 1:

After extracting the downloaded zip file and you will get the src folder. Inside src folder, you will find the app folder, copy the app folder to the Magento2 root directory. Please view the below screenshot.

Step 2:

After the successful installation, you have to run these commands in the Magento2 root directory.

First command- php bin/magento setup:upgrade

Second Command – php bin/magento setup:di:compile

Third Command – php bin/magento setup:static-content:deploy

After running the commands, you need to flush the cache and reindex all from the Magento2 admin panel. Navigate through System>Cache Management. Click Flush Magento Cache button as shown below:

After the module installation, the admin needs to navigate Tiktok URL’s > Tiktok URL’s. The following TikTok feed page options will be available:

Enter URL: The admin needs to enter the TikTok URLs in this section which they want to display in a widget. Here, the admin can enter the multiple TikTok URLs and click on the save button to save the new Tiktok feed.

Note: TikTok URL should include the https:/ and must end before “?” as shown in below image:

Once the TikTok URL’s added this will display at the bottom of the configuration page in a list. The admin can delete any specific URL by using the checkbox.

Now, the admin can navigate to Content>Widgets and click to add widget button to add a new widget.

Now, a widget setting page will appear. Select widget type as TikTok Feed Widget then Select design theme and click on the continue button.

StoreFront Properties

Tapping on the continue button will bring you to storefront properties settings. Here the admin needs to fill below-required details for the TikTok feed:

Type and Design Theme: Both widget type and design theme option will show as inactive because these settings have been already configured in the previous step.

Widget Title: The admin needs to enter the widget title here.

Assign to store views: The admin needs to select store view from the list for this widget configuration.

Sort Order: Enter the sort order number for the widget instance.

Layout Updates: First admin needs to click on add layout button then following options will appear:

• Display on: The admin can specify on which page he wants to render the widgets.
• Container: Once the specified page is selected, a container box will display. Here the admin needs to select the container in which location will widget be rendered at.

Widget Options

On the next tab, the admin will get the Widget Option field. Here the admin will see all the TikTok URLs configured before. The admin can select desired video URL’s from here and choose the number of columns to be displayed on the storefront.

Note: The admin adds multiple TikTok feeds in a widget and a maximum of three feeds will display in a slider at a time. The customer needs to click of next arrow to watch other TikTok feeds in the widget.

On the front-end, this is how the TikTok Feed widget will appear. The users will be viewing the Tiktok videos from the store itself and slide next videos by using sliders as shown below in the screenshot:

Now, there is no need to visit the TikTok website anymore, because your customers can directly watch the TikTok videos on your Magento website.

TikTok video player is now embedded in the widget, will be showing to customers on the store page.

Thank you for viewing this blog. If you have any query or need more information, please visit HelpDesk System.