Setup custom discount summary template

If an offer that contained a discount was used, the app automatically shows a discount summary on the cart page:

The layout of the discount summary can be changed to better match your stores theme. 

Template

The following default template is automatically added onto the cart page. 

<div class="cl-summary right" style="display:none;" data-cart-summary>
  <div class="cl-summary-discount" data-cart-discount>
      <span>
        <svg aria-hidden="true" focusable="false" role="presentation" class="cl-summary-tag" style="fill:#000;"><path d="M10 3a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm0-3H7a1 1 0 0 0-.71.29l-6 6a1 1 0 0 0 0 1.42l4 4a1 1 0 0 0 1.42 0c.19-.2 5.8-5.81 6-6A1 1 0 0 0 12 5V2a2 2 0 0 0-2-2z"></path></svg>
        <span data-cart-discount-title=""></span>
      </span>
      <span>
        -<span data-cart-discount-amount=""></span>
      </span>
  </div>
  <!-- added automatically: <div class="cl-summary-total" data-cart-total-discount></div> ( only use data-cart-total-discount to show outside of summary! ) -->
</div>

You can copy this template and paste it at your desired location in your cart-template.liquid file. 


Selectors

You can freely edit the template as long as you provide the selectors described below.  

Selector Used for
[data-cart-summary] wrapper around summary, also controls the location of the discount summary
[data-cart-total-discount] displays the new total with the discounts deducted (is added automatically - only provide if shown outside the [data-cart-summary] block)
[data-cart-discount] discount line item - this element is copied for each applied discount
[data-cart-discount-title] the element text will be updated with the discount title
[data-cart-discount-amount] the element text will be updated with the discount amount
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.