ブランド運営をしている事業者の多くは、ブランドサイトやブログ、SNSなど、複数の媒体で商品やブランドの魅力を発信しています。発信の幅が広がる一方で、「どの媒体からもECサイトへ誘導しなければ購入までつながらない」「遷移が増えるほど離脱が起きやすい」といった悩みもよく耳にします。
Shopifyの「Buy Button channel」は、既存サイトやSNS上に購入ボタンを設置し、Shopify内の商品を販売できる公式の販売チャネルです。Buy Button channelを活用することで、媒体間を移動することなく、閲覧中のページから直接商品の購入が可能になります。
この記事では、Buy Button channelの仕組みや導入手順、活用方法を整理して解説します。
「Buy Button channel」とは？
画像出典：Buy Button channel｜Shopifyアプリストア
Buy Button channelは、Shopifyが提供する公式の販売チャネルの一つです。Shopifyの商品を外部サイトやブログに埋め込み、商品を販売することが可能です。
購入ボタンをクリックするとカートに商品が追加され、Shopifyのチェックアウトページに遷移し決済を完了することができます。自社のブログやブランドサイトなどを、そのままECチャネルとして活用できる点が特徴です。
Buy Button channelの主な機能
Buy Button channelの主な機能やできることを紹介します。
製品またはコレクションの購入ボタンを設置できる
Buy Button channelでは、Shopify上の商品データから、「個別商品」または「コレクション単位」で購入ボタンを生成できます。
生成されたコードをコピーし、HTMLとして外部サイトに貼り付けるだけで販売導線を追加できます。
特定商品に特化したランディングページや、複数商品を紹介するブログ記事など、利用場面に応じて柔軟に設置できる点が魅力です。
外部サイト・ブログ・SNSでの活用
Buy Button channelで生成した購入ボタンは、WordPressのようにHTMLを埋め込める環境であれば設置可能です。 さらにチェックアウトに直接遷移できるチェックアウトリンクを活用することで、SNSの投稿・メッセージからShopifyのチェックアウトページへ直接誘導することもできます。Shopifyストア単体の集客に依存せず、既存の読者やフォロワーへ向けて商品を販売可能です。
また、WordPressで作成したサイトでは、Shopifyアプリ「Sell on WordPress」でも商品を表示・販売できます。
以下の記事でWordPressとの連携方法を紹介しているので、併せて確認してください。
ボタンの見た目や動作設定がカスタマイズ可能
Buy Buttonでは、ボタンの色・文字・サイズ・レイアウトを簡単に変更できます。また、ボタンをクリック後に「カートに追加する」か「直接チェックアウトページに遷移する」かを選択できるため、サイトのデザインやUXに合わせた導線設計が可能です。
導入手順：ShopifyでBuy Button channelを設定する
ここからはBuy Button channelをインストールし、購入ボタンを作成する手順について解説します。
1.アプリインストール
アプリストアから「Buy Button channel」をインストールします。
画像出典：Buy Button channel｜Shopifyアプリストア
インストール後は販売チャネルに「購入ボタン」が追加され、機能が利用できるようになります。
2.購入ボタンのカスタマイズ
販売チャネル > 「購入ボタン」から「購入ボタンを作成」をクリックします。
作成するボタンの対象となる商品、またはコレクションを選択します。
カスタマイズの画面では、レイアウトやクリック時のアクションを指定できます。
購入ボタンのカスタマイズを全て完了した後は、購入ボタンを有効にするページから「コードをコピーする」をクリックすると、生成されたコードをコピーできます。コピーしたコードを、商品を挿入したい場所に貼り付けるだけで販売が可能になります。Shopify以外のドメインのサイトにも貼り付けが可能です。
なお、作成した購入ボタンや生成画面の設定は保存されず、ページを離脱すると一から作成し直しになります。カスタマイズ後は、忘れずにコードをコピーしてください。
購入ボタン設置イメージ：Shopifyブログ
購入ボタンをより細かくカスタマイズしたい場合は、Shopify Buy SDK（JavaScriptライブラリ）を利用することで、独自のUIを実装することが可能です。
例えば、マウスを置いたときに画像をホバー表示させたり、商品名や商品説明の表示位置を変更したりと、さまざまなカスタマイズが可能です。
デフォルトの購入ボタン
画像がホバーするカスタマイズをした購入ボタン
購入ボタン経由のCVの確認方法
購入ボタン経由で発生した売上は、Shopify管理画面の「注文管理」および「分析」ページから確認できます。チャネル名は「Buy Button」で集計されるため、オンラインストアやPOSなど、他チャネルとの比較が可能です。
ただし、Buy Buttonから直接作成された購入ボタンのコードはリダイレクト先にパラメータを追加できないため、CV計測目的でパラメータをURLに付与できません。
パラメータを付与したい場合は、商品詳細から「Create checkout link」をクリックし、チェックアウトリンクを作成してください。
商品管理 > 商品詳細ページ > その他の操作から「Create checkout link」を選択
(パラメータを付与したチェックアウトリンク：サンプルURL)
https://devdev-8886.myshopify.com/cart/43835546042391:1?channel=buy_button&utm_source=facebook&utm_medium=social&utm_campaign=product_promo&utm_content=buy_button
Buy Buttonの注意点
Buy Button ChannelはShopify以外のサイトにも購入ボタンを設置することができる便利な機能ですが、使用には制限があったり注意点があったりします。
決済・通貨対応の制限
Buy Buttonで利用できる通貨および支払い方法は、Shopify Paymentsで設定されている内容に限られます。一部の外部決済やローカル決済（例：代引きなど）は利用できない場合があります。
使用できる決済方法について、詳しくはShopify公式サイトの「国別または地域別の決済情報」を確認してください。
オンライン決済ゲートウェイサービスと決済サービスの統合｜Shopify 公式
複数商品をカートに追加できない
Buy Buttonでは、一度に複数の商品をカートへ追加する機能に制限があります。複数購入ボタンを同じページ内に並べても、チェックアウトページで購入できる商品は1つだけです。
ブログやサイトで購入ボタンを設置する際は、異なる商品を複数並べる構成は避けることをおすすめします。
サブスクリプション商品は作成できない
サブスクリプション商品はBuy Button Channelで購入ボタンの作成ができません。サブスクリプション商品のボタンを作成したい場合は、別途サブスクリプションアプリを併用するなどの対応が必要になります。
Buy Buttonの便利な活用方法
ここでは、Buy Buttonで作成した購入ボタンの具体的な活用方法を紹介します。
ブログに商品の購入ボタンを設置する
HTMLを編集できるブログサービスであれば、Buy Button Channelで作成した購入ボタンを設置することができます。
以下は、はてなブログにBuy buttonで作成した購入ボタンのコードを挿入したものです。
購入ボタンの設置イメージ（はてなブログ）
SNSで商品の購入導線を設置する
既にファンやフォロワーを一定数持つブランドでは、SNS投稿の中で商品を直接販売する方法が効果的です。Buy Buttonでは購入ボタンのほか、チェックアウトページへ直接移動できるチェックアウトリンクも作成できます。
たとえば、Instagramの投稿で紹介した商品にチェックアウトリンクを追加すると、フォロワーはそのまま購入画面に遷移することが可能です。
SNSに購入導線を設置する場合は、商品詳細ページの「Create checkout link」を利用してチェックアウトリンクを生成します。
商品管理 > 商品詳細ページ > その他の操作から「Create checkout link」を選択
チェックアウトリンクをコピー
購入ボタンのように商品画像を表示することはできませんが、チェックアウトリンクを選択すると、商品が追加された状態のチェックアウトページへ移動します。
商品を追加した状態でチェックアウトページに遷移
チェックアウトリンクをカスタマイズすることで、ディスカウントクーポンを適用させたり、Shop pay支払いの指定が可能です。
販売チャネルのカタログ連携との使い分け
Shopifyでは、FacebookやInstagramで商品カタログを連携して、各SNS上で商品を販売できる機能も提供しています。商品カタログを連携すると、購入ボタンを毎回作成しなくても、SNS上で商品を販売することが可能です。
ただし、設定にはMetaアカウント連携など一定の手順が必要なため、すぐに商品をSNS上で展開したい場合はBuy Buttonの利用がおすすめです。
Buy Button channelで購入導線を増やす
ShopifyのBuy Button channelは、管理画面で生成したコードを設置するだけで、外部サイトや SNSを販売チャネルとして活用できる便利な機能です。既に運用している媒体へ購入導線を追加できるため、商品紹介と購入を同じページ内で完結できます。
一方で、細かなコンバージョン計測が行えなかったり、詳細なデザイン調整にはコードの知識が必要になったりすることもあります。Buy Buttonは、ブログ記事やSNS投稿に商品購入の動線をシンプルに設置したい時におすすめの機能です。
