オンラインチェックアウトをアップグレードする

オンラインチェックアウトをカスタマイズして、ブランドの拡大、メッセージの変更、オファーの提供、その他の顧客体験の向上を行うことができます。カスタマイズがShopifyによる進行中の変更と互換性を保てるように、チェックアウトを定期的に更新する必要があります。

このアップグレードを準備するには、次の手順を実行する必要があります。

  1. 新しいチェックアウトをプレビューして、顧客向けのチェックアウト体験をテストします。チェックアウトに対して行ったカスタマイズによっては、checkout.liquidファイルに変更を加えないとアップグレードできない場合があります。
  2. 変更内容に満足する場合、新しいShopifyチェックアウトを使用するようストアをアップグレードします。

エラーがないかどうかチェックアウトをプレビューしてテストする

ストアをアップグレードして新しいバージョンのチェックアウトを使用する前に、必ず変更点をプレビューしてください。

チェックアウトをプレビューする

自分が顧客だと仮定して、テスト用のチェックアウトを作成します。テスト中にエラーが発生した場合、チェックアウトのカスタマイズの一部が、新しいバージョンで他の改良機能と競合しています。その場合アップグレードする前に、checkout.liquidファイルに変更を加えます。

エラーを解決する

手順:

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. [アクション] をクリックし、[複製] をクリックします。
  3. 他のテーマから、複製されたテーマを見つけて、[アクション] > [コードを編集する] をクリックします。この複製と未公開バージョンのテーマを使用して、編集を加えてテストします。
  1. checkout.liquidファイルを開きます。

  2. 新しいShopify チェックアウトを使用して、複製したテーマからcheckout.liquidファイルをプレビューします。

    1. 管理画面のチェックアウトのアップグレードページに移動し、[チェックアウトをプレビューする] をクリックして、複製したテーマを選択します。
    2. プレビューでテスト注文を完了します。

チェックアウトの視覚的な表示方法にエラーや問題がある場合は、checkout.liquidファイルを編集して対処する必要があります。

新しいShopifyチェックアウトにアップグレードする

チェックアウトのアップグレードは、Shopifyチェックアウトのアップグレードと、現在公開されているテーマを変更内容が含まれている複製コピーに置き換える作業の2つの処理で構成されます。

潜在的な中断を最小限に抑えるために、忙しくない時間帯 (早朝、深夜、週末など) を選んでアップグレードを行ってください。

手順:

  1. チェックアウトのアップグレードページで、[チェックアウトをアップグレード] をクリックします (このボタンはページの下部にあります)。

  2. テーマを初めてプレビューする際にエラーが発生した場合、そのエラーが解決されていることを確認してください (上記のエラーを解決するを参照してください)。次に、複製した更新済みのテーマを公開します。

    1. オンラインストアで、[テーマ] をクリックします。
    2. 複製したテーマを見つけて、[アクション] > [公開] をクリックします。

これでチェックアウトがアップグレードされて、複製したテーマが現在のテーマになります。

Shopifyチェックアウトの新機能

Shopifyチェックアウトの新しいバージョンには、以下の変更と新機能が含まれています。

  • ディスカウントのliquid変数
  • Shopのオプトイン
  • 注文編集
  • アクセシビリティの向上
  • 余白が削除されました
  • 決済方法の表示
  • プレースホルダー文字列が削除されました
  • 保存されたお客様のアドレス表示
  • 3Dセキュア認証
  • GoogleアナリティクスJavaScriptの追加フィールド変更
  • CSSの変更
  • エラーメッセージ

ディスカウントのliquid変数

ディスカウントの表示に関連するいくつかの新しいLiquid変数は、チェックアウトプロセス全体で導入されています。これらの変更は、お客様にとって理にかなった方法で自動とスクリプトベースのディスカウントを表示するのに役立ちます。

新しいLiquid変数をリストした表
変数 定義
checkout.cart_level_discount_applications チェックアウトのカート固有のディスカウントアプリケーションの配列を返します。
discount_allocations line_item ディスカウントされた金額と親ディスカウントアプリケーションへの参照を含むすべてのディスカウント割り当てのリストを返します。line_item.discount_allocationsは、カート、チェックアウト、注文、下書き注文の項目で利用可能です。
final_line_price line_item 項目内のすべてのアイテムの合算価格を返します。これはline_item.quantityを乗算したline_item.final_price値と等しくなります。
final_price line_item すべての行レベルディスカウント額を含む項目の価格を返します。
line_level_discount_allocations line_item ディスカウント額と親ディスカウントアプリケーションへの参照を含む、項目固有のディスカウント割り当てのリストを返します。line_item.line_level_discount_allocationsは、カート、チェックアウト、注文、下書き注文の項目で利用可能です。
line_item.total_discount 項目に適用されたすべてのディスカウントの合計額を返します。この属性には、Script Editorアプリを使用している場合にのみ値が設定されます。

Shopのオプトイン

注文状況ページには、専用の電話番号フィールドが追加されました。お客様は、テキストで配送の更新を受け取るための携帯電話番号を入力するよう求められます。これらのテキストには、Shopアプリへのリンクも含まれています。

注文編集

Shopify Plusマーチャントの注文編集が可能になると、Shopifyのチェックアウトを使用して、編集された注文に対する追加の未払い決済を回収することができます。チェックアウトページには、意図したとおりに動作するようにいくつかの変更があります。

  • お客様は、連絡先情報、配送先住所、配送方法を変更することはできません。
  • 注文の合計とすでに支払われた金額を示す追加の項目。
  • [購入を完了] ボタンが [今すぐお支払い] に変わります。支払う金額に対する合計の変更。
  • お客様がチェックアウトプロセスのどこにあるかを表示するパンくず情報の代わりに、お客様には、注文に関する追加情報の詳細を表示する折りたたみ可能なバナーが表示されます。 - 追加の支払い額。
    • 商品が追加または削除されました。
    • 注文番号

追加決済が必要な場合のチェックアウトページを表示する画像

これらの変更は、注文が編集された場合にのみ有効になり、お客様からの追加の支払いが必要になります。

チェックアウトのカスタマイズでチェックアウトの現在のステップを識別するためにパンくずを使用している場合は、代わりにShopify.Checkout.stepオブジェクトを使用する必要があります。詳細については、ステップ識別を参照してください。

アクセシビリティの向上

ウェブアクセシビリティ基準への準拠を保証するために、いくつかの変更がチェックアウトに導入されました。これにより、スクリーンリーダーなどのアクセシビリティ技術を使用して、お客様のチェックアウトプロセスを簡単にナビゲートすることができます。

  • パンくずは、すべてのチェックアウトステップでnav要素にラップされるようになりました。aria-current属性は、span要素からli要素に移動されました。
  • 注文概要はaside要素に存在するようになりました。
  • モバイルのお客様のクーポンコードフィールドIDは、すべてのチェックアウトステップでcheckout_reduction_codeからcheckout_reduction_code_mobileに変更されました。
  • サンキュー注文状況ページのマップにアクセシビリティ属性が追加されました。これで、マップには、配送先住所のrole=regionaria-labelがあります。
  • step またstep__sectionラッパーのdivが注文状況在庫切れサンキューの各ページに追加されました。
  • セマンティックHTML5要素がチェックアウトプロセスに導入され、role属性が更新されました。 - これで、注文概要はaside要素内にあります。
    • .main__headerのdivは、role=bannerのヘッダー要素になりました。
    • .main__contentのdivは、role=mainのメイン要素になりました。
    • .main__footerのdivは、role=contentinfoのフッター要素になりました。
    • bannerのdivは、role=bannerのヘッダーになりました。

余白が削除されました

注文状況在庫切れサンキューページには、ショップ名と注文番号の間に空白が削除されています。この追加の余白はdiv.section.section--page-titleセクションから削除されました。

決済方法の表示

注文の合計金額が、決済方法セクションの注文状況ページでお客様に表示されるようになりました。

注文の合計金額を表示する注文状況ページの画像

プレースホルダー文字列が削除されました

メールのプレースホルダーメールまたは携帯番号のプレースホルダーフィールドは、テーマ設定の言語オプションから削除されました。必要な変更は、それぞれメールラベルメールまたは携帯番号ラベルフィールドで行うことができます。これらのフィールドにアクセスするには、[オンラインストア] > [テーマ] に移動し、[アクション] > [言語を編集する] > [チェックアウトとシステム] をクリックします。

保存されたお客様のアドレス表示

ログインしたお客様のチェックアウト時に保存されたアドレスの表示方法が変更されました。

保存されたアドレスのリストを表示する画像

アドレスオプションは、以下の順序で表示されます。

  1. デフォルトで保存されたアドレス。
  2. 最近追加されたアドレス (新着順)。
  3. 新しいアドレスを使用するオプション。

ドロップダウンメニューには最大5つのアドレスが表示されます。

3Dセキュア認証

3Dセキュアテクノロジーは、お客様が購入を完了する前に完了する必要がある追加のセキュリティ層を提供し、Visa、Mastercard Identity Check、またはAmex SafeKeyによる検証などのサービスを強化します。チェックアウト中、一部のお客様は、追加認証のために銀行のポータルにリダイレクトされる場合があります。詳細については、「PSD2および本人による確実な認証の理解」を参照してください。

欧州経済地域 (EEA) にあるマーチャントは、Cardinalを使用して3Dセキュアチェックアウトを提供することができます。詳細については、「Cardinalを使用した3Dセキュア」を参照してください。

追加の確認が必要なチェックアウトの決定は、銀行によって決定されます。管理画面から制御することはできません。この変更を有効にするためのアクションは必要ありません。

GoogleアナリティクスJavaScriptの追加フィールド変更

管理画面のオンラインストア > 各種設定 の「GoogleアナリティクスJavaScript」セクションに入力されたJavaScriptは、非表示のiFrameとしてチェックアウトに追加されます。これは、ストア分析目的で使用されるJavaScriptには影響しませんが、チェックアウトに対して他の変更が行われないようにします。他の理由でチェックアウトにカスタムJavaScriptを追加する場合は、それをcheckout.liquidファイルに直接追加します。

CSSの変更

heading-* また、text-containerのCSSクラスがすべてのチェックアウト手順に追加されました。

エラーメッセージ

選択したエクスプレスチェックアウトの決済方法が利用できない場合にお客様に通知するエラーバナーが追加されました。このバナーは、チェックアウトの連絡先情報ステップの上部に表示されます。

画像

以前の配送料が無効になったことをお客様に通知するエラーバナーが移動されました。このバナーは、利用可能な配送オプションの真上に表示されるようになりました。

画像

関連リンク

Shopifyで販売を開始する準備はできていますか?

無料体験を試す