基準に基づいて注文状況ページにコンテンツを表示する

このページはSep 08, 2024に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/fulfillment/setup/order-status-page/customization/displaying-content-based-on-criteriaをご覧ください。

以下の基準に基づいて、注文状況ページにコンテンツを表示することができます。

  • お客様のロケーション
  • 特定の商品の注文
  • 配送方法

目次

お客様のロケーションに基づいてコンテンツを表示する

カスタムメッセージを、特定の地域が配送先住所になっているお客様の注文状況ページにのみ追加できます。たとえば、米国ニューヨーク州のお客様にのみメッセージを表示することが可能です。複数の地域を指定することもできます。

手順

  1. 管理画面で、[設定] > [チェックアウト] の順に選択します。
  2. [追加スクリプト] テキストボックスに、以下のサンプルコードを貼り付けます。 
<script>
{% if checkout.shipping_address.country_code == 'US' and checkout.shipping_address.province_code == 'NY' %}
    Shopify.Checkout.OrderStatus.addContentBox(
    '<h2>YOUR TITLE HERE</h2>',
    '<p>YOUR MESSAGE HERE</p>'
    )
{% endif %}
</script>

  1. コードを編集し、どの地域のお客様がカスタムメッセージを受け取るかを指定します。これを行うには、コードブロックの上部にあるLiquidの{% if %} 文で国と州の略語を編集する必要があります。上記のサンプルメッセージは、米国ニューヨーク州に在住のお客様に表示されるように設定されています。

    • 他の州のお客様にメッセージを表示するには、NYからその州の略語に変更します。米国の郵便物に使用されている州の略語については、USPSの州の略語リストで確認できます。
    • ニューヨークに加えて他の州に在住のお客様にもメッセージを表示するには、and checkout.shipping_address.province_code == 'XX'を追加してXXをその州の略語に変更します。他の州をさらに追加する場合は、この手順を繰り返します。
    • 他の国のお客様にメッセージを表示するには、USをその国の略語に変更します。また、NYをその新しい国の州の略語に変更する必要もあります。州を特定しない場合、and checkout.shipping_address.province_code == 'NY'を削除します。
    • Liquidのifステートメントの記述に関するさらに詳しいガイダンスについては、コントロールフロータグのLiquidリファレンスをご覧ください。

  2. テスト注文を実行し、注文状況ページに結果を表示します。

  1. Shopifyアプリで [...] ボタンをタップして、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [追加スクリプト] テキストボックスに、以下のサンプルコードを貼り付けます。 
<script>
{% if checkout.shipping_address.country_code == 'US' and checkout.shipping_address.province_code == 'NY' %}
    Shopify.Checkout.OrderStatus.addContentBox(
    '<h2>YOUR TITLE HERE</h2>',
    '<p>YOUR MESSAGE HERE</p>'
    )
{% endif %}
</script>

  1. コードを編集し、どの地域のお客様がカスタムメッセージを受け取るかを指定します。これを行うには、コードブロックの上部にあるLiquidの{% if %} 文で国と州の略語を編集する必要があります。上記のサンプルメッセージは、米国ニューヨーク州に在住のお客様に表示されるように設定されています。

    • 他の州のお客様にメッセージを表示するには、NYからその州の略語に変更します。米国の郵便物に使用されている州の略語については、USPSの州の略語リストで確認できます。
    • ニューヨークに加えて他の州に在住のお客様にもメッセージを表示するには、and checkout.shipping_address.province_code == 'XX'を追加してXXをその州の略語に変更します。他の州をさらに追加する場合は、この手順を繰り返します。
    • 他の国のお客様にメッセージを表示するには、USをその国の略語に変更します。また、NYをその新しい国の州の略語に変更する必要もあります。州を特定しない場合、and checkout.shipping_address.province_code == 'NY'を削除します。
    • Liquidのifステートメントの記述に関するさらに詳しいガイダンスについては、コントロールフロータグのLiquidリファレンスをご覧ください。

  2. テスト注文を実行し、注文状況ページに結果を表示します。

  1. Shopifyアプリで [...] ボタンをタップして、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [追加スクリプト] テキストボックスに、以下のサンプルコードを貼り付けます。 
<script>
{% if checkout.shipping_address.country_code == 'US' and checkout.shipping_address.province_code == 'NY' %}
    Shopify.Checkout.OrderStatus.addContentBox(
    '<h2>YOUR TITLE HERE</h2>',
    '<p>YOUR MESSAGE HERE</p>'
    )
{% endif %}
</script>

  1. コードを編集し、どの地域のお客様がカスタムメッセージを受け取るかを指定します。これを行うには、コードブロックの上部にあるLiquidの{% if %} 文で国と州の略語を編集する必要があります。上記のサンプルメッセージは、米国ニューヨーク州に在住のお客様に表示されるように設定されています。

    • 他の州のお客様にメッセージを表示するには、NYからその州の略語に変更します。米国の郵便物に使用されている州の略語については、USPSの州の略語リストで確認できます。
    • ニューヨークに加えて他の州に在住のお客様にもメッセージを表示するには、and checkout.shipping_address.province_code == 'XX'を追加してXXをその州の略語に変更します。他の州をさらに追加する場合は、この手順を繰り返します。
    • 他の国のお客様にメッセージを表示するには、USをその国の略語に変更します。また、NYをその新しい国の州の略語に変更する必要もあります。州を特定しない場合、and checkout.shipping_address.province_code == 'NY'を削除します。
    • Liquidのifステートメントの記述に関するさらに詳しいガイダンスについては、コントロールフロータグのLiquidリファレンスをご覧ください。

  2. テスト注文を実行し、注文状況ページに結果を表示します。

特定の商品の注文に基づいてコンテンツを表示する

特定の商品が注文に含まれているかどうかを確認するために、checkout.line_itemsを使用して繰り返し処理する方法について説明します。

手順

  1. 管理画面で、[設定] > [チェックアウト] の順に選択します。
  2. [追加スクリプト] セクションまでスクロールします。
  3. 以下のコードをクリップボードにコピーします (Macの場合はcommand + c、Windowsの場合はctrl + cを押す)。 
<script>
  {% for line in checkout.line_items %}
    // DEBUG looking at {{ line.title }}
    {% if line.title == 'Downloadable product' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        '<p>Download your product <a href="#">Here!</a></p>'
      )
    {% endif %}
  {% endfor %}
</script>
  1. コードを [追加スクリプト] ボックスに貼り付けます (Windowsの場合はctrl + V、Macの場合はcommand + Vを押す)。
  2. テスト注文を完了し、注文状況ページを表示します。
  1. Shopifyアプリで [...] ボタンをタップして、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [追加スクリプト] セクションまでスクロールします。
  4. 以下のコードをクリップボードにコピーします (Macの場合はcommand + c、Windowsの場合はctrl + cを押す)。 
<script>
  {% for line in checkout.line_items %}
    // DEBUG looking at {{ line.title }}
    {% if line.title == 'Downloadable product' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        '<p>Download your product <a href="#">Here!</a></p>'
      )
    {% endif %}
  {% endfor %}
</script>
  1. コードを [追加スクリプト] ボックスに貼り付けます (Windowsの場合はctrl + V、Macの場合はcommand + Vを押す)。
  2. テスト注文を完了し、注文状況ページを表示します。
  1. Shopifyアプリで [...] ボタンをタップして、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [追加スクリプト] セクションまでスクロールします。
  4. 以下のコードをクリップボードにコピーします (Macの場合はcommand + c、Windowsの場合はctrl + cを押す)。 
<script>
  {% for line in checkout.line_items %}
    // DEBUG looking at {{ line.title }}
    {% if line.title == 'Downloadable product' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        '<p>Download your product <a href="#">Here!</a></p>'
      )
    {% endif %}
  {% endfor %}
</script>
  1. コードを [追加スクリプト] ボックスに貼り付けます (Windowsの場合はctrl + V、Macの場合はcommand + Vを押す)。
  2. テスト注文を完了し、注文状況ページを表示します。

配送方法に基づいてコンテンツを表示する

特定の配送方法が注文に使用されている場合、変数checkout.shipping_method.titleを持つ条件付きスプリプトを使用して、注文状況ページにコンテンツを表示することができます。

たとえば、実店舗の近隣のお客様に対して店舗受取オプションを提供するにあたり、この実店舗受け取りオプションが選択された場合には、店舗住所を注文状況ページで表示することができます。

手順

  1. 管理画面で、[設定] > [チェックアウト] の順に選択します。
  2. [追加スクリプト] セクションまでスクロールします。
  3. クリップボードに以下のコードをコピーします (Macではcommand + c、Windowsではctrl + c)。 
  <script>
    // DEBUG {{ checkout.shipping_method.title }} has been used
    {% if checkout.shipping_method.title == 'Pick-up at the store' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        `<p>Okay, we're ready for you to collect your products from 17 Mapple Crescent, Toronto. Our store is open 9:00 to 5:00 every day.</p>`
      )
    {% endif %}
  </script>
  1. このコードを [追加スクリプト] ボックスに貼り付けます(Macではcommand + v、Windowsではctrl + v)。
  2. テスト注文を完了し、注文状況ページを表示します。
  1. Shopifyアプリで [...] ボタンをタップして、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [追加スクリプト] セクションまでスクロールします。
  4. クリップボードに以下のコードをコピーします (Macではcommand + c、Windowsではctrl + c)。 
  <script>
    // DEBUG {{ checkout.shipping_method.title }} has been used
    {% if checkout.shipping_method.title == 'Pick-up at the store' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        `<p>Okay, we're ready for you to collect your products from 17 Mapple Crescent, Toronto. Our store is open 9:00 to 5:00 every day.</p>`
      )
    {% endif %}
  </script>
  1. このコードを [追加スクリプト] ボックスに貼り付けます(Macではcommand + v、Windowsではctrl + v)。
  2. テスト注文を完了し、注文状況ページを表示します。
  1. Shopifyアプリで [...] ボタンをタップして、[設定] をタップします。
  2. [ストアの設定] セクションで、[チェックアウト] をタップします。
  3. [追加スクリプト] セクションまでスクロールします。
  4. クリップボードに以下のコードをコピーします (Macではcommand + c、Windowsではctrl + c)。 
  <script>
    // DEBUG {{ checkout.shipping_method.title }} has been used
    {% if checkout.shipping_method.title == 'Pick-up at the store' %}
      Shopify.Checkout.OrderStatus.addContentBox(
        `<p>Okay, we're ready for you to collect your products from 17 Mapple Crescent, Toronto. Our store is open 9:00 to 5:00 every day.</p>`
      )
    {% endif %}
  </script>
  1. このコードを [追加スクリプト] ボックスに貼り付けます(Macではcommand + v、Windowsではctrl + v)。
  2. テスト注文を完了し、注文状況ページを表示します。

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

無料体験を試す