Shopifyの購入ボタン（Buy Button）をご存知ですか？この機能を利用することで、すでに持っている自社サイトやブログ上に「今すぐ購入ボタン」を設置して、安全にオンラインで販売することができます。
クリエイターやブロガー、インフルエンサーなど、すでにある程度のアクセス数のあるサイトを運営している人のなかには、グッズなどの商品を販売して、収益化を目指している人も少なくないでしょう。しかし、別ドメインで新たにECサイトを構築するには、時間も手間もかかります。Shopifyの購入ボタンを導入することで、新たなサイト構築を行うことなく、既存のサイトにカート機能を設置することが可能です。
今回は、Shopifyの購入ボタンとは何か、その作成方法とカスタマイズ方法について、埋め込み方法や注意点も合わせて解説していきます。
Shopifyの購入ボタンとは
Shopifyの購入ボタン（Buy Button）は、サイトやブログに商品カートと購入システムを追加できる機能です。商品画像や説明、価格、購入するためのボタンといった要素を既存のウェブサイト上に表示することで、ユーザーはページを離れることなく商品やサービスを購入できるようになります。
商品やサービスの販売をするにあたって、Eコマースサイトを活用する方法が一般的です。しかし、ゼロからECサイトを構築するとなると、時間や手間、追加の予算が必要になります。そこで、活用したいのがShopifyの購入ボタンです。自社ホームページやブログなど、既存のウェブサイトに埋め込むことで、簡単に商品を販売することができるようになります。
Shopifyの購入ボタンは、どのプランでも利用可能で、WordPress（ワードプレス）やWeebly（ウィーブリー）、Wix（ウィックス）、Squarespace（スクエアスペース）などのサイトに埋め込めます。購入ボタンをShopify以外のウェブサイト上に表示させるには、Shopifyで生成した購入ボタンの埋め込みコードを貼り付けるだけです。
Shopifyの購入ボタンの作成方法
1. 販売チャネルに購入ボタンを追加する
Shopifyにログインし、管理画面の左側サイドバーにある [販売チャネル] を見つけます。 [販売チャネル] 右側の [＋] アイコンをクリックするとポップアップ画面が表示されるので、購入ボタンの [＋] をクリックします。これで、 [販売チャネル] に [Buy Button] が追加されます。
管理画面の左側サイドバーに [販売チャネル] が表示されない場合は、管理画面から [設定] をクリックして、 [アプリと販売チャネル] ページに移動します。このページ内にある [Shopify App Store] をクリックして、遷移したページ内で [Buy Button] を検索し、 [チャネルを追加] または [アプリを追加] をクリックして、購入ボタン機能を追加しましょう。
2. 購入ボタンを作成する
[購入ボタンを作成する] をクリックします。
3. 作成する購入ボタンのタイプを選ぶ
続いて、作成する購入ボタンのタイプを選びます。ボタンタイプは以下のいずれかから選択可能です。
- 商品購入ボタン：商品を1つ表示することができる
- コレクション購入ボタン：コレクション全体を表示することができる
購入ボタンのタイプを選択したら、ボタンのデザインや機能などのカスタマイズをしていきましょう。
Shopifyの購入ボタンをカスタマイズ
Shopifyの購入ボタンは、プログラミングの知識がなく、コードが書けなくてもカスタマイズができるため、あなたのサイトに合わせて、購入ボタンをデザインすることができます。具体的にカスタマイズできる要素は以下のとおりです。
購入ボタンの外観と動作
- ボタンスタイル
- クリックした際の動作（ [カートに商品を追加する] 、 [チェックアウトに移動する] 、 [商品の詳細を開く] の3つから選択可能）
- チェックアウト画面（新しいブラウザで開くかどうか）
- 商品ポップアップの詳細
ボタンの色や形状、フォントなどの設定から、クリックしたときの動作の選択、チェックアウト画面、商品ポップアップがある場合はボタンやテキスト、背景色などをカスタマイズできます。クリックした際の動作に関しては、同じページに複数の購入ボタンを設置する場合は、すべてのボタンを同じ動作に設定しましょう。
レイアウト
- ベーシック：購入ボタンのみを追加するときに使用するレイアウトです。商品画像なしの購入ボタンを利用できます。すでに商品画像をウェブサイト上にアップロードしてあり、購入機能だけを追加したい時におすすめです。
- クラシック：購入ボタンの横に、商品画像と価格が表示されるレイアウトです。ブログ記事に商品を追加したい時に役立ちます。
- フルビュー：購入ボタンの横に、商品画像と価格、説明を表示できるレイアウトです。表示される内容は、オンラインストアの商品詳細ページに該当します。
購入ボタンのカスタマイズが終わったら、 [次へ] をクリックし、貼り付けるためのコードを表示させましょう。
デザインや機能の詳細設定
コードの知識がある方は、生成されたコードを使用して、さらに購入ボタンをカスタマイズすることができます。HTML、CSS、JavaScript、Liquidなどのプログラミング言語を使用するので、開発者向けのカスタマイズ方法です。Shopifyパートナーを雇って、カスタマイズを依頼することもできます。
Shopifyの購入ボタンの埋め込み方法
購入ボタンをウェブサイトに埋め込むには、生成したコードをコピーして、自社サイトに貼り付けます。購入ボタンを表示させたいページのHTMLファイルを開いて、任意の位置にコードを貼り付けましょう。具体的な埋め込み方法は以下の通りです。
1. Shopifyのブログに購入ボタンを埋め込む手順
- Shopifyの管理画面で [オンラインストア] をクリックし、[ブログ記事] ページに移動します。
- 編集したいブログ記事を選択するか、 [ブログ記事を追加] をクリックして、新しいブログ記事を作成します。
- ブログ編集画面の右上にある [<>] のアイコンをクリックし、 HTMLコードを表示させます。
- 購入ボタンを埋め込みたい位置に、購入ボタンの埋め込みコードを貼り付けて、保存します。
コードを追加したページをプレビュー表示や公開し、正常に表示されているかどうかを確認しましょう。
ShopifyのオンラインストアやShopifyブログに購入ボタンを追加すると、チェックアウトプロセスで問題が発生する可能性があるので、カートを事前読み込みするためのパーマリンク（英語）を使用することをおすすめします。
2. WordPressに購入ボタンを埋め込む手順
WordPressに埋め込みできるのは、セルフホスト型（レンタルサーバーを契約・運用する）WordPressサイトと、WordPress.comの特定のプランでのみです。WordPress.comを利用している場合は、自分の契約プランとShopify購入ボタンに互換性があるかどうかを事前に確認しておきましょう。
- WordPressのダッシュボードから、購入ボタンを埋め込みたい投稿またはページに移動します。
- 新しい投稿または新しいページ作成を行うか、既存の投稿またはページを選択します。
- 購入ボタンを入れたい場所にカーソルを移動させ、ブロックエディタの [+] ボタンをクリックして [カスタムHTML] を検索し、クリックします。
- 埋め込みコードを貼り付け、 [下書き保存] 、または [公開] をクリックします。
プレビュー表示や公開されたページで埋め込んだ購入ボタンがどのように表示されるかを確認できます。
ブロックエディタではなく、プラグインなどでClassic Editorを使っている場合には、テキストエディタを [ビジュアル] モードから [テキスト] モードに変更し、挿入したい場所に埋め込みコードを貼り付けてください。
3. Wixに購入ボタンを埋め込む手順
- Wixの [私のサイト] セクションから編集するサイトを見つけ、 [サイトを編集] をクリックします。
- Wixウェブサイトエディタで [+] ボタン、 [詳細] の順にクリックします。
- [HTMLコード] をクリックし、HTMLコードのウィジェットを追加します。
- [コードを入力] をクリックすると [HTML設定] ダイアログが開きます。 [ここにコードを追加] のフィールドに購入ボタンまたはコレクションの埋め込みコードを貼り付けて更新してください。
複数の商品をサイトに埋め込みたい場合には、コレクション購入ボタンをご活用ください。複数の商品購入ボタンを埋め込むと、製品ごとに別々のカートが表示されてしまうためです。
4. Squarespaceに購入ボタンを埋め込む手順
- Squarespaceのダッシュボードから、埋め込みコードを追加したいページを開きます。
- ページコンテンツ領域にカーソルを移動させて、 [編集] をクリックします。
- 購入ボタンを埋め込みたい場所を見つけ、クリックします。
- コンテンツブロックダイアログの詳細セクションで、 [コード] をクリックします。
- HTML形式になっていることを確認したら、購入ボタンの埋め込みコードを貼り付けましょう。
- [適用] をクリックしたら、 [保存] をクリックします。
購入ボタンの表示確認を行うには、Squarespaceのダッシュボードではなく、ページを個別にプレビューしましょう。上記の手順に従ったにもかかわらず、購入ボタンが読み込まれない場合は、Ajaxの読み込みを無効にすることで正常に表示されるようになります。
5. Unbounceなど一部プラットフォームに購入ボタンを埋め込む手順
Unbounce（アンバウンス）などの一部のプラットフォームでは、埋め込みコード内にある<script>タグ（<script>で始まり</script>で終わるコード）をページのヘッダー部分に貼り付け、それ以外の埋め込みコードを購入ボタンを表示させる場所に貼り付けるという手順が必要になります。
- 購入ボタンを埋め込みたいウェブサイトのページヘッダーの編集画面を開きます。
- 生成された購入ボタンの<script>タグをコピーし、ヘッダー部分（<head></head>に囲まれた部分）に貼り付けます。
- 変更を保存します。
- Shopify管理画面のオリジナル埋め込みコードから、<div>要素（<div>で始まり</div>で終わるコード）のみをコピーします。
例：<div id='product-component-2dd3c8704e6'></div>
- 購入ボタンを埋め込みたいウェブサイトのページの編集画面を開きます。
- 先ほどの<div>要素を購入ボタンを表示させたい位置に貼り付け、変更を保存します。
Shopifyの購入ボタンのメリット
新規ECサイト構築にかかる時間と手間を省ける
Shopifyの購入ボタンを利用することで、新規ECサイトの構築に必要となるトップページや企業案内といったページを作成する時間と手間を省くことができます。しません。販売する商品の情報をShopifyに登録し、生成した購入ボタンを既存ウェブサイトに貼り付けるだけで、ウェブサイトにカート機能を追加することができます。節約できた時間をより価値の高いSNSマーケティングや集客、アップセルなどの販売戦略に費やしましょう。
訪問者の多いサイトの集客力を活用できる
読者の多いブログや閲覧者数が多いウェブサイトを運営している場合には、その集客力を生かして商品を販売することができます。同じサイト上で商品購入の手続きが完結するので、ECサイトへのページ遷移などのステップが不要となり、購入までの動線が短くなります。ユーザーは円滑に購入を完了できるので、離脱防止にも役立ちます。
サイト訪問客の購入率を上げることにもつながるので、購入ボタンの導入はブログ収益化を実現するためにも有効な手段です。販売数や売り上げアップには、売れる商品ページの記事もぜひ参考してください。
Shopifyの決済システムを利用できる
特別な手続きを行うことなく、Shopifyペイメントを始めとしたShopifyの決済システムを利用できます。利用者の多いPayPay（ペイパル）やApple Pay（アップルペイ）、Google Pay（グーグルペイ）だけでなく、必要に応じて決済サービスアプリを追加することもできます。多くのECサイト管理者が利用している決済システムなので、セキュリティ面でも安心です。
Shopifyの在庫管理機能を活用できる
Shopifyの在庫管理機能を活用して、在庫管理を一元化できます。正確な在庫数を把握できる在庫追跡設定や在庫CSVファイルのエクスポート、複数拠点の在庫管理などの機能が備わっているので、新たに在庫管理システムを導入する必要がありません。
自社サイトに合わせて購入ボタンをデザインできる
前述のとおり、ノーコードで購入ボタンの色やフォントをカスタマイズすることができます。自社サイトのデザインや雰囲気に合わせて、違和感のない購入ボタンを埋め込むことが可能です。商品を1つだけ表示させたり、コレクションを表示させたりすることもできできます。
Shopify購入ボタンを使う際の注意点
デザインを変更する時は新しいボタンを作成する
一度購入ボタンを埋め込むと、ノーコードでボタンのデザインを変更することはできないので、変更したい時には新たにボタンを作成する必要があります。Shopify管理画面から新しいボタンを作成し、購入ボタンのコードを新しいコードに置き換えましょう。
販売終了した商品の購入ボタンはウェブサイトから削除する
多くの購入ボタンをウェブサイトに埋め込んでいる場合は、忘れずに販売終了した商品のボタンを削除しましょう。削除し忘れると、実際は販売が終了していたとしても購入されてしまう可能性があります。購入ボタンの設置場所を把握しておき、販売終了後は忘れずに購入ボタンを削除しましょう。
複数の商品を販売する場合は商品ごとに購入ボタンが必要になる
Shopifyの購入ボタンは、1つのボタンで購入できる商品は1つのみです。したがって、複数の商品を販売したい場合は、商品ごとに購入ボタンが必要になります。商品ごとの購入ボタンをウェブサイトに埋め込むか、ECサイトへのリンクを貼りましょう。
購入ボタンからのサブスクリプション販売にはアプリが必要
Shopifyの購入ボタンからサブスクリプション販売は行えないため、他のアプリを導入してチェックアウトページへ移動するリンクを貼り付ける必要があります。定期購読やMikawaya Subscription（ミカワヤサブスクリプション）などのアプリにはこれらの機能が備わっているので、サブスクリプションを販売する場合は、通常のShopify購入ボタンではなく、チェックアウトページ用のリンクを使用してください。
まとめ
Shopifyの購入ボタンは、ウェブサイトにカート機能を簡単に追加できる方法です。ノーコードでカスタマイズができて、生成されたコードを貼り付けるだけでWordPressやWeebly、Wix、Squarespaceなどのサイトやブログに購入ボタンを埋め込むことができます。
新たにECサイトを構築する必要がないだけではなく、既存サイトの集客力を活かして商品を販売することができるので、自社サイトを持っていて、商品の販売を始めたい人にもおすすめです。ブログやコーポレートサイトをお持ちの方は、ぜひShopify購入ボタンの導入をご検討ください。
続きを読む
Shopifyの購入ボタンに関するよくある質問
Shopify購入ボタンの埋め込み方法は？
Shopify購入ボタンを埋め込むにはまず、販売チャネルに購入ボタンを追加します。販売したい商品の購入ボタンを作成し、ボタンのタイプや色などをカスタマイズしましょう。カスタマイズが終わったら、生成されるコードをコピーします。自社ウェブサイトの管理画面から、ボタンを表示させたいページの編集画面に移動し、任意の位置にこのコードを貼り付けてることで、購入ボタンを埋め込むことができます。埋め込む場所はHTMLコードの中です。本記事の「Shopifyの購入ボタンの埋め込み方法」を参考にしてください。
Shopify購入ボタンはどのようなカスタマイズができる？
- ボタンスタイル
- クリックした際の動作
- チェックアウト画面
- 商品ポップアップの詳細
- レイアウト
Shopify購入ボタンをノーコードでカスタマイズする場合、上記のようなスタイルや動作を編集できます。
Shopify購入ボタンを同じページに複数埋め込むことができる？
同一ページに複数のShopify購入ボタンを埋め込むことができます。その際、同じページ内にあるボタンのクリック時の動作を同じように設定する必要があります。
埋め込みをしたShopify購入ボタンを削除する方法は？
ウェブサイトに埋め込んだShopify購入ボタンのコードを消すことで、ボタンを削除できます。
文：Masumi Murakami
