> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uselooop.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Discount List

> This element is used by Looop to render the list of discount code applied to the cart. 

<Frame>
  <img src="https://mintcdn.com/thinddev/WJpokBS_R24FjARc/images/discount-list.svg?fit=max&auto=format&n=WJpokBS_R24FjARc&q=85&s=cc1909bf6eb42894c41f731cd0849dc4" width="355" height="186" data-path="images/discount-list.svg" />
</Frame>

## Setup

<Steps>
  <Step title="Discount List Wrapper">
    Add a empty div block in the  default stage of the cart where you want to render the discount list.
  </Step>

  <Step title="Discount List Wrapper - Attributes">
    Add following attribute to the div block:

    ```html theme={null}
    looop=discountcodeslist
    ```
  </Step>

  <Step title="Discount Code Template">
    Add a div block inside the `discountcodeslist`. The div will be used as a template to render the discount code list.
  </Step>

  <Step title="Discount Code Template - Attributes">
    Add following attribute to the div block:

    ```html theme={null}
    looop=discountcodeItem
    ```
  </Step>

  <Step title="Discount Code Template - Name">
    Add a text block inside the `discountcodeItem` div block with following attribute:

    ```html theme={null}
    looop=discountcodetext
    ```
  </Step>

  <Step title="Discount Code Template - Remove">
    Add a icon/button inside the `discountcodeItem` div block with following attribute:

    ```html theme={null}
    looop=discountcoderemove
    ```
  </Step>
</Steps>

<Note>
  The icon/button we created in step 6 will be used as a button to remove the discount code from the cart.
</Note>