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 |