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