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エンジニア
トランスコスモスは日本で7社しかない最上位の「Shopifyプラスパートナー」です。最上位認定を堅持しShopifyでのECサイト制作・Shopifyアプリ開発を担うのが、トランスコスモスShopifyエンジニアチームです。Shopifyアプリの解説・紹介、Shopify基本的な使い方など制作や開発の過程で得られら知見をご紹介します。

Shopify(ショッピファイ)ストア構築・制作、
運用代行について問い合わせ

採用情報(求人)

Shopifyアプリ解説・紹介記事

ShopifyのECサイト制作ならトランスコスモス

トランスコスモスは、Shopifyのエンタープライズ版「Shopify Plus」の優れた成果を持つ提携企業として認定された、国内に7社しかいない(2021年9月時点)最上位の公式パートナーです。

Shopifyを使ったECサイト制作から、調査分析・戦略立案、WEB広告(SEM)、ECサイト制作、お客様サポート、受発注、フルフィルメントまで業務設計・運用代行いたします。

トランスコスモスのEC全領域を網羅するサービス

関連記事


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


EC関連サービス


数字で見るトランスコスモスの強み

お気軽に
お問い合わせください

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

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

SERVICE
ピックアップサービス

shopify専用倉庫スピードロジ

【週間ランキング】Shopify人気記事

 Tag(タグ)一覧

 記事検索

 記事カテゴリー

 【無料】募集中セミナー

正社員募集(求人)

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

Shopify認定パートナー企業

トランスコスモスは日本に7社しかない最上位の「Shopifyプラスパートナー」です。
Shopifyでのサイト制作ならお任せください
ECソリューションをお届けするサービスサイト

トランスコスモス株式会社
デジタルトランスフォーメーション総括 ECX本部

〒150-0011
東京都渋谷区東1-2-20
渋谷ファーストタワー
050-1751-7700(代表)


経済産業省が定める「DX認定事業者」
トランスコスモスは経済産業省が定める「DX認定事業者」

トランスプラス
トランスコスモスの全社的な情報を発信するオウンドメディア

cotra
コンタクト/コールセンターに携わる方への情報サイト
トランンスコスモスにShopify(ショッピファイ)をお任せください!
shopify構築・制作・運用