> ## 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.

# Wishlist List

> Wishlist list element is used to display the list of products that are added to the wishlist.

<Frame>
  <img src="https://mintcdn.com/thinddev/5vCSKuNRwWtbt3SO/images/wishlist.png?fit=max&auto=format&n=5vCSKuNRwWtbt3SO&q=85&s=976c5f7976cd7ec6bba009b9269dfbdc" width="846" height="462" data-path="images/wishlist.png" />
</Frame>

## Steps

<Steps>
  <Step title="Wishlist">
    Add a Webflow CMS collection of products to the page. Inside the CMS collection item create a [product card](/webflow/productcard/productcard).
  </Step>

  <Step title="Add a Wishlist Button">
    Follow the steps to add a [wishlist button](/webflow/wishlist/wishlist-button) to the product card.
  </Step>

  <Step title="Wishlist Wrapper">
    ***

    <Frame>
      <img src="https://mintcdn.com/thinddev/5vCSKuNRwWtbt3SO/images/wishlist-wrapper.jpg?fit=max&auto=format&n=5vCSKuNRwWtbt3SO&q=85&s=7288c7e8f2f6979b461b8e1a47a50486" width="398" height="457" data-path="images/wishlist-wrapper.jpg" />
    </Frame>

    Add following custom attributes to the wishlist CMS wrapper:

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