スクリプト用のLiquidテンプレートを更新する

オンラインストアでスクリプトを実行する場合は、ストアフロントのページに与える影響を確認する必要があります。テーマの多くにはスクリプトに対応するコードが含まれていますが、コードが含まれていない場合もあります。テーマにコードが含まれていない場合、追加することが可能です。

Shopify Plus

ShopifyスクリプトとScript Editorアプリは、Shopify Plusのマーチャントのみ利用できます。Shopify App StoreからScript Editorアプリをダウンロードすることはできなくなりました。

2025年8月28日に、Shopifyスクリプトは削除され、機能しなくなります。この期限より前に、既存のスクリプトをShopify Functionsに移行してください。

トラブルシューティング

スクリプトやテーマに関する問題のほとんどは、ディスカウントを提供する項目スクリプトが含まれています。たとえば、注文の合計金額は正しいものの、項目の価格にはディスカウントが表示されません。お客様はディスカウントの計算方法を理解する必要があります。元の価格とディスカウント価格、そしてディスカウントの簡単な説明をお客様に表示する必要があります。これらの詳細のいずれかがカートに表示されていない場合、Liquidコードを追加して表示する必要があります。

スクリプトがストアフロントにどのように影響するかを確認するには、お客様としてストアを訪問し、スクリプトがトリガーされるアクションを実行することが有効です。

Liquidオブジェクトの属性

以下のリストには、ストアのカート内のスクリプトに対応するために、一般的に必要なLiquidオブジェクト属性が含まれています。

カートオブジェクトの属性

• cart.total_discount
• cart.original_total_price

項目の属性

• line_item.discounts
• line_item.message
• line_item.original_price
• line_item.original_line_price
• line_item.total_discount

スクリプトのオブジェクト

• スクリプトのオブジェクトは、ストアのアクティブなスクリプトについての情報を返すために使用できます。このオブジェクトは、スクリプトをデバッグするときに便利です。

例

以下の例は、項目スクリプトに対応するためにcart.liquidテンプレートに加えることができる変更を説明しています。

カートの例

たとえば、以下の3つの項目を含むカートがあるとします。

• サッカーボール

  • 数量: 1
  • 単価: 15.00ドル

• テニスボール

  • 数量: 5
  • 単価: 5.00ドル

• ランニングシューズ

  • 数量: 1
  • 単価: 30.00ドル

以下のディスカウントを適用するスクリプトを公開しています。

• テニスボールを2つ以上購入で10%オフ
• すべてのシューズを5ドルオフ

次に、cart.liquidテンプレートは、項目とその合計額の概要を一覧表示する簡単な表です。

<table class="cart">
  <thead class="heading">
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>

  <tbody class="line-items">
    {% for item in cart.items %}
    <tr>
      <td>{{ item.product.title }}</td>
      <td>{{ item.quantity }}</td>
      <td>{{ item.line_price | money }}</td>
    </tr>
    {% endfor %}
  </tbody>

  <tfoot class="summary">
    <tr>
      <td colspan="2">Total</td>
      <td>{{ cart.total_price | money }}</td>
    </tr>
  </tfoot>
</table>

スクリプトによってディスカウントが適用されると、このテンプレートによりカートには以下の表が作成されます。

商品	数量	合計
サッカーボール	1	15.00ドル
テニスボール	5	22.50ドル
ランニングシューズ	1	25.00ドル
合計		62.50ドル

項目を更新する

スクリプトによって適用されるディスカウントを表示するには、3つの重要な情報を表示するように項目を更新する必要があります。

• ディスカウント前の項目の価格
• ディスカウント後の項目の価格
• 適用されたディスカウントを説明するメッセージ

実行するには、以下のLiquidオブジェクト属性を使用します。

• line_item.total_discount 項目に適用されたディスカウント金額を返す
• line_item.original_line_price ディスカウント前の項目の価格を返す
• line_item.message 項目に適用されたディスカウントを説明するメッセージを返す

取り消し線効果を使用すると、項目の元の価格とディスカウントした価格を区別するのに役立ちます。

<tbody class="line-items">
  {% for item in cart.items %}
  <tr>
    <td>{{ item.product.title }}</td>
    <td>{{ item.quantity }}</td>
    <td>
      {{ item.line_price }}
      {% if item.total_discount > 0 %}
        <s>{{ item.original_line_price }}</s>
        ( {{ item.message }} )
      {% endif %}
    </td>
  </tr>
  {% endfor %}
</tbody>

カートは以下のように表示されます。

商品	数量	合計
サッカーボール	1	15.00ドル
テニスボール	5	22.50ドル25.00ドル (テニスボールを2つ以上購入で10%オフ)
ランニングシューズ	1	25.00ドル30.00ドル (すべてのシューズを5ドルオフ)
合計		62.50ドル

カートサマリーを更新する

お客様が注文価格を把握できるようにするには、以下の内容を表示する必要もあります。

• お客様がディスカウント前後の合計を比較できるようにするためのカートの元の小計
• お客様のカートに適用された合計値引き額

この情報を追加するには、以下のLiquidオブジェクト属性を使用します。

• cart.total_discount カート内のアイテムに適用されたディスカウント金額を返す
• cart.original_total_price ディスカウント前のカートの小計を返す

この情報を使用して更新された.summaryブロックは、以下のようになります。

<tfoot class="summary">
  <tr>
    <td colspan="2">Subtotal</td>
    <td>{{ cart.original_total_price | money }}</td>
  </tr>
  <tr>
    <td colspan="2">Discount Savings</td>
    <td>{{ cart.total_discount | money }}</td>
  </tr>
  <tr>
    <td colspan="2">Total</td>
    <td>{{ cart.total_price | money }}</td>
  </tr>
</tfoot>

カートの表は以下のように表示されます。

商品	数量	合計
サッカーボール	1	15.00ドル
テニスボール	5	22.50ドル25.00ドル (テニスボールを2つ以上購入で10%オフ)
ランニングシューズ	1	25.00ドル30.00ドル (すべてのシューズを5ドルオフ)
小計		70.00ドル
ディスカウントによる値引き		7.50ドル
合計		62.50ドル

いくつかの新しいLiquidオブジェクトをテンプレートに追加することで、お客様がディスカウントの計算方法を把握できるようになります。

その他の例

以下のLiquidの例は、各項目のディスカウントを示しています。

  {% if item.original_line_price != item.line_price %}
  <small class="original-price"><s>{{ item.original_line_price | money }}</s></small>
  {% endif %}
  {{ item.line_price | money }}
  {% for discount in item.discounts %}
  <small class="discount">{{ discount.title }}</small>
  {% endfor %}

Liquidコードの変更を含む別のディスカウント例を参照してください。