すでに自社ウェブサイトを持っているけど、安心安全なシステムで商品をオンライン販売したい…!でも別のドメインでネットショップを作るのはちょっと…という方に朗報です。
実はShopifyにその夢を叶えてくれる機能があります。Shopifyの「購入ボタン」(Buy Button)という機能を使用すると、皆さまのすでにお持ちのサイトに商品やコレクションの情報を追加して、カート機能を設置することができます。つまりフロントエンドはWordPress.orgやWix、カートや決済・在庫システムはShopifyということが実現できるのです。
しかも設置は超簡単。Shopifyに商品登録をして、購入ボタンをインストール。作成されたコードを、皆さまのサイトに貼り付けるだけで、カート機能を追加することができてしまいます。
ということで本日は、WordPressなどのサイトにShopifyの購入ボタンを追加する方法をご紹介します。
*WordPress.comで作成されたサイトには購入ボタンは使用できないので、ご注意ください。
はじめる前に
購入ボタンはShopifyのすべてのプランに搭載されている機能です。月額$9のライトプランでも使用することができます。
まだ、Shopifyに登録がお済みでない方は以下から登録して無料体験を始めましょう!
ネットショップを開設しよう!
Shopify無料トライアルはこちら
メリット
まずはShopifyの購入ボタンを使用するメリットを確認してみましょう。
- セキュリティが安心
- 世界で数百万の事業者に使われている安心安全の決済システムが使えます
- 決済手段のメンテナンスの必要なし
- Shopifyが決済システムの管理をすべて行います
- 新しくネットショップを構築する必要なし
- 既存のウェブサイトをそのままネットショップのフロントとして使えるので、構築する必要がなくなります
- フロントのカスタマイズを自由に行える
- 在庫管理もEC専門のShopifyの機能を使える
など様々なメリットがあります。それでは設定方法を見ていきましょう。
Step 1
管理画面左側サイドバーの販売チャネルの「+」をクリック。続けて、購入ボタンの「+」を選択します。

Step 2
「購入ボタンを作成する」をクリックします。
続いて作成する購入ボタンの種類を選びます。今回は単品の商品の購入ボタンを作成してみましょう。「商品購入ボタン」をクリックして、購入ボタンを作成する商品を選択します。
Step 3
購入ボタンのデザイン・機能などの詳細設定を行います。
① 商品バリエーション
商品にバリエーションがある場合、購入ボタンに表示させるバリエーションを選択できます。
② レイアウトスタイル
購入ボタンのレイアウトを3種類から選択できます。
③ クリック時のアクション
購入ボタンをクリックしたときの挙動を以下の3つから選択できます。
- カートに商品を追加する
- チェックアウトに移動する
- 商品の詳細を開く
④ ボタンのスタイル
文字とボタンの位置を左・中・右から選択できます。
⑤ レイアウト
購入ボタンの画像のサイズやフォント、ボタンの文言などを変更できます。
⑥ ショッピングカート
③で「カートに商品を追加する」を選択したときに編集できます。カート画面の文言や色を変更できます。
⑦ ポップアップの詳細
③で「商品の詳細を開く」を選択したときに編集できます。商品詳細画面のポップアップの文言やフォントを変更できます。
⑧ 高度な設定
購入ボタンをクリックしてチェックアウト画面が表示される際の挙動を選択できます。
設定が終わったら「次へ」をクリックしましょう。
Step 4
ウェブサイトに貼り付けることができるコードが表示されます。
「コードをコピーする」をクリックして、
コードをWordPressなどに貼り付けましょう!
なお、WordPress、Squarespace、Wixにコードを貼り付けたい方は、ページ下部のリンクからヘルプセンターへのページへと飛び、ページ上部で言語を「English」から「日本語」へと変更してください。
日本語のリンクはこちら
なお、以上の3つ以外のホームページに購入ボタンを追加したい場合は、ウェブサイトのプロバイダーまたは公開プラットフォームに直接お問い合わせください。
あなたがお持ちのウェブサイトやブログをネットショップへと変えてみませんか?