Shopifyストアに追従ボタンを表示できるアプリについて徹底解説｜ご利用ガイド
はじめに
今回の記事は、Shopify アプリである「シンプル追従ボタン｜お手軽フローティングボタン」の解説記事です。
Shopify とは、ざっくり説明すると、EC サイトを簡単に構築できるプラットフォームであり、Shopify アプリとはそのプラットフォームを拡張する機能のようなものです。WordPress のプラグインのようなもの、とご認識いただいて大丈夫です。
「シンプル追従ボタン｜お手軽フローティングボタン」は、ホーム、商品、コレクションなどあらゆるページに追従（固定）ボタンを埋め込むことができる Shopify アプリです。シンプルでコード不要のソリューションを求める店舗に最適で、直感的なスタイルと位置のコントロールにより、買い物客をシームレスに購入へと導きます。
ご興味のある方は、以下の URL からインストールしてみてください。
「シンプル追従ボタン｜お手軽フローティングボタン」でできること
「シンプル追従ボタン｜お手軽フローティングボタン」を使うと、以下のことが実現できます。
- ノーコードで追従（固定）ボタンを表示できる！
プログラミング知識は一切不要。管理画面から簡単な操作で、ページをスクロールしても常に表示される追従ボタンを設置できます。お客様の目に常に留まることで、アクションへの導線を強化します。
- 固定（追従）ボタンは複数の種類から選べる！
横並びボタン、縦並びボタン、画像ボタンなど、複数のボタンスタイルから選択可能。ストアのデザインや用途に合わせて最適なボタンタイプを選べます。
- あらゆるページに追従（固定）ボタンを表示できる！
ホームページ、商品ページ、コレクションページなど、ストアのあらゆるページに追従ボタンを設置可能。ページごとに異なるボタンを配置することもできます。
- カスタマイズ性が高い！
ボタンの色、サイズ、テキスト、アイコンを自由にカスタマイズ。ストアのブランドイメージに完璧にマッチするボタンを作成できます。
- 1 クリックでテーマに追加できる！
複雑な設定は不要。ワンクリックでお使いの Shopify テーマに追従ボタンを追加できます。すぐに効果を実感できます。
アプリのインストール
それでは、実際にアプリのインストールを行っていきましょう。
ストア管理画面左下の「設定」をクリックします。
ストアの管理画面の「アプリと販売チャネル」画面に表示されている「Shopify App Store」をクリックして、Shopify App Store に移動してください。
検索窓に、「シンプル追従ボタン｜お手軽フローティングボタン」と入力してください。
以下の画像のアプリをクリックしてください。
「インストール」ボタンをクリックして、ストアにアプリを追加しましょう。マーチャント用のアカウント（実際に物販などで運用しているアカウント）ですと、月額 $6.99 でご利用いただけます。インストール後、1 週間は無料でご利用いただけます。
「インストール」ボタンをクリックすると以下の画面に遷移します。右下の「インストール」ボタンをクリックして、アプリのインストールを行いましょう。
以下の管理画面が表示されます。
テーマに追従ボタンを追加する
テーマに追従ボタン機能を追加していきます。
自動追加
テーマに追従ボタンを自動追加します。
アプリ管理画面で追加したいテーマを選択し、「テーマに追加」ボタンをクリックしてください。
すると、テーマにアプリが自動追加されます。
問題なく追加されていることを確認し、右上の「保存する」をクリックしてください。
エラーで失敗する場合や別のページに追加したい場合、他タイプのボタンを追加したい場合は次の項に進んでください。
手動追加
自動追加がエラーで失敗する場合や別のページに追加したい場合、他タイプのボタンを追加したい場合は手動で追加していきます。
アプリ管理画面で追加したいテーマを選択し、「テーマをプレビュー」ボタンをクリックしてください。
するとテーマのカスタマイズ画面に遷移するので、追従ボタンを表示したいページに移動し、サイドバーの「セクションを追加」をクリックします。
すると、以下の画面が開くので、「アプリ」タブ内にある「追従横並びボタン」「追従縦並びボタン」「追従画像ボタン」のいずれかをクリックします。
アプリブロックが追加されていることを確認し、右上の「保存する」をクリックしてください。
以上で追従ボタン機能の追加が完了しました。
アプリブロックのカスタマイズ
アプリの設定が完了したら、アプリブロックをカスタマイズしていきましょう。
カスタマイズ画面を開き、ボタンを追加したページに遷移してください。
※ 画像ボタンを追加した場合は、画像を登録するまでは画面上に表示されません。
追従横並びボタンの設定
「追従横並びボタン」ではスマホ時にボタンが横並びで表示されます。
追従横並びボタンのカスタマイズをしていきます。
サイドバーの「追従横並びボタン｜シンプル追従ボタン」をクリックしてください。
以下のような設定項目が表示されます。
1. メインボタン設定
メインボタンの表示内容と外観を設定できます。
- メインボタンのラベル: ボタンに表示するテキスト
- メインボタンのリンク: リンク先の設定（商品、コレクション、ページ、外部 URL など）
- ボタンの背景色: ボタンの背景色（カラーピッカーまたは 16 進数カラーコードで設定）
- ボタンの文字色: ボタンのテキスト色
- ボタンの枠線の色: ボタンの枠線の色
2. サブボタン設定
サブボタンの表示内容と外観を設定できます。サブボタンが不要な場合は空欄にしてください。
- サブボタンのラベル: サブボタンに表示するテキスト
- サブボタンのリンク: サブボタンのリンク先
- サブボタンの背景色: サブボタンの背景色
- サブボタンの文字色: サブボタンのテキスト色
- サブボタンの枠線の色: サブボタンの枠線の色
3. 共通設定
ボタンのサイズ、スタイル、表示方法を設定できます。
- ボタンの幅（PC）: PC 表示時のボタンの幅（ピクセル単位）
- ボタンの高さ: ボタンの高さ（ピクセル単位）
- ボタン間の余白: メインボタンとサブボタンの間隔（ピクセル単位）
- 遅延表示リンクの開き方: 新しいタブで開くか、現在のタブで開くかを選択
- ボタンの文字サイズ（PC）: PC 表示時の文字サイズ
- ボタンの文字サイズ（スマホ）: スマホ表示時の文字サイズ
- ボタンの文字の太さ: 文字の太さ（400: 標準、700: 太字）
- ボタンの枠線の太さ: 枠線の太さ（ピクセル単位）
- ボタンの影の大きさ: ボタンの影の効果（なし、小、中、大から選択）
4. ボタンコンテナの設定
ボタン全体を囲むコンテナの設定ができます。
- コンテナの背景色: ボタン全体を囲むコンテナの背景色
- コンテナの内側上下の余白（PC）: PC 表示時の上下の内側余白
- コンテナの内側左右の余白（PC）: PC 表示時の左右の内側余白
- コンテナの影の大きさ: コンテナの影の効果
5. その他の設定
追加の CSS を指定して、より細かなデザインを実現できます。
追従縦並びボタンの設定
追従縦並びボタンのカスタマイズをしていきます。
「追従縦並びボタン」ではスマホ時にボタンが縦積みで表示されます。
サイドバーの「追従縦並びボタン｜シンプル追従ボタン」をクリックしてください。
以下のような設定項目が表示されます。
1. メインボタン設定
メインボタンの表示内容と外観を設定できます。
- メインボタンのラベル: ボタンに表示するテキスト
- メインボタンのリンク: リンク先の設定
- ボタンの背景色: ボタンの背景色
- ボタンの文字色: ボタンのテキスト色
- ボタンの枠線の色: ボタンの枠線の色
2. サブボタン設定
サブボタンの表示内容と外観を設定できます。サブボタンが不要な場合は空欄にしてください。
- サブボタンのラベル: サブボタンに表示するテキスト
- サブボタンのリンク: サブボタンのリンク先
- サブボタンの背景色: サブボタンの背景色
- サブボタンの文字色: サブボタンのテキスト色
- サブボタンの枠線の色: サブボタンの枠線の色
3. 共通設定
ボタンのサイズ、スタイル、表示方法を設定できます。
- ボタンの幅: ボタンの幅（ピクセル単位）
- ボタンの高さ: ボタンの高さ（ピクセル単位）
- ボタン間の余白: ボタン間の間隔（ピクセル単位）
- 遅延表示リンクの開き方: リンクの開き方を選択
- ボタンの文字サイズ（PC）: PC 表示時の文字サイズ
- ボタンの文字サイズ（スマホ）: スマホ表示時の文字サイズ
- ボタンの文字の太さ: 文字の太さ
- ボタンの枠線の太さ: 枠線の太さ
- ボタンの角の丸み（PC）: PC 表示時の角の丸み
- ボタンの影の大きさ: 影の効果
4. ボタンコンテナの設定
ボタン全体を囲むコンテナの設定ができます。
- コンテナの背景色: コンテナの背景色
- コンテナの内側上下の余白: 上下の内側余白
- コンテナの内側左右の余白: 左右の内側余白
- コンテナの影の大きさ: コンテナの影の効果
5. その他の設定
追加の CSS を指定できます。
追従画像ボタンの設定
追従画像ボタンのカスタマイズをしていきます。任意の画像をボタンとして表示させることができます。
サイドバーの「追従画像ボタン｜シンプル追従ボタン」をクリックしてください。
※ 画像ボタンを追加した場合、画像を設定するまで画面上に表示されません。
以下のような設定項目が表示されます。
1. 追従画像ボタン
- ボタンの画像（PC）: PC 表示時に使用する画像を選択
- ボタンの画像（スマホ）: スマホ表示時に使用する画像を選択
- 画像の幅（PC）: PC 表示時の画像の幅（スライダーまたは数値入力、デフォルト: 1000px）
- ボタンのリンク: クリック時のリンク先（All Products などから選択）
- 遅延表示リンクの開き方: 現在のタブで開く / 新しいタブで開く
2. ボタンコンテナの設定
- コンテナの背景色: コンテナの背景色（デフォルト: #FFFFFF）
- コンテナの内側上下の余白（PC）: PC 表示時の上下の内側余白（0px）
- コンテナの内側上下の余白（スマホ）: スマホ表示時の上下の内側余白（0px）
- コンテナの内側左右の余白（PC）: PC 表示時の左右の内側余白（0px）
- コンテナの内側左右の余白（スマホ）: スマホ表示時の左右の内側余白（0px）
- コンテナの影の大きさ: コンテナの影の効果（なし、小、中、大から選択）
3. その他の設定
- 追加の CSS: カスタマイズしたい要素のクラス名を確認して CSS を上書きしてください
おわりに
今回は「シンプル追従ボタン｜お手軽フローティングボタン」を紹介しました。
- ノーコードで簡単設置、プログラミング知識不要
- 多彩なボタンスタイルで、あらゆるデザインに対応
- 高いカスタマイズ性で、ブランドイメージを完璧に表現
- 月額 $6.99 で 1 週間の無料トライアルもご利用可能
常に表示される追従ボタンで、お客様の購買体験を向上させ、コンバージョン率を改善してみてください。
ここまでお読みいただき、誠にありがとうございました。
.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}
