catch-img

【Shopify使い方講座】BuyButton(購入ボタン)を利用して、LINEで直接商品を販売しよう。


目次[非表示]

  1. 1.設定に必要なもの
  2. 2.BUY Buttonアプリの設定
  3. 3.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に限らず様々な箇所で設定ができます。

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







 
トランスコスモスShopifyエンジニア
トランスコスモスShopifyエンジニア

トランスコスモスは日本で5社しかない最上位の「Shopifyプラスパートナー」です。最上位認定を堅持しECサイト制作・Shopifyアプリ開発を担うのが、トランスコスモスShopifyエンジニアチームです。Shopify構築によって得られた知見などをブログ記事にて発信していきます。

関連記事

【Instagram×Shopify】RiLi.tokyo渡邉様ご登壇!Shopify Meetup セミナーレポート

RiLi.tokyo渡邉様ご登壇!Shopify Meetup セミナーレポート

【Shopify(ショッピファイ)導入事例】食品・飲料系ECサイト・導入アプリ編

今回はShopify(ショッピファイ)で作成された食品、飲料関係のECサイトの事例をご紹介します。

【Shopify(ショッピファイ)導入事例】BtoB(卸・法人)ECサイト・導入アプリ編

今回はShopify(ショッピファイ)で作成されたBtoB(卸・法人向け)のECサイトの事例をご紹介します。

Shopify Payment(ショッピファイ ペイメント)の決済方法とその他特徴を解説。

初めてECサイトを運用する方でも理解できるよう、Shopifyで利用する決済サービスについて丁寧に解説していきます。

全36件中 1〜 4件を表示


【無料】セミナー動画視聴

本セミナーでは、トランスコスモスのEC支援に対する豊富な実績をもとに今後の変革に必要と考えられる「CRM、データドリブン、生産性向上」をテーマとした当社コンサルティングサービスについて、講義形式のセミナー開催

本セミナーでは、トランスコスモスのEC支援に対する豊富な実績をもとに今後の変革に必要と考えられる「CRM、データドリブン、生産性向上」をテーマとした当社コンサルティングサービスについて、講義形式のセミナー開催

【Shopify構築・運用セミナー】拡大するEC市場に不可欠なバックエンド業務の最新トレンド。EC事業を成功させるために『効率化に向けたバックエンド業務の最新トレンド』と題して、Shopify構築・運用に連携できるサービスをご紹介。

全12件中 1〜 3件を表示
お気軽に
お問い合わせください

Shopify(ショッピファイ) ECストア構築・運用代行

トランスコスモスは日本に5社しかない最上位の「Shopifyプラスパートナー」企業です

Shopify人気記事ランキング

 Tag(タグ)

 記事検索

 カテゴリー

 【無料】募集中セミナー

全5件中 1〜 4件を表示

 【無料】資料ダウンロード

Shopify操作マニュアルのダウンロード一覧

ショッピファイの管理画面の使い方を図解で開設した操作マニュアル資料をPDFにてダウンロード頂けます。

ECサービス紹介資料無料ダウンロード一覧

トランスコスモスのEC関連のサービス資料の一覧ページです。PDFにて概要のわかる資料を「無料」でダウンロードして頂けます。

セミナー発表資料の無料ダウンロード一覧

トランスコスモスのEC関連のWEBセミナーで使用した資料一覧ページです。PDFにてセミナーの内容がわかる資料を「無料」でダウンロードして頂けます。

全3件中 1〜 3件を表示

Shopify認定パートナー企業

トランスコスモスは日本に5社しかない最上位の「Shopifyプラスパートナー」です。
Shopifyでのサイト制作ならお任せください