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

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

以下の手順に従って、このアップグレードの準備を行います。

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

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

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

手順

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

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

エラーを解決する

手順

管理画面から [オンラインストア] > [テーマ] に移動します。
[...] ボタンをクリックしてから [複製] をクリックします。
他のテーマから、複製されたテーマを見つけ、[...] ボタン > [コードを編集する] の順にクリックします。この複製と未公開バージョンのテーマを使用し、編集を加えてテストします。
checkout.liquidファイルを開きます。
新しいShopify チェックアウトを使用して、複製したテーマからcheckout.liquidファイルをプレビューします。
1. 管理画面から、[チェックアウトのアップグレード] ページに移動して、[チェックアウトをプレビュー] をクリックし、複製したテーマを選択します。
2. プレビューでテスト注文を完了します。

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

新しいShopify Checkoutにアップグレードする

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

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

手順

[チェックアウトのアップグレード] ページで、[チェックアウトをアップグレード] をクリックします (このボタンはページの下部にあります)。
テーマを初めてプレビューする際にエラーが発生した場合、そのエラーが解決されていることを確認してください (上記のエラーを解決するを参照してください)。次に、複製した更新済みのテーマを公開します。
1. オンラインストアで、[テーマ] をクリックします。
2. 複製したテーマを見つけ、[...] ボタン > [公開] の順にクリックします。

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

Shopify Checkoutの新機能

Shopify Checkoutの新しいバージョンには、以下の変更と新機能が搭載されています。

サブスクリプション

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

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

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

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

アップセル

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

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

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

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

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

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

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

チップオプションの提供について詳しくはこちら。

店舗受取とローカルデリバリー

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

店舗受取とローカルデリバリーを有効にする方法を説明します。

ローカルデリバリーの追加フィールドは、ローカルデリバリーが有効になっていて、お客様が選択した場合に表示されます。
店舗受取が有効になっている場合、チェックアウトの [情報] ページで配達方法セクションがお客様に表示されます。配送可能でない場合、受取情報のみが表示されます。
配達方法は別個のタブとして表示されます。 - 配送を選択すると、お客様は配送情報を入力するよう求められます。[配送方法の選択へ進む] をクリックすると、利用可能な配送方法が表示されます。 - 受取を選択すると、受取ロケーションのリストが表示されます。お客様は、希望の受取ロケーションのラジオボタンをクリックし、[決済へ進む]] をクリックします。
お客様がチェックアウトの配送手順で [受取] を選択する場合、配送情報は収集されません。お客様は、チェックアウトの決済手順で請求情報を入力する必要があります。
注文状況ページには、ローカルデリバリーの指示が表示されます。管理画面にアクセスし、[設定] > [配送と配達] で編集できます。[店舗受取] セクションで、編集するロケーションを見つけて [管理] をクリックします。
注文状況ページが更新され、配達と受取の進行状況が表示されます。以下の場合にはメッセージが表示されます。 - 注文の配達の準備が整いました。 - 配達が完了しました。このメッセージには、同じアイテムを再注文するためのリンクも用意されています。 - 受取注文が確認されました。受取の準備が整ったときにお客様がメールを受け取ることを示しています。 - 受取注文の受取準備が整いました。 - 受取注文の受取が完了しました。

追加の国際フィールド

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

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

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

Shopボタンで注文を追跡する

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

Shopアプリについて詳しくはこちら。

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

注文状況ページの更新

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

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

一般的なファイルの変更

div.content-box__row にrole="table"が追加されました。
お客様がサンキューステップに入っており、QRバンドルがある場合には、show_qr.jsが追加されます。
お客様のチェックアウトへのアクセスを確認するために、チェックが追加されました。
checkouts/order_status/gift_cardsでギフトカードが表示されるようになりました。
連絡先情報の指示はenforce_content_directionalityで決定されるようになりました。
配送情報はcheckouts/web/checkouts/contact_information/pickupに移動されました。
注文サマリーのサイドバーで複数の配送の行がサポートされるようになりました。
tr.total-line は更新された合計がある場合にのみ表示されます。
一般的な決済の行がサポートされるようになりました。
チェックアウト中に通貨を変更することがサポートされるようになりました。
#payment-gateway-subfields に以下のクラスが追加されました。 - .radio-wrapper content-box__row .content-box__row--secondary - .card-fields-container
クレジットカードのツールチップの調整が完了し、div.field__iconになりました。
Ariaのラベルは配送料の詳細な説明から削除されました。
配送料のフォームフィールドはcheckouts/web/checkouts/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.total-line--subtotal 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_marketing_field
Change_billing_address_link
Change_contact_method_link
Change_payment_method_link
Change_pickup_method_link
Change_shipping_address_link
チェックアウト入力フィールド: - {type}_address_field - {type}_firstname_field - {type}_lastname_field - {type}_company_field - {type}_address1_google_autocomplete_field - {type}_address1_field - {type}_address2_field - {type}_city_field - {type}_country_field - {type}_province_field - {type}_zip_google_autocomplete_field - {type}_phone_field

アクセシビリティの向上

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

以下について、ulにrole="list"を追加しました。 - u.breadcrumb - ul.payment-method-list - ul.os-timeline - ul.policy-list
ツールチップはtelephone_fieldのaria-labelledbyから削除されました。
Shopでは、入力ラベルが電話番号を参照するように変更されました。
税務処理の待機中にh3見出しを追加しました。
リダイレクト時にh3見出しを追加しました。
配送方法の読み込み中にpタグがh3タグに変更されました。
オートコンプリートでは、phoneではなくmobile telを参照するようになりました。
role="region"を追加してdiv[data-processing-order]を更新しました。
div[data-announce-change]を以下のとおり更新しました。 - 追加済み role="region" - ヘッダー要素のIDと一致するようにaria-labelledbyを設定する - コンテンツコンテナ要素のIDと一致するようにaria-describedbyを設定する
div.content-box blank-slateを以下のとおり更新しました。 - 追加済み role="region" - ヘッダー要素のIDと一致するようにaria-labelledbyを設定する
エクスプレスチェックアウトグリッドは改良されて、divではなくulおよびliの要素を使用するようになりました。
注文サマリーを以下のとおり更新しました。 - セール価格と通常価格の見やすさの改善 - スパンをdlタグに変更 - delタグを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