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

このペ，ジは2023年4月12日に印刷されています。最新のバージョンについては,https://help.shopify.com/ja/manual/checkout-settings/checkout-upgradeをご覧ください。

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

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

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

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

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

手順:

  1. Shopify管理员から，[チェックアウトのアップグレ，ド]ペ，ジに移動して，[チェックアウトをプレビュ]をクリックします。
  2. リストから現在のテ，マを選択して，[プレビュ]をクリックします。
  3. 客としてチェックアウトプロセスを進め，テストチェックアウトを作成します。

テスト中にエラーが発生した場合,チェックアウトに対して行なったカスタマイズ内容の一部が,新しいバージョンにおける改良機能を妨げている可能性があります。その場合，アップグレ，ドする前にcheckout.liquidファ@ @ルを変更してください。

エラ，を解決する

手順:

  1. Shopify管理员から[オンラ电子邮箱ンストア]>[テ，マ]に移動します。
  2. [アクション]をクリックして，[複製]をクリックします。
  3. 他のテ，マから，複製されたテ，マを見，けて，[アクション]>[コ，ドを編集する]をクリックします。この複製と未公開バ，ジョンのテ，マを使用して，編集を加えてテストします。

  1. checkout.liquidファ@ @ルを開きます。

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

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

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

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

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

手順:

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

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

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

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

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

サブスクリプション

チェックアウトのカスタマイズを維持しながらサブスクリプション商品を提供できるように,Shopifyチェックアウトに複数のセクションが追加されました。これらのセクションでは,サブスクリプション商品を販売し,Shopifyチェックアウト内で定期的な支払いを直接処理することができます。

チェックアウトのアップグレ，ドを完了した後，Shopifyアプリストアからサブスクリプションアプリを追加するか，新しいサブスクリプションapiを使用してカスタムアプリを構築することで，サブスクリプションを提供できます。

Shopifyヘルプセンタでサブスクリプションの詳細をご確認ください。

  • サブスクリプションを有効にすると,サブスクリプションに使用される配送方法が,一度だけの購入とは別に表示されます。
  • .product_description_variant Span.product_description_selling_planは，商品に関連付けられたサブスクリプションがある場合，追加の項目プロパティとして表示されます。
  • 関連するルチップと合わせた定期合計は，注文サマリの合計の下に表示されます。
  • サブスクリプションの配送オプションは,サブスクリプション商品が注文に含まれている場合に表示されます。

アップセル

購入後アップセルの新アプリは，Shopifyアプリストアで利用可能です。これらのアプリでは,Shopifyチェックアウト内でお客様に購入後のオファーを直接提示し,請求情報または配送情報の再入力をせずに,完了している注文にアップセル商品が含められるように変更します。

このチェックアウトのアップグレードには,購入後アップセルがカスタマイズされたチェックアウトと連携するようにチェックアウトファイルを変更することが含まれています。

購入後アップセルにいて詳しくはこらをご覧ください。

  • 有効な購入後アプリがShopify Adminにインストールされている場合,お客様は購入後のオファーを受け取ることになります。

チェックアウト時のチップ

チップオプションを使用すると,お客様がオンライン注文にチップを含めることができるようにしたり,チップの代わりに寄付を集めたりすることができます。チップが有効になっている場合，チェックアウトの決済方法の手順にチップを追加するセクションが表示されます。チップを追加するセクションには,カスタムチップ額を入力するためのフィールドに加えて,あらかじめ選択された3つのオプションがあります。

チップオプションの提供にら。

  • チップが有効になっている場合，チェックアウトの決済方法の手順にチップを追加するセクションが表示されます。

受取とロカルデリバリ

店舗受取と配達は，お客様が注文を地元で受け取ることができる新しい配達方法です。これらの配達方法を有効にすると,お客様はチェックアウトの配送手順で店舗受取または配達を選択することができます。

店舗受取とロカルデリバリを有効にする方法を学びます。

  • ローカルデリバリーの追加フィールドは,ローカルデリバリーが有効になっていて,お客様が選択した場合に表示されます。
  • 店舗受取が有効になっている場合，チェックアウトの情報ペ，ジで配達方法セクションがお客様に表示されます。配送可能でない場合，受取情報のみが表示されます。

  • 配達方法は別個のタブとして表示されます。

    • 配送を選択すると，お客様は配送情報を入力するよう求められます。[配送方法の選択へ進む]をクリックすると，利用可能な配送方法が表示されます。
    • 受取を選択すると，受取ロケ，ションのリストが表示されます。お客様は，希望の受取ロケ，ションのラジオボタンをクリックし，[決済へ進む]]をクリックします。

  • お客様がチェックアウトの配送手順で受取を選択する場合，配送情報は収集されません。お客様は，チェックアウトの決済手順で請求情報を入力する必要があります。

  • 注文状況ペ，ジには，ロ，カルデリバリ，の指示が表示されます。Shopify管理员に行き，設定>配送と配達で編集できます。店舗受取セクションで，編集するロケ，ションを見，けて[管理する]をクリックします。

  • 注文状況ペ，ジが更新され，配達と受取の進行状況が表示されます。次の場合にメッセ，ジが表示されます。

    • 注文の配達の準備が整いました。
    • 配達が完了しました。このメッセジには，同じアテムを再注文するためのリンクも用意されています。
    • 受取注文が確認されました。受取の準備が整ったときにお客様がメールを受け取ることを示しています。
    • 受取注文の受取準備が整いました。
    • 受取注文の受取が完了しました。

追加の国際フィ，ルド

一部の国では，お客様に荷物をお届けするために出店者が守る必要がある独自の配送規制があります。独自の配送規制のある国では，追加フィ，ルドが利用可能になりました。これらの新しいフィ，ルドは，チェックアウトの決済方法手順に表示されます。

追加の国際フィルドにいて詳しくはこらをご覧ください。

  • 追加のチェックアウトフィ，ルドは，ブラジル，韓国，タリア，中国のお客様にのみ表示されます。

购物ボタンで注文を追跡する

注文状況の购物で注文を追跡するボタンとサンキュペジが新しいデザンに更新されました。

商店アプリにら。

  • 购物アプリでお客様に購入を追跡していただくためのテキストボタンが追加されました。
  • Shop Pay追跡を表示するためのパラメ，タが追加されました。
  • 次の場合は，购物ボタンで注文を追跡するをレンダリングします。
    • 不在持戻り
    • 確認
    • 配達済み
    • 失敗
    • 配送中
    • 出荷不可
    • 配達中

注文状況ペ，ジの更新

注文状況ペ，ジで，いくかの更新が行われました。

  • ギフトカ，ドが購入された場合に表示されるギフトカ，ド情報の専用セクションが作成されました。
  • サブスクリプション情報が追加されました。
  • クラスicon-svg——align-text-bottomが削除されました。
  • 数据步骤= "感谢"は数据步骤= " thank_you "に変更されました。この属性を使用して，お客様がチェックアウトしているペ，ジを特定する場合は，Shopify.Checkout.pageJavaScriptオブジェクトを代わりに使用します。
  • 注文状況カ，ドが追加されました。

一般的なファ@ @ルの変更

  • div.content-box__rowに角色= "表"が追加されました。
  • お客様がサンキュ，ステップに入っており，qrバンドルがある場合には，show_qr.jsが追加されます。
  • お客様のチェックアウトへのアクセスを確認するために，チェックが追加されました。
  • 签出/ order_status / gift_cardsでギフトカ，ドが表示されるようになりました。
  • 連絡先情報の指示はenforce_content_directionalityで決定されるようになりました。
  • 配送情報は签出/ web /次/ contact_information /皮卡に移動されました。
  • 注文サマリのサドバで複数の配送の行がサポトされるようになりました。
  • tr.total-lineは更新された合計がある場合にのみ表示されます。
  • 一般的な決済の行がサポ，トされるようになりました。
  • チェックアウト中に通貨を変更することがサポ，トされるようになりました。

  • # payment-gateway-subfieldsに以下のクラスが追加されました。

    • .radio-wrapper content-box__row .content-box__row—secondary
    • .card-fields-container

  • クレジットカ，ドの，，ルチップの調整が完了し，div.field__iconになりました。

  • 艾瑞亚のラベルは配送料の詳細な説明から削除されました。

  • 配送料のフォ，ムフィ，ルドは签出/ web /次/ shipping_method / shipping_rate_additional_fieldsに移動されました。

枠組み/読み込みの状態

チェックアウトページの読み込み状況が更新され,ページが読み込まれている間に表示される枠組みを追加したり,読み込みが完了するまで一部の要素を選択的に隠したりすることができます。これらの変更によりロ，ド時間が最適化されます。

  • 読み込み中は非表示になるオブジェクト:

    • del.total-recap__original-price
    • .total-line__price span.payment-due__currency
    • span.order-summary__emphasis

  • 読み込み中に枠組みを表示するオブジェクト:

    • Span.total-recap__final-price
    • .product__price del.order-summary__small-text
    • .product__price del.order-summary__emphasis
    • .total-line__price span.payment-due__price
    • .total-line__price span.order-summary__emphasis
    • .total-line__price span.visually-hidden
    • .total-line__price。全部下线,小计span.order-summary__emphasis

エラ，メッセ，ジ

新しいエラ，メッセ，ジがチェックアウトに追加されました。

  • 住所フィ，ルドに住所表示の警告が追加されました。
  • 利用可能な配送料がないカート,配送先,または国であることを示す警告が,2つの異なる警告メッセージに分けられました。1つは,利用可能な配送料がないカートまたは配送先であることを示す警告メッセージで,別の警告メッセージには利用可能な配送料がない国であることが示されます。
  • 開発ストアで購入を完了しようと試みる時，チェックアウトに警告バナ，が追加されました。
  • お客様がチェックアウト時に請求されない場合に表示される通知が追加されました。
  • 認証変更エラ，を示す警告バナ，が追加されました。
  • チェックアウトの配送手順で配送方法が利用できない場合に表示されるエラ，メッセ，ジが追加されました。

デ，タ属性の変更

トレッキ，は，以下のオブジェクトから削除されました。

  • Continue_shipping_button
  • Get_shipping_updates_button
  • Shipping_updates_handle_field
  • Shipping_updates_submit_button
  • Change_shipping_address_link
  • breadcrumb_cart_link
  • apply_discount_button
  • Have_an_account_login_link
  • Email_or_phone_field
  • Email_field
  • buyer_accepts_ob欧宝娱乐app下载地址marketing_field
  • Change_billing_address_link
  • Change_contact_method_link
  • Change_payment_method_link
  • Change_pickup_method_link
  • Change_shipping_address_link
  • チェックアウト入力フィ，ルド:
    • {类型}_address_field
    • {类型}_firstname_field
    • {类型}_lastname_field
    • {类型}_company_field
    • {类型}_address1_google_autocomplete_field
    • {类型}_address1_field
    • {类型}_address2_field
    • {类型}_city_field
    • {类型}_country_field
    • {类型}_province_field
    • {类型}_zip_google_autocomplete_field
    • {类型}_phone_field

アクセシビリティの向上

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

  • 以下にいて，ulに角色= "列表"を追加しました。

    • u.breadcrumb
    • ul.payment-method-list
    • ul.os-timeline
    • ul.policy-list

  • ルチップはtelephone_fieldのaria-labelledbyから削除されました。

  • 购物では，入力ラベルが電話番号を参照するように変更されました。

  • 税務処理の待機中にh3見出しを追加しました。

  • リダ@ @レクト時にh3見出しを追加しました。

  • 配送方法の読み込み中にpタグがh3タグに変更されました。

  • オ，トコンプリ，トでは，电话ではなく移动电话を参照するようになりました。

  • 角色= "地区"を追加してdiv [data-processing-order]を更新しました。

  • div [data-announce-change]を以下のとおり更新しました。

    • 追加済み角色= "地区"
    • ヘッダ要素のidと一致するようにaria-labelledbyを設定する
    • コンテンコンテナ要素のidと一致するようにaria-describedbyを設定する

  • div.content-box种“空白”を以下のとおり更新しました。

    • 追加済み角色= "地区"
    • ヘッダ要素のidと一致するようにaria-labelledbyを設定する

  • エクスプレスチェックアウトグリッドは改良されて，divではなくulおよび李の要素を使用するようになりました。

  • 注文サマリ，を以下のとおり更新しました。

    • セ，ル価格と通常価格の見やすさの改善
    • スパンを戴斯。莱纳姆:タグに変更
    • ▽タグをdtおよびddタグに変更

  • 決済の詳細を以下のとおり更新しました。

    • span.radio__label__accessoryを変更して以下としました:div.radio__label__accessory
    • span.visually-hiddenを変更して以下としました:h3.visually-hidden
    • span.payment-icon-list__moreを変更して以下としました:li.payment-icon-list__more
    • span.content-box__small-textを変更して以下としました:small.content-box__small-text

関連リンク

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

無料体験を試す