購入ボタンを別ブログサイトに設置「Buy Button channel」の設定方法

購入ボタンを別ブログサイトに設置「Buy Button channel」の設定方法 Shopify販売チャネル

Buy Button channelとは

「Buy Button channel」とは購入ボタンのことで、Shopifyで作成された店舗(ストア)の商品情報などを他サイト(WordPressなどで制作された外部サイト)に表示、購入まで進めることができる販売手法です

以下から販売チャネル「Buy Button channel」のインストールが可能です
https://apps.shopify.com/buy-button?locale=ja

Buy Button channelをインストール後、購入ボタンの設置手順

手順1:
「購入ボタンを作成する」ボタンをクリック

Shopify販売チャネルBuy Buttonの設定手順

手順2:
購入ボタンの表示種類を以下2パターンから選択
・商品購入ボタン
・コレクション購入ボタン

Shopify販売チャネルBuy Buttonのボタンの表示種類は2種類

手順3:
購入ボタンの表示体裁を整え「次へ」ボタンをクリック(カスタマイズの詳細については次の章で説明)

Shopify販売チャネルBuy Buttonでできるカスタマイズ

手順4:
「コードをコピーする」を押して、任意のサイトの表示したい箇所にコードをペーストする

Shopify販売チャネルBuy Buttonで出力される購入ボタン表示のためのコード

Buy Button channelでできる機能と各設定

Buy Button channelの機能

Buy Buttonの販売チャネルの機能はざっくりと下記2点です

  • 単品商品の商品情報・購入ボタンを表示させるための見た目の調整とコード出力
  • コレクションを指定した複数商品の情報・購入ボタンを表示させるための見た目の調整とコード出力

次にそれぞれのカスタマイズでできることをまとめます

単品商品:「商品購入ボタン」のカスタマイズでできる各設定

表示商品の情報に関する設定
Shopify販売チャネルBuy Button「商品購入ボタン」のカスタマイズ

①商品バリエーション:商品にバリエーションがある場合のみ設定可能。すべてのバリエーションもしくは限定したバリエーションの購入ボタンを作成することができる
②レイアウトスタイル:購入ボタンとその商品の表示情報を「ベーシック」「クラシック」「フルビュー」の3パターンから選択できる(下図で表示イメージの説明)
③クリック時のアクション:購入ボタンを押したときの遷移先などを3パターンから決められる。「カートに商品を追加する」「チェックアウトに移動する」「商品の詳細を開く」※
※「商品の詳細を開く」は②レイアウトスタイルが「ベーシック」「クラシック」を選択時

②レイアウトスタイル「ベーシック」
表示要素:バリエーション+購入ボタン

Shopify販売チャネルBuy Button「商品購入ボタン」レイアウトスタイル「ベーシック」

②レイアウトスタイル「クラシック」
表示要素:商品画像+商品名+価格+バリエーション+購入ボタン

Shopify販売チャネルBuy Button「商品購入ボタン」レイアウトスタイル「クラシック」

②レイアウトスタイル「フルビュー」
表示要素:商品画像+商品名+価格+バリエーション+購入ボタン+商品説明

Shopify販売チャネルBuy Button「商品購入ボタン」レイアウトスタイル「フルビュー」
その他、表示やアクションに関する設定
Shopify販売チャネルBuy Button「商品購入ボタン」その他の表示

④ボタンのスタイル:ボタンデザインに関する設定
・ボタンの角:角丸の設定
・ボタンの幅:横幅の設定
・背景、テキスト:色の設定(アウトラインの設定は不可)
・タイポグラフィー:文字の種類と大きさの設定

Shopify販売チャネルBuy Button「商品購入ボタン」ボタンのスタイルのカスタマイズ

⑤レイアウト:全体的なデザイン調整
・ボタンテキスト:購入ボタンに表示される文言設定
・数量フィールドを表示する:チェックを入れることで複数個数購入可能な設定にできる
・色:テキストに使用する色の設定。「商品名」「価格」「説明」の3箇所設定可能
・タイポグラフィー:文字の種類と大きさの設定。「商品名」「価格」「バリエーション」「説明」の4箇所設定可能

Shopify販売チャネルBuy Button「商品購入ボタン」レイアウトのカスタマイズ
Shopify販売チャネルBuy Button「商品購入ボタン」レイアウトのカスタマイズ

⑥ショッピングカート:③クリック時のアクションが「カートに商品を追加する」もしくは「商品の詳細を開く」を選択時に設定可能。カートに入れた際に表示されるエリアの文言の調整
・見出し(Cart):下図の[1]参照。カートエリアのタイトル箇所
・小計(Subtotal):下図の[2]参照
・注文のメモフィールドを表示する:チェックを入れるとカートメモを表示する事ができる。下図の[3]参照
・注文メモ(Special instructions for seller):下図の[3]参照。カートメモを利用してほしい場合の具体例などを入れると良い
・追加情報(Shipping and discount codes are added at checkout.):次ページがあることを促す補足を設定。送料やディスカウントなどは決済画面で行うことなどを知らせることが可能。下図の[4]参照
・ボタンテキスト(Checkout):下図の[5]参照。決済画面に進むためのボタンの文言

Shopify販売チャネルBuy Button「商品購入ボタン」ショッピングカートのカスタマイズ

⑦ポップアップの詳細:③クリック時のアクションが「商品の詳細を開く」を選択時に設定可能
設定の詳細は⑤レイアウトと重複するため割愛

⑧高度な設定:商品購入時に決済画面を別窓で開くかどうかの設定
チェックアウト時の動作を下記2パターンから選べます
・ポップアップウィンドウを開く(初期設定)
・同じタブでリダイレクト
初期設定のままのほうが購入されるお客様にとってわかりやすいページ遷移なのでそのままを推奨します

Shopify販売チャネルBuy Button「商品購入ボタン」高度な設定のカスタマイズ

複数商品:「コレクション購入ボタン」のカスタマイズでできる各設定

表示商品の情報に関する設定
Shopify販売チャネルBuy Button「コレクション購入ボタン」のカスタマイズ

①クリック時のアクション:購入ボタンを押したときの遷移先などを3パターンから決められる。「カートに商品を追加する」「チェックアウトに移動する」「商品の詳細を開く」

その他、表示やアクションに関する設定

単品商品の設定と同じ設定のため、こちらを参照ください

Buy Button channelを使用する際の注意点

上で述べたようにBuy Buttonの販売チャネルでできることは購入ボタン(単品での商品表示、もしくはコレクションを指定した商品複数表示のいずれか2パターン)の出力をすることができます

出力と書いた理由は、購入ボタンを表示するのは別途作業が必要だからです
このチャネルを導入するだけで任意の場所に購入ボタンを表示できるのではなく、このチャネルはアクアで購入ボタンを表示するためのコードを出力し、それをサイト管理者自身でコピーして表示を完了させなければなりませんので注意が必要です

まとめ

Shopify以外にコーポレートサイトやブログなどの媒体を運用しているケースは多いと思います
それらのサイトに商品の紹介や直接購入ページに遷移できるエリアを表示することはCVを上げるだけでなく自社の商品をお客様に知ってもらえるきっかけを増やすことにも繋がります

Buy Button channelを導入してお客様に知らせる機会を増やしましょう

タイトルとURLをコピーしました