Shopifyの「購入ボタン」(Buy Button)とは？メリットと設置方法｜TOPPANクロレ

自社のECサイトに加えて、既存の企業サイトやブログを利用して商品を販売したいと考えているなら、Shopifyの購入ボタン（Buy Button）を利用してみませんか。Shopifyは世界中で数百万以上のオンラインストアが利用しているECプラットフォームです。その優れた機能のひとつが、外部のサイト内で商品の販売が簡単にできる購入ボタンです。そのメリットや設置方法を解説します。

Shopifyの購入ボタン（Buy Button）とは？

購入ボタン（Buy Button）とは、ECサイト以外の企業サイトやキャンペーンサイト、ランディングページ、集客用のブログに、Shopifyのカート機能を追加できる機能です。この機能を使うと、Webサイトのフロントエンド（顧客が直接触れる部分）は自社のWebサイトやブログのままで、Shopifyのカートや決済、在庫システムが使えるようになります。

購入ボタンはShopifyの標準機能として搭載されており、Shopifyのユーザーなら誰でも無料で使えます。

購入ボタン設置のメリット

Shopifyの購入ボタンを外部のWebサイトに設置すると、さまざまなメリットが生まれます。

新たなECサイトを構築する手間や費用を節約できる

既存のWebサイトやブログをそのままオンラインショップのフロントエンドとして使えるため、新たなECサイトを構築する必要がなく、そのための手間や費用がかかりません。また、新規ドメインは検索エンジンから評価されるまでに時間がかかりますが、既存のWebサイトで集客できるのでSEO的にも有利です。

企業サイトやブログの集客力を利用できる

購入ボタンを使って企業サイトやブログが新たな販売チャネルになれば、既存のShopifyストアの顧客とは異なるターゲットにアプローチすることができます。

また、キャンペーンのランディングページやブログの商品紹介記事の近くに購入ボタンが設置されていると、情報を見て興味を持ったユーザーがその場で商品を購入できます。サイト移動による離脱が抑えられ、購買率の向上につながります。

新しい販売方法を開発できる

購入ボタンを導入すると、アイデア次第で新しい販売方法が生まれる可能性があります。例えば、ひとつのWebページに配信動画と購入ボタンを設置すると、動画を見ながら買い物ができる動画ECが比較的簡単に実現できます。

また、ファッションブログに掲載したおすすめコーディネートのアイテムをその場ですぐ買えるようにしたり、これから販売する商品の紹介ページに購入ボタンを配置して予約販売を行ったりすることもできます。自社が販売するコーヒー豆の販売ボタンの隣に、他社のケーキの販売ボタンを並べ、コラボ販売をするといった試みなども可能になります。

Shopifyの管理画面で簡単に設定、作業ができる

購入ボタンはShopifyの管理画面で簡単に設定することができます。すでにShopifyストアを開設していれば、ストアの在庫システムや決済システムをそのまま利用できるため、特別な設定をする必要もありません。購入ボタンによる受注はShopifyストアの受注と同じように処理され、販売データに反映されます。初めてECサイトを運営する人にとっても、簡単で分かりやすい仕様です。

システムの安定性とセキュリティの高さ

購入ボタンから大量のトラフィックがあった場合のシステムの安定性やセキュリティ、決済システムの信頼性の高さも、ECのスペシャリスト、Shopifyならではのメリットです。

購入ボタンの設定方法

次に購入ボタンを自社のWebページ（WordPress.orgで作成）に設置する方法を説明します。事前に購入ボタンで販売する商品の情報をShopifyに登録しておきます。その後、Shopifyの管理画面から下記の手順で購入ボタンを設定します。

1. 管理画面の左側のメニューにある「販売チャネル」の＋ボタンをクリック。「販売チャネルを追加」の画面に移動するので「購入ボタン」を選択する
2. 中央に表示された「購入ボタンを作成する」をクリックする
3. 「商品購入ボタン」または「コレクション購入ボタン」のどちらかをクリックし、表示される商品リスト（カタログ）からWebページで販売したい商品を選択する。検索して商品を探すこともできる
   
   • 「商品購入ボタン」はWebページに商品をひとつ掲載する場合に選択
   • 「コレクション購入ボタン」を選ぶと、コーディネート一式、カテゴリー内全部といった複数の商品をWebページに並べて掲載することができる
4. 左側のカスタマイズのメニューから、購入ボタンのデザインやテキスト、レイアウトなどを選択する（詳細は次項で解説）
5. WebページのHTMLに貼り付けるコードが表示されるので、「コードをコピーする」をクリック
6. コピーしたコードをWebページのHTML編集画面の任意の位置に貼り付ける
7. Webページに購入ボタンが表示される

購入ボタンのカスタマイズ

カスタマイズのメニューからは、購入ボタンやカート画面、ポップアップ画面のデザインや文言の設定ができます。

• 商品バリエーションを設定する。この設定によって、色やサイズといった商品のバリエーションが選択肢としてボタンとともに表示される
• 購入ボタンのレイアウトスタイルを「ベーシック」「クラシック」「フルビュー」のなかから選択する
• 購入ボタンをクリックしたときのアクションを、「カートに商品を追加」「チェックアウトに移動する」「商品の詳細を開く」のなかから選択する
• ボタンスタイル（ボタン自体の形状や色、文字の配置など）を決める
• 選択したレイアウトスタイルに応じて、掲載する画像のサイズ、ボタン内のテキストやフォントなどを決める
• 「カートに商品を追加」を選択したときに表示されるカート画面の文言や色を決める
• 「商品の詳細を開く」をクリックしたときに表示されるポップアップ画面の文言やフォントを決める

設定が難しそうと感じたら制作会社に相談を

ここまで紹介してきたように、購入ボタンの設置は比較的簡単な作業です。しかし、多くの購入ボタンを設定する場合や、自社のWebサイトをオンラインショップとして本格的にカスタマイズしたいとき、あるいは自分たちでコード（HTML）を触りたくないといったケースでは、制作会社に相談した方が早く確実に仕上がります。

また、サイトの構築方法や構築プラットフォームによって、コードの埋め込み方法が異なる点にも注意が必要です。Shopifyの公式ページには、WordPress.org（※）、Squarespace、Wixという3種類の構築プラットフォームでの設定方法が紹介されています。この3つ以外で作られたサイトに購入ボタンを追加したい場合や、サイトの構築方法がよく分からない場合は、プラットフォームに問い合わせるか、制作会社に相談してみましょう。

※WordPress.comのサイトではShopifyの購入ボタンは使えません

簡単に設定できる購入ボタンでビジネスチャンスを広げよう

Shopifyの購入ボタン機能を使えば、外部のWebサイトで簡単に商品を販売することができます。新たなECサイトを構築する手間や費用をかけずに、既存の企業サイトやブログをECサイトとして活用できるのです。Shopifyストアを運営している企業にとっては、チャネルを増やすことによって、これまでとは違う顧客層へのアプローチが可能になります。新たな販売方法の開発につながる可能性もあります。便利な購入ボタンを使って、ビジネスチャンスを広げましょう。

TOPPANクロレでは、ShopifyによるECサイトの構築サービスを提供しています。ご要望に沿ったECサイトを構築するだけでなく、その後の運用サポートにも注力しており、お客様に伴走して成果の上がるECサイトの運営を行っていきます。ぜひお気軽にご相談ください。