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 |