個人でオンラインショップ構築をしていおりますたかぼー(@taka_forward)です。
お客さんと話をしていると、「オンラインショップを1から作れるほど予算も時間もないけど、ショップ機能を入れたいのですが、、。」という声をいただきます。
Shopifyの「購入ボタン」機能を使えば、WordPressやWixで作っている既存の自社サイトに購入機能を追加でき、オンラインショップ化ができますのでやり方を紹介します。
今の自社ホームページにカート機能だけ付けたいのですが、、。
Shopifyの「購入ボタン」機能でご要望を実現できます！
目次
WordPressとShopifyを連携できる「購入ボタン」とは？
Shopifyが標準機能として提供している、「Shopifyの決済機能だけ使用できる」機能です。
サイトの表示（フロント部分）はWordPressを使用し、決済機能についてはShopifyを使用することで、既存のサイトにオンラインショップ機能をつけられるというものです。
WordPressは全世界のWebサイトのうち、39%が使われているプラットフォームで、ホームページ制作やランディングページの制作などに使用されております。特長として、オープンソースでの開発がされているため、日進月歩で良くなっていく反面、コードが公開されているのでハッキングされやすい、という問題があります。
そのため、クレジットカードなどの情報を取り扱うオンラインショップ機能をWordPressで実装すると、万が一の情報流出の危険があります。
一方Shopifyは「世界で1番使用されているECサイトプラットフォーム」で、クレジットカードの規格であるPCI DSSレベル1を取得しております。そのため、「決済機能をつける」というためには他のサービスに比べてShopifyを使って埋め込むのがいいです。
ただ、ホームページ・ブログ制作に特化していないので、どうしてもサイトや、ブログ記事のレイアウトをリッチにしたい時にすべてShopifyでやるのは工数がかかる場合があります。
そのため、サイトのデザインはWordPressで行い、購入機能のみをShopifyで実装する場合に用いるのが「Shopifyの購入ボタン機能」になります。
WordPressとShopifyの連携する時に使う「購入ボタン機能」でできること
Shopifyは月額9ドルから使用できるサービスで（オンラインショップを持つ場合は29ドルから）、購入ボタン機能はすべてのプランで使用することができます。
購入ボタンのみを使う場合は9ドルのライトプランになるので、ライトプランでは、
- 「購入ボタン」の導入によって、既存サイトを生かしながらホームページ上で商品の販売ができるようになります
- SNSでの販売ができるようになります
- Shopifyの管理画面が使用できるため、「ストア分析」画面で売り上げ金額の合計などがわかります
といったことができることになります。
ライトプランでできないこと
① 新しくオンラインショップを作ること
② 「ストア分析」画面での詳細な項目の確認（例：どこからお客さんはアクセスしているのか？など）
WordPressとShopifyの連携する時に使う「購入ボタン機能」の使い方
ここから「購入ボタンの使い方」について紹介させていただきます。
Shopifyに登録しましょう
まずはShopifyへ登録する必要がありますので登録をしましょう。（※本来使用に月額費用が発生するのですが、登録から14日間は無料で使用できます。）
販売する商品の登録をしましょう
やり方については下記動画をご覧ください。
管理画面から「購入ボタン」機能を入れましょう
販売チャネルの右の＋ボタンを押して、「購入ボタン」を追加します。
購入ボタンタイプの選択
「購入ボタンを作成する」から、「1つの商品を登録するのか？」「コレクション（カテゴリーです）を登録するのか？」を選びます。
「商品購入ボタン」をクリックした場合
その後、商品を選ぶ画面になりますので「サイトに入れたい商品」を選択するとこのような画面になります。
ここから左列にある「カスタマイズ」を使用し、レイアウトを揃えていきます。
※初期設定でクリック時のアクションが「カートに商品を追加する」となっていますが「Add to cart」をクリックすると、このような表示になります。
テキストが英語表示なので日本語に直しつつ、フォントや色を変更できるので既存サイトのレイアウトをみつつ変更して揃えていきましょう。
「コレクション購入ボタン」をクリックした場合
商品を複数並べる場合はコレクション（カテゴリーです）を使いましょう。（※コレクションを使用する場合は、登録した商品をコレクションに登録する必要がありますので、商品登録に加えてコレクション登録もしましょう。）
サイトに載せたい「コレクション」を選択するとレイアウト調整する画面にきます。
左列にある「カスタマイズ」の設定を変更しながら、既存サイトのレイアウトに合わせてテキスト・フォント・色を変更して揃えていきましょう。
コードをコピーして表示させたい場所に貼り付けて完成です！
ここまでできましたら右上の「次へ」ボタンを押してコードを表示させましょう。
※既存サイトがWordPress（ブロックエディターを使用している）の場合
- 商品ボタンを入れたいところに移動します
- 「カスタムHTML」を使用し、先ほどコピーしたコードを貼り付けます
※既存サイトがWixの場合
- ホームページ編集画面に移動します
- 「＋（追加）ボタン」 > 「埋め込み」>「HTML iframe」で要素の枠を表示させます
- 「コードを入力」をクリックし、先ほどコピーしたコードを貼り付けます
終わりに
ここまで「既存サイトにオンラインショップ機能をつける方法」について紹介してきました。Shopifyの機能を使えば簡単にオンラインショップ機能をつけることができますのでおすすめです。
ご不明点・ご要望などありましたらお気軽にお問い合わせください！