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

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

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

今回は、Shopifyの購入ボタンとは何か、その作成方法とカスタマイズ方法について、埋め込み方法や注意点も合わせて解説していきます。

Shopifyの購入ボタンとは

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

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

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

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

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

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

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

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

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

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

続いて、作成する購入ボタンのタイプを選びます。ボタンタイプは以下のいずれかから選択可能です。

• 商品購入ボタン：商品を1つ表示できます。
• コレクション購入ボタン：コレクション全体を表示できます。

購入ボタンのタイプを選択したら、ボタンのデザインや機能などをカスタマイズしていきましょう。

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

Shopifyの購入ボタンは、プログラミングの知識がなく、コードが書けなくてもカスタマイズできるため、ご自身のサイトに合わせて、購入ボタンをデザインできます。具体的にカスタマイズできる要素は以下のとおりです。

購入ボタンの外観と動作

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

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

レイアウト

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

購入ボタンのカスタマイズが終わったら、 [次へ] をクリックし、貼り付けるためのコードを表示させましょう。

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

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

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

購入ボタンをウェブサイトに埋め込むには、生成したコードをコピーして、自社サイトに貼り付けます。購入ボタンを表示させたいページのHTMLファイルを開いて、任意の位置にコードを貼り付けましょう。具体的な埋め込み方法は以下のとおりです。

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（グーグルペイ）だけでなく、必要に応じて決済サービスアプリを追加することもできます。多くのECサイト管理者が利用している決済システムなので、セキュリティ面でも安心です。

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

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

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

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

一度購入ボタンを埋め込むと、ノーコードでボタンのデザインを変更することはできないので、変更したい時にはボタンを新たに作成する必要があります。Shopify管理画面から新しいボタンを作成し、購入ボタンのコードを新しいコードに置き換えましょう。

販売終了した商品の購入ボタンはウェブサイトから削除する必要がある

多くの購入ボタンをウェブサイトに埋め込んでいる場合は、忘れずに販売終了した商品のボタンを削除しましょう。削除し忘れると、実際は販売が終了していたとしても購入されてしまう可能性があります。購入ボタンの設置場所を把握しておき、販売終了後は忘れずに購入ボタンを削除しましょう。

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

Shopifyの購入ボタンからサブスクリプション販売は行えないため、他のアプリを導入してチェックアウトページへ移動するリンクを貼り付ける必要があります。定期購読やMikawaya Subscription（ミカワヤサブスクリプション）などのアプリにはこれらの機能が備わっているので、サブスクリプションを販売する場合は、通常のShopify購入ボタンではなく、チェックアウトページ用のリンクを使用してください。

まとめ

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

新たにeコマースサイトを構築する必要がないだけではなく、既存サイトの集客力を活かして商品を販売することができるので、自社サイトを持っていて、商品の販売を始めたい人にもおすすめです。ブログやコーポレートサイトをお持ちの方は、ぜひShopify購入ボタンの導入をご検討ください。

文：Masumi Murakami