「WordPressサイトとShopifyを連携させて、商品を販売できるようにしたい」
「連携によって、コーポレートサイトとブランドカタログサイトを兼ねたい」
「具体的な連携の手順を知りたい」
本記事はそんな方のための記事です。Shopifyでは、「埋め込みコード」発行機能によってWordPressで作成したサイトにカート機能を持たせることができます。
この方法を使うことで、ECサイトを一から作らずとも、商品やサービスをWeb上で販売できるようになります。
本記事では、そんなShopifyとWordPressの連携について、Shopify Expertsに認定されている弊社が丁寧にお伝えしてまいります。
この記事のポイント
- ShopifyとWordPressの連携方法がキャプチャ付きでわかる
- ShopifyとWordPressの連携にオススメの「ライトプラン」についてわかる
- より売れるようにするためのカスタマイズやアプリもご紹介
ShopifyとWordPressを連携する6STEP
それでは、ShopifyとWordPressの連携について、画面のキャプチャ付きで解説して参ります。
なお、すでにShopifyストアを開設済みの場合は、ステップ2から。
「支払い」や「配送設定」、「製品」などの設定もすべて済んでいる場合は、ステップ5から読んでいただけると最短で回答が得られるはずです。
ステップ1：Shopifyストアをセットアップする
Shopifyストアを開設していない場合、まずストアを開設しましょう。
Shopifyでは、アカウントを作成し、まず14日間無料でトライアルができます。クレジットカードの登録等は不要。メールアドレスと簡単なアンケートの記入のみで、わずか1〜2分で簡単にアカウント作成が完了します。
これからShopifyを始める方向けの、簡単な使い方ガイドは下記を参照ください。
【関連】【2020年保存版】これからShopifyを始める方に！簡単使い方ガイド！
ステップ2：Shopifyストアの決済設定をする
Shopifyではさまざまな決済方法を有効化できます。
Shopify管理画面にて「設定」＞「決済設定」へと進みます。
クレジットカードによる支払いを有効にするには、Shopifyペイメントか外部の決済サービスを利用します。
またクレジットカード以外のオンライン決済方法には、PayPalやAmazon Pay、Apple Payなどがあります。
「決済設定」の方法は、下記の記事にて詳しく紹介しています。
【関連】Shopifyで使える決済サービス比較・設定方法【Shopify Experts認定企業が解説】
ステップ3：Shopifyストアの配送を設定する
Shopifyでは「配送」についての設定も、管理画面から行うことができます。
Shopify管理画面にて「設定」＞「配送」へと進みます。
送料を分けたい複数のエリアを設定し、それぞれのエリアに対して送料を決めることができます。また、ECにおいて、よくある送料設定である「〇〇円以上は送料無料」などの設定もShopifyでは可能です。
「配送」の設定方法は、下記の記事にて詳しく紹介しています。
【関連】【2020年保存版】これからShopifyを始める方に！簡単使い方ガイド！
ステップ4：商品をShopifyに追加する
商品をShopifyに追加しましょう。
「商品追加」をするためには、Shopify管理画面の「商品管理」ページへ遷移し、「商品を追加する」ボタンをクリックします。
商品編集画面では下記の商品情報を登録できます。
- 商品名
- 商品説明
- 商品画像
- 商品価格
- 在庫（在庫管理用のコードと在庫数）
- 配送設定（商品重量・関税用の情報）
- 商品のバリエーション
- 商品ページのSEO設定
「商品の追加方法」や「商品情報を充実させる方法」などは、下記の記事にて詳しく紹介しています。
【関連】【2020年保存版】これからShopifyを始める方に！簡単使い方ガイド！
ステップ5：「購入ボタン」の作成
ステップ4までの設定が完了したらいよいよ商品の「購入ボタン」を作成し、WordPressサイトに追加する準備をします。
まずはShopify管理画面の左サイドバーの「販売チャネル」横の「+」ボタンをクリック。
「販売チャネルを追加」ウィンドウの「購入ボタン」横の「+」ボタンをクリックします。
すると、管理画面左サイドバーに「Buy Button」が出現します。「購入ボタンを作成する」をクリックして先に進みましょう。
「ボタンタイプ」選択画面では、「商品購入ボタン」か「コレクション購入ボタン」のいずれかの購入ボタンの作成を選択します。
次の「カスタマイズ」画面では、購入ボタンのデザイン・機能などの詳細設定を行えます。
最後のステップの画面にて、「埋め込み用のコード」が生成されます。
「コードをコピーする」ボタンをクリックするとクリップボードに、コードがコピーされます。
ステップ6：「購入ボタン」をWordPressサイトに追加する
先ほどコピーした「埋め込みコード」をWordPressに貼り付ければ完了です。
WordPress上にShopifyで作成した「購入ボタン」が設置され、「購入ボタン」から実際に商品販売が可能となります。
たとえばこちらの「Gadget mart」というECサイト。人気のガジェットが集まるセレクトショップです。
このショップで販売中の商品を、Shopifyで生成した埋め込みコードを貼り付けるだけでこの記事内で販売することが可能になります。
埋め込み例
実際に上記の「購入する」ボタンをクリックすると、商品がカートに入り、決済画面に遷移します。
すると、ECサイトの「Gadget mart」での決済画面へ遷移します。
購入ボタン使用時の注意点
購入ボタン使用時、元のサイトでAmazon Payを導入している場合には注意が必要です。
購入ボタンを設置した際、元のサイトとして参照するURLは独自ドメインを載せたURLではなく、Shopifyの管理ドメイン（xxx.myshopify.com）となります。
上述の通り、リダイレクトURL（ドメイン）が異なるとAmazon Payは決済途中でエラー画面になってしまうため、対策が必要になるのです。
対策方法は、独自ドメインで登録している「JavaScriptの種類」と「リダイレクトURL」にShopifyの管理ドメインのURLを追加することです。詳しくは下記記事にてご紹介しています。
【関連】Amazon PayのShopifyへの導入手順 (注意点あり)
【TIPS】WordPressサイドバーでShopify商品を表示する方法
最後に、TIPSとしてWordPressサイドバーにShopify商品を表示させる方法をお伝えします。
方法はいたって簡単です。
WordPressの「外観」から「ウィジェット」を選択。
「カスタムHTML」の「内容」に、先ほどShopify管理画面にて取得した「埋め込みコード」を貼り付けて入力するだけです。
月額9USドルのShopify Lite（ライトプラン）について
さて、ここまでShopifyとWordPressの連携についてご紹介してきました。
もし、あなたがWordPressサイトへの埋め込みのみでShopifyを使いたい場合、Shopify Lite（ライトプラン）がオススメ。
Shopify Liteは月額9USドルの、Shopiyのライトプランです。Shopify LiteはECサイトを構築せず、Webサイト・ブログ、またはSNSにShopifyの販売機能を実装し商品を売るためのプランなのです。
WordPressで構築したサイトにECカート機能を持たせたい方、SNSをベースに商品を販売したい方、などにオススメといえます。
Shopify liteと他プランの比較表
| ライト | ベーシック | スタンダード | プレミアム | ||
|---|---|---|---|---|---|
| 費用・手数料 | 月額費用 | 9USドル | 29USドル | 79USドル | 299USドル |
| 日本の オンラインクレジットカード手数料 |
3.4% | 3.4% | 3.3% | 3.25% | |
| AMEX/海外の オンラインクレジットカード手数料 |
3.9% | 3.9% | 3.85% | 3.8% | |
| Shopifyペイメント以外の決済サービス を使用する場合の追加料金 |
2.0% | 2.0% | 1.0% | 0.5% | |
| オンラインストア | × | ◯ | ◯ | ◯ | |
| スタッフアカウント数 | 2 | 2 | 5 | 15 | |
| レポート機能 | ダッシュボードの概要 | ◯ | ◯ | ◯ | ◯ |
| 財務レポート | ◯ | ◯ | ◯ | ◯ | |
| ライブビュー | - | ◯ | ◯ | ◯ | |
| 集客レポート | - | ◯ | ◯ | ◯ | |
| 在庫レポート | - | ◯ | ◯ | ◯ | |
| 行動レポート | - | △ | ◯ | ◯ | |
| マーケティング レポート |
- | △ | ◯ | ◯ | |
| 販売レポート | - | - | △ | △ | |
| POS販売レポート | - | - | ◯ | ◯ | |
| 利益レポート | - | - | ◯ | ◯ | |
| 顧客レポート | - | - | △ | ◯ | |
| カスタムレポート | - | - | - | ◯ | |
Shopify Liteのみ切り出すと、ポイントは下記の通り。
- 月額費用9USドル
- 日本のオンラインクレジットカード手数料は3.4%
- AMEX/海外のオンラインクレジットカード手数料は3.9%
また、決済方法がShopifyペイメントなら、クレジットカード手数料がかからないのもポイントです。
他のプランとの大きな違いは、ECサイトそのものを持たず、Shopifyの管理画面のみが使用可能なこと。しかし管理画面側の機能は、他のプランとの違いはなく、Shopifyの標準機能はすべて揃っています。
今回ご紹介したようにShopifyでは、WordPressへの埋め込みコードを簡単に生成できます。
埋め込みコードを使用することで商品・コレクションの「購入ボタン」を簡単にサイトに追加でき、WebサイトにEC機能を追加できるのです。
Shopify Liteに関して詳しくは下記の記事にてご紹介しています。
【関連】ShopifyLiteとは？Shopifyであなたにあったネットショップ開業するためのおすすめプランを徹底解説
Shopifyのカスタマイズ。デザインを変えて売れるECサイトを作る方法
最後に、Shopifyのカスタマイズについても、簡単にご紹介しましょう。
Shopifyでは、管理画面からECサイトのカスタマイズが可能です。
さらにShopifyはアプリが豊富で、さまざまなアプリを使うことで、ECサイトをより便利に、より売れるようにカスタマイズ可能です。
「テーマ選び」や「レイアウト」「配色」「フォントスタイル」などの編集方法については下記の記事の【基本編】にてお伝えしています。
また【応用編】では、HTML、CSS、Liquidの知識が必要なことを前提に、Shopifyのテーマコードをカスタマイズする方法についてもお伝えしています。
【関連】Shopifyのカスタマイズ。デザインを変えて売れるECサイトを作る方法
【まとめ】ShopifyとWordPressとの連携について
本記事ではShopifyとWordPressとの連携の方法についてご紹介してきました。
この記事の要点まとめ
- Shopify管理画面で簡単に「購入ボタン」の「埋め込みコード」が発行可能
- 「埋め込みコード」をWordPressに貼り付けるだけで簡単にEC機能を実装できる
- WordPressサイトへの埋め込みのみでShopifyを使いたい場合、月額9USドルのShopify Liteがオススメ
- Shopifyでは、管理画面からECサイトのカスタマイズが可能
- 豊富なアプリを使いこなすことで、ECサイトをより便利に、より売れるようにカスタマイズ可能
本記事を参考に、さっそく送料設定をしてみましょう。
また、外注にてShopifyサイト制作をご検討の方は、国内3社目のShopify Expertsに認定された弊社にご相談ください。
【関連】自社ECをShopifyで制作
【関連】【初心者向け】Shopifyの評判ってどうなの？売れるECサイトを低価格で実現できるShopifyを考察
【関連】Wordpressのブログ記事をShopifyに移行する際の注意点
※この記事は2020年3月時点の内容です。今後のアップデートやShopifyの仕様変更等により、記事の内容どおりに設定ができない場合があります。
