Set up Multiple Discounts manually

This is about setting up for the first time to the cart page. Apply Multiple Discounts to a theme that you want to publish in the front end(such as Debut, Minimal, Boundless, Brooklyn, Express,...)

Before setting up your discount rules, you need add the code snippet to your cart page by following below steps.

Select a theme to be setup Multiple Discounts

Under Sales channel, click Online Store-> Themes

In Theme library section, select a theme to show Multiple Discounts. Then click Actions->Edit code

Open cart template

Under folder Templates or Sections , click cart-template.liquid or cart.liquid to edit code.

Add the code snippet

To display offers in the cart, insert text data-md-cart-page into top div/html element of opened code page

<div data-md-cart-page />

Ex:

<div class="page-width--wide page-container" data-md-cart-page>

or
<div class="grid" data-md-cart-page>

or
<form action="{{ routes.cart_url }}" method="post" class="cart-form cart" data-cart-form novalidate data-md-cart-page>

To display Discounts to each cart item, find in the code page the for loop together with cart row, put data-md-cart-item-key="{{ variant_id }}" into cart row line

<tr data-md-cart-item-key="variant_id">

Ex1:

// Some code...
{% for item in cart.items %}
     <div class="cart__row" data-md-cart-item-key="{{ item.id }}">

Ex2:

// Some code....
{% for item in cart.items %}
     <tr class="cart__table-row"  data-md-cart-item-key="{{ item.id }}">

Customize the place that displays Each item price, then insert data-md-price-item into html element that shows price of each item

Ex:

 <td class="cart__table-cell"  data-md-price-item>
      <div>
           {% if item.original_price != item.final_price %}
                <span class="visually-hidden">{{ 'cart.label.original_price' | t }}</span>

In the same row of cart item display, customize the place displaying total price of each cart item, insert data-md-total-price-item into that Html element.

Ex:

 <td data-md-total-price-item class="cart__table-cell cart__table-cell--total cart__table-cell--right-aligned" data-label="{{ 'cart.label.total' | t }}" >

Edit cart footer, find Html element that has cart__footer or cart-footer class, then insert data-md-cart-footer into it

<div class="cart__footer" data-md-cart-footer>

Edit cart subtotal, find Html element that has cart__subtotal or cart-subtotal class, then insert data-md-subtotal into it

<div class="cart__subtotal" data-md-subtotal>

Customize the Shipping fee, find Html element that wraps value {{ taxes_shipping_checkout }}, then insert data-md-cart-shipping in to it.

<div data-md-cart-shipping />

Ex1:

// Some code..
<div class="cart__shipping rte" data-md-cart-shipping>{{ taxes_shipping_checkout }}</div>

Ex2:

// Some code...
<p class="cart__notice" data-md-cart-shipping>{{ taxes_shipping_checkout }}</p>

To display liquid template for free items and possible offer items in the cart, add the code anywhere in your theme's cart-template.liquid.

<tbody data-md-cart-possible-offer-items>

Customize where to display Free items container, this code is pasted in your theme's cart-template.liquid.

<tbody data-md-cart-free-items>

Customize where to display Possible offer items container, this code is pasted in your theme's cart-template.liquid.

<tbody data-md-cart-possible-offer-items>

Example:

<h1>Free Products</h1>
<table>
<tbody data-md-cart-free-items>
</tbody>
</table>
<h1>Possible Offers</h1>
<table>
<tbody data-md-cart-possible-offer-items>
</tbody>
</table>
<template data-md-cart-item-template>
{% raw %}
<tr>
<td><img src='{{ product.image.src }}' style='width: 4em' /></td>
<td>{{ product.title }}</td>
<td>{{ variant.price }}</td>
<td>{{ offer.total }}</td>
<td>
<button type='button' data-md-add-to-cart='{{ variant.id }}'>Add to cart</button>
</td>
</tr>
{% endraw %}
</template>