【Shopifyアプリ】BuyButton(購入ボタン）を利用して、LINEで直接商品を販売しよう。

Shopifyの無料アプリである「Buy Button」についてみなさんご存じでしょうか？

この「Buy Button」はShopify上で公開している商品をShopifyだけではなくWeb上に公開し、どこからでも購入ができるようになる機能です。

Shopifyの商品詳細ページへのリンクではなく、自社のHPやブログ、SNSから直接購入ページに遷移することができるようになります。

若年層のユーザーを中心に、SNSからの商品購入は年々増加しています。

以下の株式会社ジャストシステムのデータによると、その中でも特に「LINE」が最も購買に寄与しているとの結果が出ています。

これはShopifyで作ったサイトのみならず、LINEなどのSNSからの販売チャネルを増やすことで、売上げアップが期待できるということです。

最も商品購入につながっていると思うSNS

そこで今回はLINEのLIFF機能を利用し、LINEアプリ内からShopifyに登録してしている商品が購入できるようにしてみます。

設定に必要なもの

今回はBuy Buttonの設定方法に加えて、LINE上でBuy Buttonで動作できるように設定します。

設定に必要なものは以下2点です。

・LINE公式アカウント

・Shopifyアカウント

なお、今回の説明資料ではLINE公式アカウントおよびShopifyアカウントは既に開設済みとしてご説明します。

BUY Buttonアプリの設定

アプリのインストール

①Shopify管理画面のサイドメニュー「販売チャネル」の横に「＋」がありますので、クリックします。

②購入ボタン（英語表記の場合はBuy Button）の「＋」をクリックします。

③クリックするとアプリインストールが自動で始まり、上記の画面になればインストール完了です。

Buy Buttonの対象商品の設定

①インストール後のページで「購入ボタンを作成する」をクリックします。

②単品なら「商品購入ボタン」。複数商品なら「コレクション購入ボタン」のいずれかをクリックします。

※今回は単品として「商品購入ボタン」を選択します。

③　対象の商品を選択します。

④サイドバーでいろいろなカスタマイズが可能です。

商品クリック時のアクションやボタンの色、ボタンや商品名のレイアウトなどが変更できます。

⑤商品をカートに入れた時のプレビューです。問題なさそうであれば「次へ」ボタンをクリックします。

購入Buttonを有効にする

購入ボタンが生成されましたので、「コードをコピーする」ボタンクリックし、自社のWebサイトやブログ等に張り付ければ、Buy Buttonの設定が完了します。

リンクの作成方法

ボタンではなく、twitterやメルマガなどから直接商品の購入をさせたい場合は、checkout linkの設定をします。

リンクの設定方法は以下になります。

①　リンクの設定は商品管理＞対象の商品を選択＞その他の操作から「Create checkout link」を選択します。

②　「リンクをコピーする」をクリックするだけで完了します。

③　checkout linkで生成したURLから遷移した画面です。

LINE公式アカウントの設定

チャネル作成 ~ LIFFの設定

Messaging APIチャネルの設定

①　LINE developersにログインします。

②　プロバイダーリストから、新規チャネル作成をクリックし「Messaging API」を選択します。

③　必要箇所を入力して、チャネルの作成を行います。

LIFFの設定

①　作成したMessaging APIのチャネルの画面から「LIFF」をクリックします。

②　LIFFの設定画面から「追加ボタン」をクリックします。

③　必要箇所に入力します。エンドポイントURLは Buy Buttonで作成したときのリンクを設定します。LIFF設定後に「LIFF URL」が発行されます。これは後ほど使用します。

リッチメニューの設定

①　LINE Official Account Managerに遷移します。(チャネル基本設定＞基本情報のリンクから遷移できます。)

②　必要箇所の設定をします。すべて入力するとステータスが「オン」の状態で保存できます。

　　コンテンツ設定でタイプは「リンク」を選択し、URLはLIFF設定時に発行されたLIFF URLにしてください。

動作確認（LINEアプリ内）

①LINE Developersに戻り、Messaging APIのチャネル設定を開き、画面下部にあるLINEアプリへのQRコードを使えば、このLINE公式アカウントに友達登録することができます。

②QRコードを読み込み、友達登録すると設定したリッチメニューが表示されるので、タップします。

③LINEアプリ内でShopifyで設定した商品がカートに入りました。

④情報入力が進め、支払方法を選択すれば、注文完了します。

動作確認（Shopify注文管理）

①LIFF上で注文完了した注文番号「#1018」がShopifyの管理画面に反映されていることが確認できました。

今回はLINEを使って説明しましたが、LINEに限らず様々な箇所で設定ができます。

ぜひ、いろいろと試してみてください！