商品ページに追従ボタンを簡単に導入できるShopifyアプリ | リテリア Buy Button について解説
はじめに
今回の記事は Shopify アプリ「追従購入ボタンらくらく挿入｜リテリア Buy Button」の解説記事になります。
Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームの拡張機能のようなものです。WordPress の拡張機能のようなもの、と認識頂いて大丈夫です。
「追従購入ボタンらくらく挿入｜リテリア Buy Button」は、Shopify ストアの商品ページに追従する「今すぐ購入ボタン」を表示することができるアプリです。
追従購入ボタンを追加することで、商品ページをスクロールしてもすぐに商品を購入することができます。
ストアに追従購入ボタンを表示したいという方は、ぜひインストールしていただきたいです。
それでは、アプリを導入することでできること・インストール方法・使い方の解説を行なっていきます。
「追従購入ボタンらくらく挿入｜リテリア Buy Button」でできること
「追従購入ボタンらくらく挿入｜リテリア Buy Button」を使用すると、以下の画像のように自分の好きなデザインで商品ページに追従購入ボタンを追加することができます。
パソコン時
スマホ時
追従購入ボタンのボタンの色/配置/アニメーション、文字のサイズ/色、など豊富なカスタマイズを揃えているため、ストアにあったデザインにカスタマイズすることができます。
:::message alert
Online Store 2.0 非対応テーマ（Debut・Brooklyn・Narrative など）は、アプリの動作対象外となりますので、ご注意ください。
:::
アプリのインストール
それでは、実際にアプリのインストールを行なっていきましょう。
ストアの管理画面の「アプリ管理」画面に表示されている「ストアをカスタマイズ」をクリックして、Shopify app store に移動してください。
アプリストアで、「追従購入ボタンらくらく挿入｜リテリア Buy Button」を検索してください。
検索結果に「追従購入ボタンらくらく挿入｜リテリア Buy Button」が表示されますので、クリックしてアプリの紹介ページを開きます。
「アプリを追加する」ボタンをクリックして、自分の Shopify ストアにアプリを追加します。
Shopify パートナーアカウントをお持ちの方は、開発ストアにインストールを行うことで全ての機能を無料でご利用いただくことが可能です。
マーチャント用のアカウント（普通の Shopify アカウント）ですと、月額 $4.90 でご利用いただけます。また、7 日間の無料お試し期間をご利用いただいてアプリの挙動をご確認いただくことができます。
以下の画像のようなアプリのインストール確認画面が表示されます。
プライバシポリシーなどにご同意いただける場合は、「アプリをインストール」をボタンをクリックしてください。
アプリの請求画面が表示されます。「承認」ボタンをクリックすることで、アプリの管理画面にアクセスできるようになります。
請求が始まるタイミングは、承認してから 7 日後から取りますので、安心して承認ボタンをクリックしてください。7 日間以内にアンインストールした場合は、アプリの料金は一切請求されません。
:::message
開発ストアの場合は、請求画面は表示されません。マーチャントにストアのオーナー権を移行した後に請求が開始されます。
:::
以下のようなアプリの管理画面が表示されれば、インストールは完了です。
アプリの詳しい使い方
ここからは、アプリの詳しい使い方について説明していきます。
アプリの自動追加
「追従購入ボタンらくらく挿入｜リテリア Buy Button」には、アプリの自動追加機能があり、1 クリックでアプリをテーマに導入することができます。
自動インストールを行うとストアの商品ページに追従購入ボタンを表示するためのアプリブロックが挿入されます。
アプリの管理画面で「アプリをインストールするテーマを選択」でアプリを挿入するテーマを選択します。
テーマを選択したら、「有効化」ボタンをクリックすることで、自動インストールが行われます。
「プレビュー」ボタンをクリックすることで、アプリがインストールされたアプリの画面を開くことができます。
初期状態の追従購入ボタンが、ストアに表示されていればインストールは完了です。
アプリの手動追加
アプリの自動追加がうまくいかない場合などは、手動でアプリブロックを有効化してください。
管理画面の「オンラインストア」を開きます。アプリを導入したいテーマの「カスタマイズ」テーマエディタを開きます。
セクションを導入したい商品ページへ移動し、「セクションを追加」から「フローティング購入ボタン」を選択します。
初期状態の追従購入ボタンが商品ページに表示されていれば、手動でのアプリ追加は完了です。
アプリのカスタマイズ
アプリの設定項目について説明します。
テキストの設定
「ボタンのラベルテキスト」でボタンに表示する文言を指定できます。
テキストの色の設定
「テキストの色」でボタンのテキストの色を指定できます。
テキストのホバー時の色の設定
「テキストの色（ホバー時）」でボタンをホバーした時（カーソルを置いた時）のテキストの色を指定できます。
テキストのフォントサイズの調整
「テキストの大きさ」でボタンのテキストのフォントサイズ (px) を指定できます。
アイコン画像の設定
「アイコンの画像」でボタンに表示するアイコンを指定できます。
※画像を指定しない時（デフォルト）ではカートアイコンが適用されます。
選択なし
ボタンの色の設定
「ボタンの色」でボタンの背景色を指定できます。
ボタンのホバー時の色の設定
「ボタンの色（ホバー時）」でボタンをホバーした時の背景色を指定できます。
ボタンの枠線の大きさの設定
「ボタンの枠線の大きさ」でボタンの枠線の大きさ (px) を指定できます。
ボタンの枠線の丸みの設定
「ボタンの枠線の丸み」でボタンの枠線の丸み (px) を指定できます。
ボタンの枠線の色の設定
「ボタンの枠線の色」でボタンの枠線の色を指定できます。
ボタンのアニメーションの設定
「ホバー時に文字を表示」にチェックをつけるとボタンにアニメーション（ホバー時にテキストを表示）を適用ができます。
ボタンの内側の余白の設定
「ボタン内側の上下の余白」、「ボタン内側の左右の余白」でボタンの内側の余白 (px) を指定できます。
ボタンの位置の設定
「ブロック下部の余白（PC）」、「ブロック下部の余白（スマホ）」、「ブロック右の余白（PC）」、「ブロック右の余白（スマホ）」でボタンの位置を指定できます。
終わりに
今回は、「追従購入ボタンらくらく挿入｜リテリア Buy Button」の解説を行いました。
少しでも興味があれば、以下のリンクよりアプリをインストール頂けますと幸いです。
ここまでお付き合い頂き、誠にありがとうございました。
もし、うまく動かない、設定方法がわからない、さらに機能を追加して欲しい等ありましたら、下記よりお問い合わせいただけますと幸いです。
.png%3Fw%3D400&w=828&q=75)
.png%3Fw%3D400&w=828&q=75)
