Shopify(ショッピファイ) 購入ボタン（Buy Button）をもう少し詳しく

以前の記事で、自社のブランドサイトやSNS記事などに Shopifyの購入ボタン（Buy Button）を設置する方法を紹介しておりますが、もう少し情報を補足します。

※ハックルベリー様からサブスクリプションでも利用できるとの情報提供をいただきましたので、「定期購買アプリとの連動」の章を追記いたしました。ありがとうございます！（2021-02-04）

画面フロー

Shopifyの購入ボタンの動作

Shopifyの購入ボタンはクリックしたときのアクションとして次の３通りがあります。

・カートに商品を追加する

バリエーション（規格）を持たない商品を直接Shopifyのカートに入れることができます。

・チェックアウトに移動する

商品をカートに追加するだけでなく、すぐに注文手続きに進むことができます。「今すぐ買う」ボタンとイメージしていただければ分かりやすいと思います。

・商品の詳細を開く

Shopifyの商品詳細をポップアップ表示します。基本的にはバリエーション（規格）がある商品のバリエーションを選択する目的で使用します。

画面フロー

前述の３つのアクションを簡単な画面フロー図にまとめると下図のようになります。下図において、各アクションは次のように表現しています。

・商品の詳細を見る→「見る」

・カートに商品を追加する→「カート」

・チェックアウトに移動する→「いますぐ買う」

Shopify Lite版

Shopify Liteとは

”Shopify Liteは、POS Liteを使用した対面販売や既存のウェブサイトへの購入ボタンの追加を検討しているマーチャント向けのプランです。Shopify Liteでは、レポートの確認やギフトカードの発行などの機能もご利用いただけます。ただし、Shopify Liteではネットショップを構築することはできません。” 　－https://www.shopify.jp/liteより引用

つまり、商品数の少ない専門店などは、わざわざネットショップを設置せずとも、ブランドサイトやSNSの記事に「購入ボタン」を設置して、 Shopifyの商品管理や注文管理などの管理機能だけを利用するような使い方ができます。

Buyボタンのカスタマイズ

洗練されたブランドサイトや映えるSNS記事には似合わない購入ボタンは置きたくないことでしょう。ここでは購入ボタンのデザインがどれほど自由度が高いかをご紹介します。

購入ボタンの種類

まず、購入ボタンのには商品購入ボタンとコレクション購入ボタンの2種類があります。商品購入ボタンは、そのボタンを設置したサイトで紹介している１商品を購入につなげるボタンです。また、コレクション購入ボタンはブランドを紹介しているサイトで、そのブランドに属する複数商品の中から商品を選んでいただくような使い方になります。

レイアウトスタイル

レイアウトスタイルは購入ボタンをどのように表示するかを指定することができます。

・フルビュー

フルビューは通常のECサイトの見栄えになります。

・クラシック

クラシックは必要最小限の表示を行います。ポップアップで詳細情報を表示させることもできます。

・ベーシック

ベーシックはボタンのみを表示します。これもポップアップで詳細情報を表示させることができます。

ボタンのスタイル

ボタンのサイズや色、キャプション（文字）のフォント種類、サイズ、色を変えることができます。フォントはShopifyが提供するフォントですが、標準では日本語フォントがないため必要に応じてセットアップする必要があります。

レイアウト

ボタンに表示するキャプション（文字）、数量指定の可否、商品名や価格などのフォント、サイズ、色を変更することができます。

ポップアップ

レイアウトスタイルで「クラシック」または「ベーシック」を選択したとき、ポップアップの詳細を編集することができます。

ショッピングカート

ショッピングカートの見出し、小計（商品金額合計）のラベル、追加情報（補足）、チェックアウトボタンのキャプション、カートが空の場合のメッセージ、ならびに背景色などを変更することができます。

高度な設定

高度な設定ではチェックアウト時の画面動作を変更することができます。

SNS向け購入ボタン

LINE、Twitter、InstagramなどのSNS用の購入ボタンはもっとシンプルに作成することができます。Shopifyの商品管理で商品詳細画面を開き、画面の右上方にある「その他の操作」から「Create checkout link」を選択。バリエーションのある商品の場合は対象とするバリエーションを選択するとチェックアウトのリンクが表示されるので「リンクをコピーする」ボタンでクリップボードにコピーし、SNS記事にペーストします。なお、このチェックアウトリンクに「Shop Pay」や Shopifyで発行したクーポンコードをつけると、なおさら便利でお得にショッピングを楽しんでいただけることでしょう。

Shop Pay

Shop Pay (https://shop.app/) はShopifyの決済方法の１つです。

※ Shop Payのトップページは英語サイトです。「Log in」をクリックすると Shop Payのログインおよびサインアップに進むことができます。

※「Download Shop」というモバイルアプリのダウンロードボタンがありますが、このモバイルアプリは日本に未対応ですのでご注意ください。（2021年10月現在）

Shop Payに住所やクレジットカード情報を登録しておくと、Shopifyストア（※）で注文したときに、より簡単に買い物ができるようになります。お客様が Shop Payを利用する際にはスマホに送信される SMSの6桁の認証コードを入力し、配送方法を選んで決済完了ボタンを押すだけです。

※Shopifyストアの決済方法として Shop Payが有効になっている必要があります。

定期購買アプリとの連携

定期購買商品の Buyボタンの作り方

定期購買アプリを活用すれば、サブスクリプション商品もBuyボタンを設定することができます。本記事での定期購買アプリの詳しい説明は省かさせていただきますが、アプリの「プラン設定」で定期購買のプランを作成して、Shopifyの「商品管理」メニューで定期購買に設定する商品を設定。そして、アプリの「プラン設定」に戻って、作成済みのプラングループ名を選択。

すると、「Buy Link の作成」ボタンが表示されるので、これをクリック。

「プラン」と「商品」を選択、さらに「数量」と「遷移先」を選んで「作成」ボタンをクリック。

すると Buyボタン用のリンクが生成されます。あとは、このリンクを LPサイトや SNSにペーストして、アンカー（<a href="">）タグなどでリンクを機能させます。

ボタンのデザインは、検索サイトで「css かっこいいボタン」などと検索すると参考になるサイトがいくつもございますので、そちらを参考になさってください。下のボタンは https://jajaaan.co.jp/css/button/ を参考にさせていただきました。

（2022-02-04追記）

購入ボタンの優れたところ／いまいちなところ

優れたところ

・ブランドサイトやSNSなどから直接注文に進めるため途中離脱を抑えることができます。

・Shopifyの全プランで導入可能で、追加費用がかかりません。

・HTML、CSS、JavaScriptの知識が無くても、設定画面で柔軟なデザインが可能です。

・HTML、CSS、JavaScriptの知識があればさらに自由にデザインできます。

いまいちなところ

・１商品１購入ボタンのため、複数商品を選択して一度にカートに入れるということができません。

・色違いなどのバリエーション違いの商品を注文したいときも同様です。

・サブスクリプションには対応していません。（2021-02-04抹消）

・購入ボタンを作成した商品、あるいは購入ボタンをどこに掲載したかを管理していないため、特に多数の商品を扱っているストアで適切に商品管理をしていないと、古いSNS記事から販売終了した商品の注文が舞い込んでくるということが起こりえます。

最後に

世の若者は SNSを起点に商品を目にしたり、気になる商品の情報も検索サイトではなく SNSで探ることが多くなっており、また、ハイブランドよりも自分に合った商品を好む傾向があるとも言われています。したがって、独自ブランドを展開しているお店、一品あるいは数品で勝負している専門店はオンラインストアを立てるよりもブランドサイトや SNS発信に力を入れていることでしょう。Shopifyの購入ボタンは、そんなお店の方にぜひお勧めしたいしくみです。