Shopifyの購入ボタン(Buy Button)をご存知ですか?この機能を利用することで、すでに持っている自社サイトやブログ上に「今すぐ購入ボタン」を設置して、安全にオンラインで販売することができます。
クリエイターやブロガー、インフルエンサーなど、すでにある程度のアクセス数のあるサイトを運営している人のなかには、グッズなどの商品を販売して、収益化を目指している人も少なくないでしょう。しかし、別ドメインで新たにECサイトを構築するには、時間も手間もかかります。Shopifyの購入ボタンを導入することで、新たなサイト構築を行うことなく、既存のサイトにカート機能を設置することが可能です。
今回は、Shopifyの購入ボタンとは何か、その作成方法とカスタマイズ方法について、埋め込み方法や注意点も合わせて解説していきます。
Shopifyの購入ボタンとは

Shopifyの購入ボタン(Buy Button)は、サイトやブログに商品カートと購入システムを追加できる機能です。商品画像や説明、価格、購入するためのボタンといった要素を既存のウェブサイト上に表示することで、ユーザーはページを離れることなく商品やサービスを購入できるようになります。
商品やサービスの販売をするにあたって、Eコマースサイトを活用する方法が一般的です。しかし、ゼロからECサイトを構築するとなると、時間や手間、追加の予算が必要になります。そこで、活用したいのがShopifyの購入ボタンです。自社ホームページやブログなど、既存のウェブサイトに埋め込むことで、簡単に商品を販売することができるようになります。
Shopifyの購入ボタンは、どのプランでも利用可能で、WordPress(ワードプレス)やWix(ウィックス)、Squarespace(スクエアスペース)などのサイトに埋め込めます。購入ボタンをShopify以外のウェブサイト上に表示させるには、Shopifyで生成した購入ボタンの埋め込みコードを貼り付けるだけです。
Shopifyの購入ボタンの作成方法

1. 販売チャネルに「購入ボタン」を追加する

Shopifyにログインし、管理画面の左側サイドバーにある [販売チャネル] を見つけます。 [販売チャネル] 右上から、アプリストアに移動します。

アプリストアで「購入ボタン」を検索し「Buy Button channel」をインストールします。これで販売チャネルの下に「購入ボタン」が表示されます。
2. 購入ボタンを作成する
[購入ボタンを作成する] をクリックします。
3. 作成する購入ボタンのタイプを選ぶ
続いて、作成する購入ボタンのタイプを選びます。ボタンタイプは以下のいずれかから選択可能です。
- 商品購入ボタン:商品を1つ表示することができる
- コレクション購入ボタン:コレクション全体を表示することができる
購入ボタンのタイプを選択したら、ボタンのデザインや機能などのカスタマイズをしていきましょう。
Shopifyの購入ボタンをカスタマイズ

Shopifyの購入ボタンは、プログラミングの知識がなく、コードが書けなくてもカスタマイズができるため、あなたのサイトに合わせて、購入ボタンをデザインすることができます。具体的にカスタマイズできる要素は以下のとおりです。
購入ボタンの外観と動作
- 色
- サイズ
- フォント
- クリックした際の動作( [カートに商品を追加する] 、 [チェックアウトに移動する] 、 [商品の詳細を開く] の3つから選択可能)
- チェックアウト画面(新しいブラウザウィンドウで開くかどうか)
ボタンの色や形状、フォントなどの設定から、クリックしたときの動作の選択、チェックアウト画面、商品ポップアップがある場合はボタンやテキスト、背景色などをカスタマイズできます。クリックした際の動作に関しては、同じページに複数の購入ボタンを設置する場合は、すべてのボタンを同じ動作に設定しましょう。
レイアウト
- ベーシック:購入ボタンのみを追加するときに使用するレイアウトです。商品画像なしの購入ボタンを利用できます。すでに商品画像をウェブサイト上にアップロードしてあり、購入機能だけを追加したい時におすすめです。
- クラシック:購入ボタンの横に、商品画像と価格が表示されるレイアウトです。ブログ記事に商品を追加したい時に役立ちます。
- フルビュー:購入ボタンの横に、商品画像と価格、説明を表示できるレイアウトです。表示される内容は、オンラインストアの商品詳細ページに該当します。
購入ボタンのカスタマイズが終わったら、 [次へ] をクリックし、貼り付けるためのコードを表示させましょう。
デザインや機能の詳細設定
コードの知識がある方は、生成されたコードを使用して、さらに購入ボタンをカスタマイズすることができます。HTML、CSS、JavaScript、Liquidなどのプログラミング言語を使用するので、開発者向けのカスタマイズ方法です。Shopifyパートナーを雇って、カスタマイズを依頼することもできます。
Shopifyの購入ボタンの埋め込み方法

購入ボタンをウェブサイトに埋め込むには、生成したコードをコピーして、自社サイトに貼り付けます。購入ボタンを表示させたいページのHTMLファイルを開いて、任意の位置にコードを貼り付けましょう。具体的な埋め込み方法は以下の通りです。
1. Shopifyのブログに購入ボタンを埋め込む手順
- Shopifyの管理画面から、[オンラインストア]>[ブログ記事] ページに移動します。
- 編集したいブログ記事を選択するか、 [ブログ記事を追加] をクリックして、新しいブログ記事を作成します。
- [ブログ記事を書く] セクションで、リッチテキストエディタにある [HTMLを表示する] をクリックします。
- メインのテキストフィールドに、埋め込みコードを貼り付けます。
- 保存します。
コードを追加したページをプレビュー表示や公開し、正常に表示されているかどうかを確認しましょう。
ShopifyのオンラインストアやShopifyブログに購入ボタンを追加すると、チェックアウトプロセスで問題が発生する可能性があるので、カートを事前読み込みするためのパーマリンク(英語)を使用することをおすすめします。
2. WordPressに購入ボタンを埋め込む手順
- Shopifyで、購入ボタンを作成し、[埋め込みコード] ダイアログから埋め込みコードをコピーします (または、[埋め込みコードをクリップボードにコピーする] をクリックします)。
- WordPressの管理画面から新しい投稿またはページを作成するか、既存の投稿またはページを編集します。
- ブロックエディタ内で[+] ボタンをクリックし [カスタムHTML] を検索します。それから [カスタムHTML] ブロックをクリックして挿入します。
- [カスタムHTML] ブロックにあるテキストフィールドに、埋め込みコードを貼り付けます。
- 任意:[カスタムHTML] ブロックを移動させるか、購入ボタンの表示方法をプレビューします。購入ボタンをプレビューするには、ブロックツールバーの[プレビュー] をクリックします。
-
完了したら、投稿またはページの[下書き保存]、[プレビュー]、または[公開] のボタンをクリックします。
3. Wixに購入ボタンを埋め込む手順
- Wixの [私のサイト] セクションから編集するサイトを見つけ、 [サイトを編集] をクリックします。
- Wixウェブサイトエディタで [+] ボタン、 [詳細] の順にクリックします。
- [HTMLコード] をクリックし、HTMLコードのウィジェットを追加します。
- [コードを入力] をクリックすると [HTML設定] ダイアログが開きます。 [ここにコードを追加] のフィールドに購入ボタンまたはコレクションの埋め込みコードを貼り付けて更新してください。
- コンテンツに合わせて、HTMLコードのウィジェットのサイズを変更します。カートで埋め込みを作成する場合、カートタブが正しい場所に表示されていることを確認してください。
- 完了したら[保存]をクリックします。
複数の商品購入ボタンを埋め込むと、製品ごとに別々のカートが表示されてしまうため、複数の商品をサイトに埋め込みたい場合には、コレクション購入ボタンをご活用ください。
Shopifyの購入ボタンのメリット

- 既存のサイトで販売できる
- 訪問者の多いサイトの集客力を活用できる
- Shopifyの決済システムを利用できる
- Shopifyの在庫管理機能を使える
既存のサイトで販売できる
販売する商品の情報をShopifyに登録し、生成した購入ボタンを既存ウェブサイトに貼り付けるだけで、ウェブサイトにカート機能を追加することができます。節約できた時間をより価値の高いSNSマーケティングや集客、アップセルなどの販売戦略に費やしましょう。
訪問者の多いサイトの集客力を活用できる
読者の多いブログや閲覧者数が多いウェブサイトを運営している場合には、その集客力を生かして商品を販売することができます。同じサイト上で商品購入の手続きが完結するので、ECサイトへのページ遷移などのステップが不要となり、購入までの動線が短くなります。ユーザーは円滑に購入を完了できるので、離脱防止にも役立ちます。
サイト訪問客の購入率を上げることにもつながるので、購入ボタンの導入はブログ収益化を実現するためにも有効な手段です。販売数や売り上げアップには、売れる商品ページの記事もぜひ参考してください。
Shopifyの決済システムを利用できる
特別な手続きを行うことなく、Shopifyペイメントを始めとしたShopifyの決済システムを利用できます。利用者の多いPayPay(ペイパル)やApple Pay(アップルペイ)、Google Pay(グーグルペイ)だけでなく、必要に応じて決済サービスアプリを追加することもできます。多くのECサイト管理者が利用している決済システムなので、セキュリティ面でも安心です。
Shopifyの在庫管理機能を活用できる
Shopifyの在庫管理機能を活用して、在庫管理を一元化できます。正確な在庫数を把握できる在庫追跡設定や在庫CSVファイルのエクスポート、複数拠点の在庫管理などの機能が備わっているので、新たに在庫管理システムを導入する必要がありません。
Shopify購入ボタンを使う際の注意点

デザインを変更する時は新しいボタンを作成する
一度購入ボタンを埋め込むと、ノーコードでボタンのデザインを変更することはできないので、変更したい時にはボタンを新たに作成する必要があります。Shopify管理画面から新しいボタンを作成し、購入ボタンのコードを新しいコードに置き換えましょう。
販売終了した商品の購入ボタンはウェブサイトから削除しなければならない
多くの購入ボタンをウェブサイトに埋め込んでいる場合は、忘れずに販売終了した商品のボタンを削除しましょう。削除し忘れると、実際は販売が終了していたとしても購入されてしまう可能性があります。購入ボタンの設置場所を把握しておき、販売終了後は忘れずに購入ボタンを削除しましょう。
購入ボタンからのサブスクリプション販売にはアプリが必要
Shopifyの購入ボタンからサブスクリプション販売は行えないため、他のアプリを導入してチェックアウトページへ移動するリンクを貼り付ける必要があります。定期購読やMikawaya Subscription(ミカワヤサブスクリプション)などのアプリにはこれらの機能が備わっているので、サブスクリプションを販売する場合は、通常のShopify購入ボタンではなく、チェックアウトページ用のリンクを使用してください。
まとめ
Shopifyの購入ボタンは、ウェブサイトにカート機能を簡単に追加できる方法です。ノーコードでカスタマイズができて、生成されたコードを貼り付けるだけでWordPressやWixなどのサイトやブログに購入ボタンを埋め込むことができます。
新たにECサイトを構築する必要がないだけではなく、既存サイトの集客力を活かして商品を販売することができるので、自社サイトを持っていて、商品の販売を始めたい人にもおすすめです。ブログやコーポレートサイトをお持ちの方は、ぜひShopify購入ボタンの導入をご検討ください。
続きを読む
Shopifyの購入ボタンに関するよくある質問
Shopify購入ボタンの埋め込み方法は?
Shopify購入ボタンを埋め込むにはまず、販売チャネルに購入ボタンを追加します。販売したい商品の購入ボタンを作成し、ボタンのタイプや色などをカスタマイズしましょう。カスタマイズが終わったら、生成されるコードをコピーします。自社ウェブサイトの管理画面から、ボタンを表示させたいページの編集画面に移動し、任意の位置にこのコードを貼り付けてることで、購入ボタンを埋め込むことができます。埋め込む場所はHTMLコードの中です。本記事の「Shopifyの購入ボタンの埋め込み方法」を参考にしてください。
Shopify購入ボタンはどのようなカスタマイズができる?
- 色・フォント・サイズ
- クリックした際の動作
- チェックアウト画面
- 商品ポップアップの詳細
- レイアウト
Shopify購入ボタンをノーコードでカスタマイズする場合、上記のようなスタイルや動作を編集できます。
Shopify購入ボタンを同じページに複数埋め込むことができる?
同一ページに複数のShopify購入ボタンを埋め込むことができます。その際、同じページ内にあるボタンのクリック時の動作を同じように設定する必要があります。
埋め込みをしたShopify購入ボタンを削除する方法は?
ウェブサイトに埋め込んだShopify購入ボタンのコードを消すことで、ボタンを削除できます。