Shopifyストアに追従するTikTokアイコンを表示できるアプリについて徹底解説｜ご利用ガイド
はじめに
今回の記事は、Shopify アプリである「シンプル TikTok 誘導｜お手軽追従 TikTok アイコン」の解説記事です。
Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームを拡張する機能のようなものです。WordPress のプラグインのようなもの、とご認識頂いて大丈夫です。
「シンプル TikTok 誘導｜お手軽追従 TikTok アイコン」は、シンプルに TikTok への誘導アイコンを追従表示できるアプリです。
アプリを利用することで、画面スクロールに追従する TikTok アイコンを設置し、訪問者を TikTok アカウントへ効果的に誘導できます。また、アイコン画像やリンク先 URL をノーコードで簡単にカスタマイズできるため、専門知識がない方でもスムーズに導入が可能です。
ご興味のある方は、以下の URL からインストールしてみてください。
シンプル TikTok 誘導｜お手軽追従 TikTok アイコン
「シンプル TikTok 誘導｜お手軽追従 TikTok アイコン」でできること
Shopify アプリである「シンプル TikTok 誘導｜お手軽追従 TikTok アイコン」は、以下のように店舗内のあらゆるページに追従型の TikTok アイコンを設置できるアプリです。
主な特徴は次のとおりです。
-
コード不要・簡単設置
インストールしてテーマに追加するだけで、すぐにストアに TikTok アイコンを設置できます。 -
追従型アイコンで常に表示
画面をスクロールしても常に表示される追従型アイコンで、訪問者を TikTok アカウントへ効果的に誘導します。 -
日本製アプリで安心の日本語対応
管理画面は全て日本語で、誰でも簡単に設定・運用できます。
これらを活用することで、SNS マーケティングを強化し、TikTok フォロワーの増加とストアへの再訪問率向上を同時に実現できます。
追従（固定）TikTok アイコンを設置できる
画面スクロールに追従する TikTok アイコンをストアに簡単に設置できます。訪問者がどのページを見ていても、常に TikTok への誘導が可能になります。
あらゆるページに TikTok アイコンを表示できる
商品ページ、コレクションページ、ブログページなど、ストア内のあらゆるページに TikTok アイコンを表示できます。ページを選ばず一貫した SNS 誘導が実現します。
ノーコードでカスタマイズできる
アイコン画像、リンク先 URL、表示位置、余白などをノーコードで設定できます。HTML や CSS の知識がなくても、カンタンにデザインを整えられます。
1 クリックでテーマに追加できる
アプリをインストール後、1 クリックでストアへの TikTok アイコンアプリブロックを追加できます。難しいコードの編集作業は一切必要ありません。
シンプル TikTok 誘導アプリのインストール
それでは、実際にアプリをインストールしていきましょう。
シンプル TikTok 誘導｜お手軽追従 TikTok アイコン
アプリの料金は、月額$3.99（1 週間の無料期間あり）となっております。
ストア管理画面左下の「設定」をクリックします。
「アプリと販売チャネル」をクリックし、「Shopify App Store」に移動してください。
検索窓に「シンプル TikTok 誘導｜お手軽追従 TikTok アイコン」と入力し、表示されたアプリをクリックします。
アプリの詳細画面から「インストール」ボタンをクリックしてストアにインストールします。こちらのアプリは月額$3.99 でご利用いただけます（1 週間の無料期間付き）。
「インストールボタン」をクリックすると、必要な権限が表示されますので確認して「インストール」を完了してください。
以下のアプリ管理画面が表示されます。
以上で、アプリのインストールは完了です。
シンプル TikTok 誘導のアプリブロックをテーマに追加
「シンプル TikTok 誘導｜お手軽追従 TikTok アイコン」を実際にテーマに組み込み、TikTok アイコンをストア上に表示できるように設定していきましょう。
自動でアプリをテーマに追加
アプリの管理画面を開いてください。
『テーマに TikTok アイコンを追加」の「テーマを選択」でアプリブロックを追加したいテーマを選択してください。
「テーマに追加」ボタンをクリックします。
テーマ編集画面が開き、アプリが有効化されます。
「保存する」をリックして、有効化は完了です。
以上で、テーマに自動的に TikTok 誘導アプリブロックが追加されます。
手動でアプリをテーマに追加
自動追加がうまくいかない場合は以下の手順で行ってください。
アプリ管理画面を開いて下さい。
「テーマを選択」でアプリを手動追加したいテーマを選択し、「テーマをプレビュー」ボタンをクリックします。
テーマエディタが開くので、サイドバーの埋め込みアプリアイコンをクリックします。
すると埋め込みアプリ一覧が表示されるので、「シンプル TikTok 誘導｜お手軽追従 TikTok アイコン」のアプリを有効化します。
アプリの有効化ができたら「保存する」ボタンをクリックしてください。
以上で、手動でのブロック追加は完了です。
シンプル TikTok 誘導アプリのカスタマイズ
テーマにアプリブロックを追加したら、カスタマイズ画面より「シンプル TikTok 誘導｜お手軽追従 TikTok アイコン」のカスタマイズを行えます。
カスタマイズ画面に移動し、サイドバーの埋め込みアプリアイコンをクリックします。
埋め込みアプリ一覧が表示されるので、「シンプル TikTok 誘導｜お手軽追従 TikTok アイコン」をクリックします。
すると、下記のような設定項目が表示されます。
URL 設定
「URL」には、誘導先の TikTok アカウントの URL を入力します。TikTok アカウントの URL を入力してください（例：https://www.tiktok.com/@your_username）。
アイコン設定
「アイコン画像」で表示するアイコンを選択できます。
デフォルトでは TikTok アイコンが選択されていますが、「画像を選択」ボタンから独自の画像をアップロードすることも可能です。
「アイコンサイズ」でアイコンのサイズをピクセル単位で調整できます。デフォルトは 64px ですが、お好みのサイズに変更可能です。
「アイコンサイズ（スマホ）」でスマートフォン表示時のアイコンサイズを別途設定できます。デフォルトは 48px です。
吹き出し設定
「吹き出しのテキスト」でアイコンにマウスオーバーした際に表示されるテキストを設定できます。デフォルトでは「Click here」となっています。
「吹き出しのテキストの色」では、テキストの色を#121212 などのカラーコードで指定できます。
「吹き出しの背景色」では、テキストの背景色を#EEEEEE などのカラーコードで指定できます。
「吹き出しのテキストの大きさ（PC）」「吹き出しのテキストの大きさ（スマホ）」で PC とスマホそれぞれのテキストサイズを設定できます。
「吹き出し左右の余白（PC）」「吹き出し左右の余白（スマホ）」「吹き出し上下の余白（PC）」「吹き出し上下の余白（スマホ）」で、テキストの余白をピクセル単位で調整できます。
「アイコンと吹き出しの余白（PC）」「アイコンと吹き出しの余白（スマホ）」で、アイコンとテキストの間隔を調整できます。
位置設定
「アイコンの位置」で左下、右下から選択できます。お好みの表示位置を選択してください。
「アイコンと画面右（左）側との距離（PC）」「アイコンと画面右（左）側との距離（スマホ）」で、画面端からの距離をピクセル単位で調整できます。
「アイコンと画面下側との距離（PC）」「アイコンと画面下側との距離（スマホ）」で、画面下部からの距離をピクセル単位で調整できます。
「アイコンの z-index」で他の要素との重なり順を設定できます。数値が大きいほど前面に表示されます。
その他の設定
「追加 CSS」で設定項目以外に CSS を使って見た目をカスタマイズすることができます。直接 CSS のコードを入力して下さい。クラス名などは検証を利用して取得してください。
おわりに
今回は「シンプル TikTok 誘導｜お手軽追従 TikTok アイコン」の解説を行いました。
- 画面スクロールに追従する TikTok アイコンで、訪問者を効果的に TikTok アカウントへ誘導
- アイコン画像やリンク先を自由にカスタマイズ可能で、ブランドに合わせた設定を実現
- 月額$3.99（1 週間の無料期間付き）で利用可能
SNS マーケティングを強化し、TikTok フォロワーの増加とストアへの再訪問率向上にぜひお役立てください。
ここまでお読みいただき、誠にありがとうございました。
シンプル TikTok 誘導｜お手軽追従 TikTok アイコン
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
