# Marketplace Widgets

#### **Current Version**

`3.9.1`

{% content-ref url="marketplace-widgets/version-change-notes" %}
[version-change-notes](https://docs.manifold.xyz/manifold-for-developers/resources/widgets/marketplace-widgets/version-change-notes)
{% endcontent-ref %}

#### **Javascript Library**

<https://marketplace.manifoldxyz.dev/3.5.18/marketplace.umd.min.js>

#### Base CSS

<https://marketplace.manifoldxyz.dev/3.5.18/marketplace.css>

#### Additional CSS

<https://marketplace.manifoldxyz.dev/3.5.18/marketplace.manifold-light.css>

<https://marketplace.manifoldxyz.dev/3.5.18/marketplace.manifold-dark.css>

#### Required Properties

* **data-widget:** The type of [marketplace widget](https://docs.manifold.xyz/manifold-for-developers/resources/widgets/marketplace-widgets/widgets) you wish to use
* **data-network:** The network chain id your listing is on (e.g. Ethereum Mainnet is 1).
* **data-id**: The id of the listing you've created

{% hint style="warning" %}
The data-network props **MUST** match the values used for the [Connect Widget](https://docs.manifold.xyz/manifold-for-developers/resources/widgets/connect-widget) or your instantiated instance of the [Manifold Ethereum Provider](https://docs.manifold.xyz/manifold-for-developers/resources/manifold-ethereum-provider), otherwise the widget will not work.
{% endhint %}

## Peer Dependencies

{% hint style="danger" %}
Version 3.5.0 and above **requires** [Connect Widget](https://docs.manifold.xyz/manifold-for-developers/resources/widgets/connect-widget) (>= 3.0.0)
{% endhint %}

{% hint style="warning" %}
To display the option to connect with Wallet Connect, you must use [Connect Widget](https://docs.manifold.xyz/manifold-for-developers/resources/widgets/connect-widget) >= 3.0.0 and provide values for:

* `data-network`
* `data-fallback-provider` (for blockchain read operations)
* `data-wallet-connect-project-id`

You can find more details on the [Connect Widget > Wallet Connect section](https://docs.manifold.xyz/manifold-for-developers/resources/connect-widget/advanced-configuration#wallet-connect).
{% endhint %}

{% hint style="info" %}
Uses the [Wallet Identity Widget](https://docs.manifold.xyz/manifold-for-developers/resources/widgets/wallet-identity-widget) (>= 2.0.0) to display a listing's seller's details. If this is not included, the seller's details will not appear.

This only affects `m-layout-complete-listing` and `m-layout-details-display`.
{% endhint %}

{% hint style="info" %}
Uses the [Restricted Token Widget](https://docs.manifold.xyz/manifold-for-developers/resources/widgets/restricted-token-widget) (>= 0.1.0) to display the marketplace on which the listing's token is blocked, if any. If this is not included, the widget will not appear.

This only affects `m-layout-complete-listing`.
{% endhint %}

## Overview

Marketplace widgets are a set of customizable UI components that allow you to create a fully customized marketplace experience.

They have been used by artists to build [completely unique sales experiences](https://manifoldxyz.substack.com/p/not-just-another-marketplace), curators to build exclusive listing sites and by Manifold [native gallery listings](https://gallery.manifold.xyz/0xfcE4Bf28aB33A38BFB8BF3604AE6F09Fa78Ff6ce/311).

## Creating Listings

Listings are created and managed via the [Manifold Gallery App in Manifold Studio](https://studio.manifold.xyz/apps)&#x20;

## Adding Marketplace Widgets

You can find detailed instructions on how to install and use widgets for your specific website stack by referring to [Step 3 in the Getting Started Guide](https://docs.manifold.xyz/manifold-for-developers/guides/getting-started#step-3-add-manifold-widgets-to-your-website). Step 1 and 2 are not required for this widget.