---
description: >-
  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,...)
---

# Set up Multiple Discounts manually

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

<figure><img src="https://884527652-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MY9eukujgCV4BZXJg4A%2Fuploads%2F8A3tYslmQbO7NO73GTIq%2F2.png?alt=media&#x26;token=02aa5c8f-4028-4325-b45f-da89f62e9fc3" alt=""><figcaption></figcaption></figure>

## Open cart template

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

<figure><img src="https://884527652-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MY9eukujgCV4BZXJg4A%2Fuploads%2FxswfE4R8pBPPR8N2H2F8%2F2.png?alt=media&#x26;token=9bfdca2a-0711-4797-8718-ad09f1e7ee41" alt=""><figcaption></figcaption></figure>

## Add the code snippet

<img src="https://884527652-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MY9eukujgCV4BZXJg4A%2Fuploads%2FimccrKdTDBytGYmIVOyj%2Fimage.png?alt=media&#x26;token=932390ee-3b5e-4cdf-858e-9a91d85af604" alt="" data-size="original">

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