Shopifyの購入ボタンとは？カスタマイズ方法や埋め込み方

Shopifyの購入ボタンは、Shopifyストアでの商品購入を簡単にして、購買を促進する便利な機能です。購入ボタン機能を利用すると、既存の自社サイトやブログ上に「今すぐ購入」ボタンを設置でき、オンラインで安全に商品を販売できます。

クリエイターやブロガー、インフルエンサーなど、すでにある程度のアクセス数のあるサイトを運営している方のなかには、オリジナルグッズなどの商品を販売して、収益化を目指している人もいるかもしれません。その場合、別ドメインで新たにECサイトを構築するには、時間も手間もかかります。Shopifyの購入ボタンを導入すれば、新たなサイトを構築することなく、既存のサイトに購入機能を追加できます。

この記事では、Shopifyの購入ボタンの機能、設置に向いている場所、作成方法やカスタマイズ方法について、埋め込み方法や注意点もあわせて解説します。

Shopifyの購入ボタンとは

Shopifyの購入ボタンは、自社ウェブサイトやブログにショッピングカートと決済機能を追加できる機能です。商品画像や説明、価格、クリック可能なボタンを既存のウェブサイト上に表示することで、ユーザーは閲覧中のページから商品やサービスを直接購入できるようになります。

Shopifyが商品の埋め込みや表示に必要なコードを生成するため、そのコードを貼り付けるだけでボタンの設置が完了します。購入ボタンの色や、表示する商品情報・画像などはページに合わせてカスタマイズできるため、サイトの雰囲気に合ったデザインに調整できます。さらに、Shopifyのどのプランでも利用可能で、WordPress（ワードプレス）やWix（ウィックス）、Squarespace（スクエアスペース）、Weebly（ウィーブリー）など、カスタムHTMLに対応しているサイトにも埋め込めます。

購入ボタンはShopify管理画面と連携しているため、ボタンを複数のサイトに設置している場合でも、注文管理、在庫追跡、顧客データの確認を一か所で行えます。ブログやポートフォリオ、キャンペーンページなど、商品を紹介している場所に直接購入への導線を設けられる点が大きな特徴です。

Shopifyの購入ボタンを活用しやすい場所

購入ボタンは、すでにユーザーが訪れているページにショッピングカート機能を追加できるものです。特に次のようなページで活用しやすいでしょう。

ブログ記事やコンテンツページ

商品に関連する記事の中に購入ボタンを埋め込むと、読者が関心を持ったタイミングでそのまま購入できます。たとえば、キャンドル作りのチュートリアル記事で、材料や道具の購入ボタンを記事内に設置するような使い方です。読者は別タブを開いたり、ストア内で商品を探したりする必要がありません。

ランディングページ

新商品の発売、季節のキャンペーン、広告からの流入を目的としたランディングページにも購入ボタンは適しています。ページの目的がひとつの行動に絞られている場合、購入ボタンを設置することで、広告のクリックから購入完了までの手順を減らせます。

パートナーサイトやアフィリエイトサイト

インフルエンサー、アフィリエイター、メディアパートナーのサイトで商品を紹介してもらう場合、購入ボタンを使うことで、そのページ上に購入導線を設置できます。注文処理や決済、在庫管理はShopify管理画面で行えるため、パートナー側が決済や発送を管理する必要はありません。

ポートフォリオや個人サイト

アーティスト、デザイナー、ポッドキャスト配信者、ミュージシャンなど、作品を紹介する個人サイトを持っているクリエイターにも便利です。既存サイトのデザインを保ったままeコマース機能を追加できるため、コンテンツを移行したり、別のオンラインストアを立ち上げたりする手間を減らせます。

メール、ニュースレター、SNS

一部のメール配信環境ではHTMLの埋め込みに対応しており、購入ボタンをメールキャンペーン内に設置できる場合があります。また、購入ボタンを設置したページのリンクをSNS投稿やダイレクトメッセージで共有する使い方も可能です。興味を持った読者が商品を探す手間を省き、購入までの流れを短縮できます。

ポップアップやプロモーション表示

ウェブページ上のポップアップやキャンペーン用のオーバーレイに購入ボタンを埋め込む方法もあります。ページのスクロール、離脱しようとするタイミング、一定時間の経過などをきっかけに特定の商品や期間限定の特典を表示し、関心が高まったタイミングで購入へつなげられます。

なお、ShopifyのオンラインストアやShopifyブログ内に購入ボタンを追加すると、標準のチェックアウト機能と干渉する可能性があります。Shopify内のページでは、購入ボタンではなくカートのパーマリンクの活用がおすすめです。

Shopifyの購入ボタンの作成方法

1. 販売チャネルに「購入ボタン」を追加する
2. 購入ボタンを作成する
3. 作成する購入ボタンのタイプを選ぶ

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

Shopifyにログインし、管理画面の左側サイドバーにある [販売チャネル] をクリックします。下部に表示されている [アプリと販売チャネルの設定] をクリックし、アプリストアに移動して「購入ボタン」を検索します。

アプリストアで「購入ボタン」を検索し「Buy Button channel」をインストールします。これで[販売チャネル]の下に「購入ボタン」が表示されます。[メニューにピン止めする]をクリックして固定しておくと、すぐにアクセスでき便利です。

「購入ボタン」をピン留めしない場合は、もう一度 [販売チャネル] をクリックすると表示できます。

モバイルアプリから追加する場合

Shopifyアプリからも購入ボタンの販売チャネルを追加できます。モバイル端末でShopifyアプリを開き、メニューから販売チャネルの追加画面に進みます。「購入ボタン」を検索してインストールすると、Shopifyストアに購入ボタンの販売チャネルが追加されます。

2. 購入ボタンを作成する

[購入ボタンを作成する] をクリックします。

3. 作成する購入ボタンのタイプを選ぶ

続いて、作成する購入ボタンのタイプを選びます。以下の2種類から選択できます。

• 商品購入ボタン：1つの商品を表示できます。
• コレクション購入ボタン：コレクション全体を表示できます。複数の商品や商品シリーズ全体を1つの埋め込みで見せたい場合に便利です。

購入ボタンのタイプを選択したら、表示したい商品またはコレクションを選び、ボタンのデザインや機能などをカスタマイズしていきましょう。

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

Shopifyの購入ボタンは、プログラミングの知識がなくても簡単にカスタマイズできるため、自分のサイトに合ったデザインに調整できます。 編集画面ではプレビューを見ながら設定でき、デスクトップ表示とモバイル表示を切り替えて確認することもできます。具体的にカスタマイズできる要素は次のとおりです。

• 購入ボタンの外観と動作
• レイアウト
• デザインや機能の詳細設定

購入ボタンの外観と動作

• 色
• サイズ
• フォント
• クリックした際の動作（ [カートに商品を追加する] 、 [チェックアウトに移動する] 、 [商品の詳細を開く] の3つから選択可能）
• チェックアウト画面（新しいブラウザウィンドウで開くかどうか）
• 表示する商品バリエーション
• カート内の文言や色、注文メモ欄の追加

ボタンの色や形状、フォントなどの設定から、クリックしたときの動作の選択、チェックアウト画面、商品ポップアップのボタンやテキスト、背景色までカスタマイズできます。同じページに複数の購入ボタンを設置する場合、クリックした際の動作は、すべて同じ設定にしましょう。

クリック時の動作には、それぞれ特徴があります。[カートに商品を追加する] を選ぶと、ページ横にカートが表示され、訪問者は買い物を続けながら商品を追加できます。[チェックアウトに移動する] を選ぶと、購入者は直接チェックアウトに進みますが、一度に購入できる商品は基本的に1点です。[商品の詳細を開く] を選ぶと、商品詳細、バリエーション、画像、カート追加ボタンを含むポップアップが開きます。

レイアウト

• ベーシック：購入ボタンのみを追加するときに使用するレイアウトです。商品画像なしの購入ボタンを利用できます。すでに商品画像をウェブサイト上に掲載しており、購入機能だけを追加したいときにおすすめです。
• クラシック：購入ボタンの横に、商品画像と価格が表示されるレイアウトです。ブログ記事に商品を追加したいときに役立ちます。
• フルビュー：購入ボタンの横に、商品画像と価格、説明を表示できるレイアウトです。表示される内容は、オンラインストアの商品詳細ページに相当します。

購入ボタンのカスタマイズが終わったら、 [次へ] をクリックし、埋め込み用のコードを表示しましょう。

デザインや機能の詳細設定

コードの知識がある方は、生成されたコードを編集することで、さらに購入ボタンや埋め込みカートを編集できます。HTML、CSS、JavaScript、Liquidなどの言語を使用するため、開発者向けのカスタマイズ方法です。Shopifyパートナーを雇って、カスタマイズしてもらうこともできます。

ただし、購入ボタン編集画面で変更した内容は、これから新しく作成するボタンに適用されます。すでにウェブサイトへ埋め込んだ購入ボタンが自動で更新されるわけではありません。既存のボタンの見た目や動作を変えたい場合は、新しいコードを生成して、古い埋め込みコードと差し替えます。

Shopifyの購入ボタンの埋め込み方法

購入ボタンをウェブサイトに埋め込むには、生成したコードをコピーして、自社サイトに貼り付けます。購入ボタンを表示させたいページのHTMLファイルやHTML編集画面を開き、希望する位置にコードを貼り付けましょう。 埋め込みコードを追加すると、設定内容に応じて購入ボタンやカートが表示され、Shopify管理画面と連携します。具体的な埋め込み方法は次のとおりです。

• Shopifyのブログに購入ボタンを埋め込む手順
• WordPressに購入ボタンを埋め込む手順
• Wixに購入ボタンを埋め込む手順
• 個別にスクリプトタグを追加する手順

Shopifyのブログに購入ボタンを埋め込む手順

1. Shopifyの管理画面から、[コンテンツ]>[ブログ記事] に移動します。
2. 編集したいブログ記事を選択するか、 [ブログ記事を作成する] をクリックして、新しいブログ記事を作成します。
3. [コンテンツ] セクションのリッチテキストエディタで [HTMLを見る] をクリックします。

4. メインのテキストフィールドに埋め込みコードを貼り付けます。
5. [保存] をクリックします。

コードを追加したページをプレビューするか、公開して正常に表示されているかどうかを確認しましょう。

ShopifyのオンラインストアやShopifyブログに購入ボタンを追加すると、標準のチェックアウト機能と干渉する可能性があります。そのため、購入ボタンの代わりにカートのパーマリンクを使用することをおすすめします。

WordPressに購入ボタンを埋め込む手順

1. Shopifyで購入ボタンを作成し、[埋め込みコード] ダイアログから埋め込みコードをコピーします （または、[埋め込みコードをクリップボードにコピーする] をクリックします）。
2. WordPressの管理画面から新しい投稿・固定ページを作成するか、既存の投稿・固定ページを編集します。
3. ブロックエディタ内で[+] ボタンをクリックし [カスタムHTML] を検索します。 [カスタムHTML] ブロックをクリックして挿入します。

4. [カスタムHTML] ブロックのテキストフィールドに、埋め込みコードを貼り付けます。

5. [カスタムHTML] ブロックを移動させたり、購入ボタンをプレビューしたりして、表示を確認します。購入ボタンをプレビューするには、ブロックツールバーの[プレビュー] をクリックします。
6. 完了したら、投稿またはページの[下書き保存]、[表示]、または[公開] のボタンをクリックします。

Wixに購入ボタンを埋め込む手順

サイトに埋め込む場合

1. Wixの [私のサイト] セクションから編集するサイトを選択し、[サイトを編集] または[サイトをデザイン]をクリックします。
2. Wixウェブサイトエディタの左側にある [+] ボタンをクリックします。
3. [埋め込みコード] をクリックし、[HTML埋め込み] の右側にある [+] ボタンを押します。

4. HTML設定画面が開くので、入力形式を [コード] に設定し、埋め込みコードを貼り付けて [適用] をクリックします。

5. 埋め込んだコンテンツに合わせて、HTMLコードの表示エリアのサイズを調整します。
6. 完了したら[保存]をクリックします。

ブログに埋め込む場合

1. 該当するブログ記事の [編集] をクリックするか、 [新しい記事を作成] をクリックします。
2. 左側にある [+] ボタンをクリックし、 [HTMLコード] をクリックします。

3. [HTMLを編集] をクリックして [Edit HTML] 画面を開きます。「コードを貼り付け」フィールドに購入ボタンまたはコレクションの埋め込みコードを貼り付けて、[保存する] をクリックします。

4. コンテンツに合わせて、HTMLコードの表示エリアのサイズを調整します。
5. 完了したら、画面の右上にある[保存]をクリックします。

複数の商品購入ボタンを埋め込むと、商品ごとに別々のカートが表示されるため、複数の商品をサイトに埋め込みたい場合には、コレクション購入ボタンを活用してください。

個別にスクリプトタグを追加する手順

Unbounce（アンバウンス）などの一部のプラットフォームでは、コードの埋め込み方が異なります。そのため、スクリプトタグを個別に追加し、購入ボタンを表示したい場所に残りのコードを貼り付ける必要があります。

1. 購入ボタンを作成する際に生成されるコードのうち、スクリプトタグと呼ばれる<script></script>で囲まれたコードをコピーします。購入ボタンのスクリプトタグは<script type="text/javascript">で始まり</script>で終わる部分です。
2. 購入ボタンを埋め込みたいサイトのヘッダー部分を開き、スクリプトタグを貼り付けて保存します。
3. 生成されたコードから、以下のように<div></div>で囲まれた部分をコピーします。<div id='product-component-2dd3c8704e6'></div>
4. 購入ボタンを埋め込むサイトのページを開き、HTMLエディタで購入ボタンを表示したい位置にコードを貼り付けます。
5. 完了したら保存し、ページをプレビューして購入ボタンが正しく表示されているか確認しましょう。

Shopifyの購入ボタンのメリット

既存のサイトで販売できる

販売する商品の情報をShopifyに登録し、生成した購入ボタンを既存ウェブサイトに貼り付けるだけで、ショッピングカート機能を追加できます。新たにECサイトを構築する手間が省けるため、その分の時間をSNSマーケティングや集客、アップセルなどの販売戦略に充てられます。

訪問者の多いサイトの集客力を活用できる

読者の多いブログや閲覧者数が多いウェブサイトを運営している場合には、その集客力を生かして商品を販売できます。閲覧中のサイトから直接購入手続きに進めるため、ECサイトへのページ遷移などのステップが不要となり、購入までの導線が短くなります。ユーザーはスムーズに購入手続きを進められるため、離脱防止にも役立ちます。

サイト訪問者の購入率を上げることにもつながるので、購入ボタンの導入はブログ収益化にも有効な手段です。販売数や売上を伸ばすためには、売れる商品ページのデザインやその特徴、成功例を参考にしてみてください。

Shopifyの決済システムを利用できる

複雑な手続きなしに、ShopifyペイメントをはじめとするShopifyの決済システムを利用できます。利用者の多いPayPay（ペイペイ）やApple Pay（アップルペイ）、Google Pay（グーグルペイ）だけでなく、必要に応じて決済サービスアプリを追加することもできます。Shopifyの安全な決済システムを利用できるため、セキュリティ面でも安心です。

Shopifyの在庫管理機能を活用できる

Shopifyの在庫管理機能を活用して、在庫管理を一元化できます。正確な在庫数を把握できる在庫追跡設定や在庫CSVファイルのエクスポート、複数拠点の在庫管理などの機能が備わっているので、新たに在庫管理システムを導入せずに在庫を管理できます。

複数サイトの販売状況を一元管理できる

購入ボタンを複数のブログ、パートナーサイト、キャンペーンページに設置しても、注文や在庫、顧客情報はShopify管理画面に集約されます。販売場所が増えても管理画面を分ける必要がないため、運用が複雑になりにくいのが利点です。

Shopify購入ボタンを使う際の注意点

デザイン変更の際は新しいボタンを作成する

一度購入ボタンを埋め込むと、ノーコードでボタンのデザインを変更することはできないため、変更したいときは新しい購入ボタンを作成する必要があります。Shopify管理画面から新しいボタンを作成し、既存の埋め込みコードを新しいコードに差し替えましょう。コードを直接編集できる場合は、HTML内で色やボタンテキスト、一部の商品コンポーネントを調整することも可能です。

販売終了した商品の購入ボタンはサイトから削除する

ウェブサイトに複数の購入ボタンを設置している場合は、販売終了した商品のボタンを忘れずに削除しましょう。 削除し忘れると、販売終了後も購入できてしまう可能性があります。購入ボタンの設置場所を記録しておき、販売終了後は速やかに削除しましょう。

購入ボタンからのサブスク販売にはアプリが必要

Shopifyの購入ボタンから直接サブスク販売を行うことはできないため、対応するアプリを導入し、チェックアウトページへのリンクを設置する必要があります。定期購読やMikawaya Subscription（ミカワヤサブスクリプション）などのアプリにはサブス販売に必要な機能が備わっています。そのため、サブスク商品を販売する場合は、通常のShopifyの購入ボタンではなく、チェックアウトページへのリンクを使用しましょう。

設置先のプラットフォームによって手順が異なる

購入ボタンはカスタムHTMLに対応している多くのウェブサイトで利用できますが、実際の設置方法はウェブサイトビルダーやテーマによって異なります。HTMLブロックやコードウィジェットに貼り付けるだけでよい場合もあれば、ページのソースコードを直接編集する必要がある場合もあります。公開前に必ずプレビューし、商品情報、カート、チェックアウトが想定どおりに動作するか確認しましょう。

まとめ

Shopifyの購入ボタンは、ウェブサイトにショッピングカート機能を簡単に追加できる便利な機能です。ノーコードでカスタマイズでき、生成されたコードを貼り付けるだけでWordPressやWixなどのサイトやブログに購入ボタンを埋め込むことができます。

新たにeコマースサイトを構築する必要がないだけでなく、既存サイトの集客力を生かして商品を販売できるため、すでに自社サイトを運営していて、これから商品販売を始めたい方にもおすすめです。ブログ、ポートフォリオ、コーポレートサイト、キャンペーンページなど、すでにアクセスが集まっているページに購入導線を追加したい方は、Shopifyの購入ボタンの導入を検討してみましょう。