Shopify開発ストアでテスト注文を行う | SkillhubAI(スキルハブエーアイ)

Shopify開発ストアでテスト注文を行う

file

ある程度ストアの作成ができたら、ちゃんと注文できるか試したいですよね。

今回は、開発ストアでテスト注文を行う方法を解説します。 税率や送料が正しく設定できているか、商品を購入したお客様にはどう連絡されるのか、Shopifyストアの挙動を確認してみましょう。

テスト注文とは

ShopifyなどのECサービスでは、テストモードやテスト注文と呼ばれる、架空の取引を行って動作チェックができる仕組みが用意されています。

テスト注文を行うことで、決済サービスが問題なく動くか、購入者やストア運営者への通知がどのようになるかを確認することが出来ます。 前回設定した、配送料金がきちんと適用されるかもチェックできますね。

Shopifyのテスト注文方法は?

Shopifyで使えるテスト注文方法として、以下の4つが紹介されています。

  • ShopifyのBogus Gatewayを使用してテストする
  • Shopifyペイメントのテストモードを使用する
  • 外部決済サービスのテストモード
  • 実際の取引によるテスト

引用元 : 開発ストアでの注文のテスト · Shopify ヘルプセンター

この中で、開発ストア、もしくは自分がストアオーナでないストアでのテスト注文に最も使いやすいのが一番上のBogus Gatewayを使う方法です。

開発ストアでは実際の取引ができませんし、Shopifyペイメントは有効化しないとテストモードが使えません。有効化には事業所の所在、売り上げの振込先などの登録が必要なので、制作者側でやるのはちょっとハードルが高いですね。外部決済サービスのテストモードも同様です。

ですので、下記ではBogus Gatewayを使ってテスト注文を行っていきます。

Shopifyでのテスト注文手順

1.Bogus Gatewayを有効化する

ストアダッシュボードから設定を開きます。 メニューの中から決済に進んでください。

file

決済画面の上部に、開発ストアでは~という注意文が表示されています。 見出し下の「決済サービスをテストする」というリンク文字をクリックしてください。

file

テスト用Bogus Gatewayの画面に変わります。

「(fot testing)Bogus Gatewayを有効化する」ボタンで、有効化してください。

file

file

有効化できたら、上部の アイコン、もしくはメニューから決済をクリック。

決済のトップに戻ります。

file

上図のように「テスト用Bogusゲートウェイ」の表示が増えていればOKです。

2.注文通知のメールアドレスを確認する

Shopifyでは注文が入ると、登録されているメールアドレスに「注文が来たよ!」と通知を送ってくれます。 テスト注文時、このメールが届くか確認できるよう登録を確認しましょう。

設定で、ストアの詳細を開きます。 連絡先情報のメールアドレスでShopifyがあなたへ連絡したい時に使用するメールアドレスです と書かれているところのメールアドレスに通知が来ます。 利用可能なメールアドレスが登録されているか確認してください。

変更する場合は、右上の「編集」でできます。

file

メール通知のチェックだけなら場合、両方同じメールアドレスで大丈夫。 実際のストアを運用する場合は、“Shopifyがあなたへ連絡したい時に使用する” と “差出人として表示される” メールアドレスは別のメールアドレスを設定すると良いです。

3.テスト注文を実行する

ストアのページを開いて、商品を注文してみましょう。 ストアダッシュボード、オンラインストア横にある目のアイコンから開けます。

file

何でも良いので、商品をカゴに入れてください。

file

購入手続きへ進みます。

フォームを埋めていきましょう。

file

ストアから注文完了などのメールが配信されるか確認できるよう、メールアドレスは使えるものを入力してください。 それ以外は適当に入れて問題ありません。

地域によって送料が変わる場合は、設定通りになるか試してみると良いでしょう。

file

入力できたら、配送方法の選択に進みます。 そのまま、お支払いに進んでください。

file

支払い情報の入力画面が開きます。 ここで、有効化した(fot testing)Bogus Gatewayの出番です。 以下の情報を入力してください。

カード番号 1
(2は取引失敗、3は例外の結果を試せます)
カード所有者の名前 Bogus Gateway
有効期限(月/年) 今より先の日にちならOK
セキュリテキーコード 3桁の数字ならOK

file

今すぐ支払うをクリック。 thank youページ(ご注文が確認されました)が開いたら、テスト注文成功です!

file

4.ストア側のフロー確認

注文が入った時の、ストア側(ECサイトオーナー側)の表示を確認しましょう。 あわせて、注文確認後のオーソドックスな操作もやってみましょう。

4-1.注文を確認する

【A:管理画面から確認する場合】 Shopifyのストアダッシュボードを開く、開いている方はリロードしてください。 注文管理のところに「1」と、1件注文が来ているよ!という通知が表示されます。

file

注文管理を開いてみましょう。

ご注文情報が表示されています。 行をクリックすると詳細を確認できます。見てみましょう。

file

file

【B:通知メールから確認する場合】 注文があると、Shopifyから自動通知メールも配信されます。『2.注文通知のメールアドレスを確認する』で登録したメールアドレスの受信箱を確認して下さい。

file

注文を表示する、配送ラベルを作成、どちらのボタンからでも、注文詳細ページが開きます。

file

4-2.支払いを確認する

ご注文が入ったら、代金が支払われているか確認します。 今回のテスト注文はカード払い(成功)なので、支払い済みになっています。

file

※手動決済-銀行振込などの場合は、自分でステータスを変更する必要があります。

4-3.商品を発送する

注文された商品の代金が支払われたら、ストアが行うことは商品の発送です。

発送したら、Shopifyにこの商品は発送済みである、と記録します。 記録するには注文詳細画面の「アイテムをフルフィルメント」を使います。

file

「アイテムをフルフィルメント」を押すと、配送情報の入力画面が開きます。 追跡可能な方法で配送している場合は、追跡番号等を入力して、お客様へ通知してあげると良いでしょう。

「アイテムをフルフィルメントする」をクリックすると、発送情報が確定されます。

file

file

発送済のステータスが表示されていたら完了です。

5.購入者目線での確認

次に、お客様(購入者)側として確認してみましょう。 と言っても、カード決済なら、購入後は「連絡が来るか」「商品が来るか」くらいですね。テスト注文なので、ショップからどんな感じでお知らせが届くかだけ確認しましょう。

【注文完了の通知メール】

file

【発送完了の通知メール】

file

【注文を表示するボタンで開くページ】

file

お客様に送るメールの設定は?

フルフィルメントステータスと連動してお客様に配置されるメール。 メールの文面はストアダッシュボードの設定 > 通知 から確認・変更が可能です。

file

file

チェックボックスがある項目は、チェックが入っていると自動送信されるものです。

file

メール文章はそれぞれのタイトル(リンク文字)をクリックすると確認できます。

file

コードを編集ボタンで、打ち替えも可能です。 (※編集はHTMLとLiquidがある程度わからないと難しいです)

Bogus Gatewayを無効化

テスト注文が終わったら、テスト注文のために有効化している (for testing) Bogus Gatewayを無効化しておきましょう。

設定 > 決済 から (テスト用) Bogusゲートウェイの横の「管理する」をクリック。

file

(テスト用) Bogusゲートウェイを無効にする をクリックします。

file

これでテスト注文は完了です。 お疲れ様でした。