Shopifyストアに追従するX(Twitter)アイコンを表示できるアプリについて徹底解説|ご利用ガイド

はじめに
今回の記事は、Shopifyアプリである「シンプル X 誘導|お手軽追従 X(Twitter)アイコン」の解説記事です。
Shopifyとは、ざっくり説明するとECサイトを簡単に構築することができるプラットフォームであり、Shopifyアプリとはそのプラットフォームを拡張する機能のようなものです。WordPressのプラグインのようなもの、とご認識頂いて大丈夫です。
「シンプル X 誘導|お手軽追従 X(Twitter)アイコン」は、画面に追従するX(Twitter)へのリンクボタンを簡単に設置できるアプリです。
アプリを利用することで、スクロールに合わせて常に表示されるXアイコンを設置し、SNSフォロワーの増加やX経由での再訪問を促進できます。また、オリジナルの画像をボタンとして設定できるため、ノーコードでブランドの世界観に合わせたカスタマイズが可能です。
ご興味のある方は、以下のURLからインストールしてみてください。
シンプル X 誘導|お手軽追従 X(Twitter)アイコン
「シンプル X 誘導|お手軽追従 X(Twitter)アイコン」でできること
Shopifyアプリである「シンプル X 誘導|お手軽追従 X(Twitter)アイコン」は、以下のようにストアの画面に常時表示されるX(Twitter)アイコンを設置できるアプリです。
主な特徴は次のとおりです。
-
コード不要・簡単設置
インストールしてテーマに追加するだけで、すぐにストアにXアイコンを表示できます。 -
画面に追従する固定表示
スクロールしても常に表示されるため、いつでもX(Twitter)への誘導が可能です。 -
オリジナル画像の設定
ブランドに合わせたオリジナルの画像をボタンとして使用でき、世界観を統一できます。
これらを活用することで、SNSマーケティングを強化し、フォロワーの増加やストアの認知度向上につなげることができます。
追従(固定)X アイコンを設置できる
画面をスクロールしても常に同じ位置に表示される追従型のXアイコンを設置できます。訪問者がいつでもワンクリックでX(Twitter)にアクセスできるようになります。
あらゆるページに X アイコンを表示できる
トップページはもちろん、商品ページ、コレクションページ、ブログページなど、ストア内のあらゆるページにXアイコンを表示できます。
ノーコードでカスタマイズできる
アイコンの位置、サイズ、余白などをノーコードで設定できます。また、X(Twitter)の公式アイコンだけでなく、オリジナルの画像をアップロードして使用することも可能です。
1クリックでテーマに追加できる
アプリをインストール後、1クリックでストアへのXアイコンアプリブロックを追加できます。難しいコードの編集作業は一切必要ありません。
シンプル X 誘導アプリのインストール
それでは、実際にアプリをインストールしていきましょう。
シンプル X 誘導|お手軽追従 X(Twitter)アイコン
アプリの料金は、月額 $3.99(1週間の無料お試し期間あり)となっております。
ストア管理画面左下の「設定」をクリックします。
「アプリと販売チャネル」をクリックし、「Shopify App Store」に移動してください。
検索窓に「シンプル X 誘導|お手軽追従 X(Twitter)アイコン」と入力し、表示されたアプリをクリックします。
アプリの詳細画面から「インストール」ボタンをクリックしてストアにインストールします。こちらのアプリは月額 $3.99 で、1週間の無料お試し期間付きでご利用いただけます。
「インストールボタン」をクリックすると、必要な権限が表示されますので確認して「インストール」を完了してください。
以下のアプリ管理画面が表示されます。
以上で、アプリのインストールは完了です。
シンプル X 誘導のアプリブロックをテーマに追加
「シンプル X 誘導|お手軽追従 X(Twitter)アイコン」を実際にテーマに組み込み、Xアイコンをストア上に表示できるように設定していきましょう。
自動でアプリをテーマに追加
アプリの管理画面を開いてください。
『テーマに X アイコンを追加」の「テーマを選択」でアプリブロックを追加したいテーマを選択してください。
「テーマに追加」ボタンをクリックします。
テーマ編集画面が開き、アプリが有効化されます。
「保存する」をクリックして、有効化は完了です。
以上で、テーマで自動的に X 誘導アプリブロックが有効化されます。
手動でアプリをテーマに追加
自動追加がうまくいかない場合は以下の手順で手動追加してください。
アプリ管理画面を開いてください。
「テーマを選択」でアプリを手動追加したいテーマを選択し、「テーマをプレビュー」ボタンをクリックします。
テーマエディタが開くので、サイドバーの埋め込みアプリアイコンをクリックします。
埋め込みアプリが一覧表示されるので、「シンプル X 誘導|お手軽追従 X(Twitter)アイコン」を有効化してください。
アプリを有効化できたら、「保存する」ボタンをクリックしてください。
以上で、手動での有効化は完了です。
シンプル X 誘導アプリのカスタマイズ
テーマにアプリブロックを追加したら、テーマエディタで「シンプル X 誘導|お手軽追従 X(Twitter)アイコン」のカスタマイズを行えます。
テーマのカスタマイズ画面を開き、サイドバーの埋め込みアプリアイコンをクリックします。
埋め込みアプリが一覧表示されるので、「シンプル X 誘導|お手軽追従 X(Twitter)アイコン」をクリックします。
下記のような設定項目が表示されます。
URL設定
「URL」には、リンク先となるX(Twitter)アカウントのURLを入力します。XアカウントのURLなど、アイコンをクリックした際に開きたいURLを設定してください。
アイコン設定
アイコンの画像を選択・カスタマイズできます。
- アイコン画像:「選択」ボタンから画像を選択するか、無料画像を探すことができます。Xアイコン以外の画像を使用することも可能で、ストアの世界観に合わせた画像を選択してください。
- アイコンサイズ:PC時のアイコンサイズを指定できます。
- アイコンサイズ(スマホ):モバイルのアイコンサイズを指定できます。
吹き出し設定
アイコン横に表示される吹き出しのテキストを設定できます。
- 吹き出しのテキスト:ユーザーにクリックを促すテキストを入力できます。
- 吹き出しのテキストサイズ:12px(デフォルト)から調整できます。
- 吹き出しの背景色:#EEEEEE(デフォルト)から変更できます。
- 吹き出しの枠線の色:#CCCCCC(デフォルト)から変更できます。
- 吹き出しのテキストの太さ:16px(デフォルト)から調整できます。
- 吹き出しのテキストの文字太さ(スマホ):16px(デフォルト)から調整できます。
- 吹き出し左右の余白:24px(デフォルト)から調整できます。
- 吹き出し左右の余白(スマホ):16px(デフォルト)から調整できます。
- 吹き出し上下の余白(PC):12px(デフォルト)から調整できます。
- 吹き出し上下の余白(スマホ):8px(デフォルト)から調整できます。
- アイコンと吹き出しの距離(PC):8px(デフォルト)から調整できます。
- アイコンと吹き出しの距離(スマホ):8px(デフォルト)から調整できます。
位置設定
アイコンの表示位置を詳細に設定できます。
- アイコンの位置:「左下」「右下」から選択できます。画面のどの隅に表示するかを設定します。
- アイコンと画面右端の距離(PC):24px(デフォルト)から調整できます。
- アイコンと画面右端の距離(スマホ):24px(デフォルト)から調整できます。
- アイコンと画面下端の距離(PC):24px(デフォルト)から調整できます。
- アイコンと画面下端の距離(スマホ):24px(デフォルト)から調整できます。
- アイコンのz-index:99(デフォルト)から調整できます。他の要素との重なり順序を設定できます。数値が大きいほど前面に表示されます。
その他の設定
「追加CSS」で設定項目以外にCSSを使って見た目をカスタマイズすることができます。特定領域でのスタイルのカスタマイズなど高度な設定が可能です。アプリが管理する要素にスタイルを適用したい場合は、こちらに記述してください。
おわりに
今回は「シンプル X 誘導|お手軽追従 X(Twitter)アイコン」の解説を行いました。
- 画面に追従する固定表示でいつでもX(Twitter)への誘導が可能
- オリジナル画像の設定でブランドの世界観を統一
- 月額 $3.99(1週間の無料お試し期間付き)で利用可能
SNSマーケティングを強化し、フォロワーの増加やストアの認知度向上にぜひお役立てください。
ここまでお読みいただき、誠にありがとうございました。