こんなに簡単！ShopifyとWordPressを連携する方法

この記事の所要時間：5分

いますでにサイトを運営している方が、新しくネットショップを始めようと考えた際、多くの方は既存サイトで商品を販売したいと思います。

既存サイトは、運営期間やコンテンツの質、アクセス数などによってSEOの観点で有利に働きます。また、既存のユーザーにとって同じサイトでの商品販売の方がユーザービリティが良いのもメリットです。

そんな既存サイト上での商品販売ですが、Shopifyを活用することで簡単に実現できます。

そこで今回は、一例としてWordPressとShopifyを連携してWordPress上で商品を販売する方法をご紹介します。

本記事を読めば、いますぐにあなたのサイトでも商品を販売することができるので、ぜひ参考にしてください。

WordPressとShopifyを連携する方法

WordPressとShopifyを連携する方法は2パターンあります。

一つはWordPressにShopifyの購入ボタン(カート機能)を埋め込み、Shopifyの決済機能を利用する方法です。

https://ichyaku.com[WordPress] → https://myshopify.com[Shopify]

というようにページ遷移します。

もう一つは、WordPressで使用しているドメインにサブドメインでShopifyのネットショップを設定する方法です。

https://ichyaku.com[WordPress] → https://shop.ichyaku.com[WordPress]

というようにページ遷移します。

Shopifyの購入ボタンをWordPressに埋め込み商品を販売する場合は、ネットショップのような商品一覧を表示するのではなく、記事中やサイトのサイドメニューに購入ボタンを設置します。

本記事では、WordPressに購入ボタンを設定する方法について解説します。

すでに持っているサイトのサブドメインにShopifyを設定したい方は、以下の記事で紹介しているので、そちらを参考にしてください。

Shopifyサイトにサブドメインを設定する1番簡単な方法

1. Shopifyの初期設定

プランの契約

まずは通常と同じようにShopifyのプランを契約します。

Shopifyのカート機能(購入ボタン)は、スタータープランという月額5ドルのプランでも利用することができます。

コチラからShopifyにアクセスし、「メールアドレス」「パスワード」「ストア名」「ストアURL」を入力して「無料体験をはじめる」をクリックします。

アンケートに答えてShopifyの管理画面まで進みます。管理画面にあるShopifyプランのバナーをクリックしてプランを契約します。

商品を追加

Shopifyの登録が完了したら販売する商品の登録を行います。

Shopifyの管理画面から「商品管理 > 商品を追加する」をクリックし、商品情報を入力します。

商品登録については、以下の記事でご紹介しているので参考にしてください。

初心者必見！Shopifyの商品登録をわかりやすく徹底的に解説

決済方法の設定

次に決済方法を設定します。

Shopifyでは、Shopifyペイメントという決済システムがデフォルトで設定されているため、Shopifyペイメントを有効にするだけで、主要なクレジットカードやApple Pay、Google Payでの決済に対応することができます。

Shopifyの管理画面から「設定 > 決済」をクリックします。画面上部にある「Shopifyペイメントを有効にする」をクリックし、必要な情報を入力して完了です。

ショップ情報(電話番号など)の入力を行っていない方は、先にショップ情報を入力してください。

Shopifyペイメントについては、以下の記事でご紹介しているので参考にしてください。

Shopifyペイメントとは？特徴や設定方法をわかりやすく解説

配送料を設定

次に配送料の設定を行います。

Shopifyの管理画面から「設定 > 配送と配達」をクリックします。画面上部の配送の欄にある「送料を管理する」をクリックし、国内あるいは国外の「送料を追加する」から配送料を設定します。

配送料の設定は、初めての方には少しわかりにくい内容になっているので、以下の記事を参考にしてください。

Shopifyの配送料を徹底的に理解するためのまとめ

これでShopifyの初期設定は完了です。

2. 購入ボタンの設定と編集

次に購入ボタンの作成とデザイン編集について説明します。

まず、Shopifyの管理画面から販売チャネルの横にある「＋」をクリックし、ポップアップ上の「購入ボタン」を追加します。

次に販売チャネルに追加された「Buy Button」をクリックし、「購入ボタンを作成する」をクリックします。

「商品購入ボタン」と「コレクション購入ボタン」のどちらかを選択し、対象商品を選択します。 (今回は商品購入ボタンを選択し、次に進みます。)

すると以下のような編集画面になります。右側は実際に表示される画面のプレビューです。

①レイアウトスタイル
購入ボタンをどのように表示するのか3種類から選べます
②クリック時のアクション
購入ボタンをクリックした際のアクションを「そのまま購入する」「商品をカートに追加する」「商品の詳細をポップアップで表示する」から選べます
③ボタンのスタイル
ボタンの大きさや角の丸み、カラーやフォントのデザインまで編集することができます
④レイアウト
画像のサイズや表示する位置、商品名のデザイン、ボタンの文字などを編集できます
⑤ショッピングカート
ショッピングカートを必要とする場合、そのデザインを編集することができます
⑥ポップアップの詳細
商品詳細のポップアップを必要とする場合、そのデザインを編集することができます
⑦高度な設定
チェックアウト画面を別のウィンドウを開くか、同じウィンドウで開くかを選択します
⑧プレビューの切り替え
プレビュー画面を「モバイル」「デスクトップ」「全画面表示」に切り替えることができます
⑨ショッピングカート(プレビュー)
クリックするとショッピングカートのプレビューが表示されます
⑩「次へ」進む
編集が完了したら「次へ」をクリックします。

最後に完成した購入ボタンのコードをコピーし、自社サイトに貼り付けます。

購入ボタンを表示するウェブページのHTMLエディタを開き、購入ボタンのコードをHTMLに追加します。変更を保存して完成です。

3. 購入ボタンをWordPressに設置する方法

次はWordpressに埋め込みコードを設定する方法をご紹介します。

今回は「記事に内に埋め込む」「サイトのサイドに埋め込む」の2つのパターンをご紹介します。

① 記事内に購入ボタンを埋め込む

ブログで商品を紹介する際に、その投稿の中に購入ボタンを表示することができます。

まず、投稿ページを開きます。次に投稿内でブロックエディタ（右横にある[＋]）をクリックし、「Custom HTML」を選択します。

コードを書く欄にShopifyの埋め込みコードを貼り付けて完成です。プレビューを開くと以下のように表示されていることが確認できます。

② サイトのサイドに購入ボタンを埋め込む

サイト内のサイドバーに購入ボタンを表示することができます。

まず、メニューバーの「外観 > ウィジェット > カスタムHTML」を選択します。「サイドバー > ウィジェットに追加」をクリックすると、コードを書く欄が出てくるので、Shopifyの埋め込みコードを貼り付けて完成です。

【最後に】他の決済サービスを利用する場合は注意！

今回はShopifyペイメントで決済処理を行う方法をご紹介しましたが、その他にもPayPalやAmazon Payなど、外部の決済サービスも設定することが可能です。

決済サービスによっては、他のページにリダイレクトする際にエラーが発生することがあるので注意してください。

また、実際に商品を販売する前にテスト注文を行い、実際に決済処理が正しく行われるのか確認することをオススメします。