Updating your Liquid templates for Scripts

If you're using Shopify Scripts, then you can update your theme's Liquid template files to show the information used by scripts such as line item discounts, messages, and original prices. By making your cart show more detail about discounts, discount messages, and original prices, you can help your customers better understand how their discounts are calculated.

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 your cart.liquid template might be a simple table listing the line items and a summary of their total amounts:

<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>

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, you'll use three new Liquid objects:

  • line_item.total_discount returns the amount of discount that has been applied to the line item
  • line_item.original_line_price returns the line item price before discounts
  • line_item.message returns 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:

<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>

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 allow customers to compare the before and after discount totals
  • the total savings the customer received on their cart.

Again, to add this information you'll use new Liquid objects:

  • cart.total_discount returns the amount of discount applied to items in the cart
  • cart.original_total_price returns the subtotal of the cart before discounts.

With this information, your updated .summary block might look like this:

<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>

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.

Want to discuss this page?

Visit the Shopify Community

Ready to start selling online with Shopify?

Try it free