Updating your Liquid templates for Scripts

If you run scripts in your online store, then you need to check how they affect the pages in your storefront. Many themes include code to support your scripts, but some do not. If your theme doesn't have the code, then you can add it.

Troubleshooting

Most issues with scripts and themes involve line item scripts that offer discounts. For example, the total price of the order is correct, but the line item prices do not show the discounts. Customers need to understand how their discounts are calculated. They want to see the original and discounted price as well as a short description of the discount. If any of these details are missing from your cart, then you need to add the Liquid code so that they appear.

检查脚本affec如何的好方法ts your storefront is to visit as a customer and perform the actions that trigger the script.

Liquid object attributes

The following lists contain Liquid object attributes that are commonly needed to support scripts in your store's cart:

Cart object attributes:

Line item attributes:

Script object:

  • Thescript objectcan be used to return information about a store's active scripts. This object can be useful when debugging scripts.

Example

The following example describes the changes that you can make to your cart.liquid template to support a line item script.

Example cart

For example, if you have a cart with three line items:

  • Soccer ball
    • Quantity: 1
    • Unit price: $15.00
  • Tennis ball
    • Quantity: 5
    • Unit price: $5.00
  • Running shoe
    • Quantity: 1
    • Unit price: $30.00

And you have published a script that applies the following discounts:

  • 10% off two or more tennis balls
  • $5 off all shoes

Then yourcart.liquidtemplate might be a simple table listing the line items and a summary of their total amounts:

class="cart">class="heading">ProductQuantityTotalclass="line-items">{% for item in cart.items %}{{ item.product.title }}{{ item.quantity }}{{ item.line_price | money }}{% endfor %}class="summary">colspan="2">Total{{ cart.total_price | money }}< / tfoot >

With the discounts applied by the script, this template creates the following table for your cart:

Product Quantity Total
Soccer ball 1 $15.00
Tennis ball 5 $22.50
Running shoe 1 $25.00
Total $62.50

Update the line items

To show the discounts applied by the script, we need to update the line items to show three key pieces of information:

  • the line price before discounts
  • the line price after discounts
  • a message describing the discounts that were applied.

To do this, use the following Liquid object attributes:

  • line_item.total_discountreturns the amount of discount that has been applied to the line item
  • line_item.original_line_pricereturns the line item price before discounts
  • line_item.messagereturns a message that describes the discounts that were applied to the line item.

It can help to differentiate the original line price from the discounted line price using a strikethrough effect:

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

Your cart should now look like this:

Product Quantity Total
Soccer ball 1 $15.00
Tennis ball 5 $22.50$25.00(10% off two or more tennis balls)
Running shoe 1 $25.00$30.00($5 off all shoes)
Total $62.50

Update the cart summary

To help the customer keep track of their order price, you should also show:

  • the original subtotal of the cart, to let customers compare the before and after discount totals
  • the total savings the customer received on their cart.

Again, to add this information, use the following Liquid object attributes:

  • cart.total_discountreturns the amount of discount applied to items in the cart
  • cart.original_total_price折扣之前返回购物车的小结。

With this information, your updated.summaryblock might look like this:

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

Your cart table should now look like this:

Product Quantity Total
Soccer ball 1 $15.00
Tennis ball 5 $22.50$25.00(10% off two or more tennis balls)
Running shoe 1 $25.00$30.00($5 off all shoes)
Subtotal $70.00
Discount savings $7.50
Total $62.50

By adding a few new Liquid objects to your templates, you can help your customers understand how their discounts are calculated.

Other examples

The following Liquid example shows the discounts for each line item:

{%ifitem.original_line_price!=item.line_price%}{{item.original_line_price|money}}{%endif%}{{item.line_price|money}}{%fordiscountinitem.discounts%}{{discount.title}}{%endfor%}

See anotherdiscount examplethat includes the Liquid code changes.

Ready to start selling with Shopify?

Try it free