見出し画像

Shopify TikTokフィード読込アプリ「TokShop」

こんにちは。TCAディビジョンの森田です。
TikTokのタグフィードをShopifyに取り込んで表示できるアプリ「TokShop」を使ってみたのでご紹介します。

TokShopとは

Shopifyアプリストアより、TokShopをインストールします。
https://apps.shopify.com/tokshop

主な機能
・TikTokのハッシュタグ選択して該当投稿をアプリ内に取り込み
・公開承認機能
・商品へのリンク設定機能:Shopify内で表示する時に動画と商品関連付け表示可能
・Shopifyテーマに埋め込み機能:コード貼り付けだけで表示できる

価格
Shopify本体のプランと連動したプラン設定のようです。
14日間無料でお試しできます。
BASIC:月額9.99ドル
このプランは、基本的なShopifyプランに参加していて、ショッパブルTikTokフィードを開始したい起業家向けです。
PRO:月額29.99ドル
このプランは、Shopifyプランに参加していて、買い物可能なTikTokフィードを作成したい起業家向けです。
ADVANCED:月額59.99ドル
このプランは、ショッパブルTikTokフィードを作成し、大量のコンテンツをキュレートするShopify Advancedマーチャント向けです。
PLUS:月額99.99ドル
このプランは、ショッパブルTikTokフィードを作成し、大量のコンテンツをキュレートするShopify Plusのマーチャント向けです。

TokShop画面を見てみよう!

機能としてはシンプルなので、見た方が早いでしょう!

Awaiting Approval:承認待ち画面
フィード情報を取得するとここにリストアップされます。TokShop全般の仕様ですが、各投稿のイメージにhoverすると自動再生されます。知らないとちょっと焦ります・・・
Approve:承認 を押すと公開状態になります。
Add Links:商品を紐付けられます。複数商品設定可能
Reject:公開しないコンテンツは除外しておきます

画像1

画像4

Manage Content:コンテンツ管理画面
コンテンツを検索できます。
承認等はAwaiting Approval画面と同様にできます。

画像3

Embed:埋め込み画面
ストアフロント用プレビュー表示とShopifyテーマに埋め込み用コードの画面です。このコードをそのまま貼り付ければOKです。詳しくはこちら(英語)

画像2

TokShop埋め込んだストアフロント見てみよう!

PCで見た場合こんな表示になります。(セクションのサンプルコードを使っているので「Tokshopテスト」「CLICK HEREボタン」がありますが、TokShopコード貼り付けではTikTokフィードのみ表示されます)

画像6

フィードをクリックすると、モーダル(背景暗くなってポップアップ)表示され、紐付けした商品が表示されます。

画像7

スマホで見るとこんな感じです。
カルーセルで画像表示され、タップすると全画面表示で動画自動再生されます。縮小すると、下の方にTikTopフィードのコメントなどが表示されます。

画像5

使ってみて感じたことまとめ

・TikTokを読み込んでサイトに表示するのは非常に簡単にできる
・商品のリンク設定できるが、バグなのか商品ページへ現状飛べない...
・レイアウトの調整メニューがないのでそのままレイアウト利用になる

レイアウトは目をつむったとしても、商品ページへ飛べないのがもやっとポイントですね。。。今後の改善に期待しましょう!
それまではTikTokのフィードを表示するのみで利用するのが良さそうです。

この記事を書いた人:FRACTA TCAディビジョン森田(@lingling_yas)
検証のために3回くらいしか開いたことがTikTokを久々に開きました。正直良さがあまり分からない・・・。でも友達の子供の高校生が嬉しそうに見せてきたから流行っているのでしょう。きっと彼らは動画が普通、そこからネットで買うのが普通、という世界観で生きていくのでしょう。
とりあえずお小遣いでECで買って欲しい。

フラクタでは、ブランディングやEコマースに関する情報を発信しています。ぜひフォロー、スキをお願いいたします!