> For the complete documentation index, see [llms.txt](https://docs.manifold.xyz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.manifold.xyz/manifold-for-developers/resources/widgets/marketplace-widgets.md).

# Marketplace Widgets

#### **Current Version**

`3.9.1`

{% content-ref url="/pages/0zYmcjYeLzCruY5ydbIZ" %}
[Version Change Notes](/manifold-for-developers/resources/widgets/marketplace-widgets/version-change-notes.md)
{% 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](/manifold-for-developers/resources/widgets/marketplace-widgets/widgets.md) 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](/manifold-for-developers/resources/widgets/connect-widget.md) or your instantiated instance of the [Manifold Ethereum Provider](/manifold-for-developers/resources/manifold-ethereum-provider.md), otherwise the widget will not work.
{% endhint %}

## Peer Dependencies

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

{% hint style="warning" %}
To display the option to connect with Wallet Connect, you must use [Connect Widget](/manifold-for-developers/resources/widgets/connect-widget.md) >= 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](/manifold-for-developers/resources/widgets/connect-widget/advanced-configuration.md#wallet-connect).
{% endhint %}

{% hint style="info" %}
Uses the [Wallet Identity Widget](/manifold-for-developers/resources/widgets/wallet-identity-widget.md) (>= 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](/manifold-for-developers/resources/widgets/restricted-token-widget.md) (>= 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](/manifold-for-developers/guides/getting-started.md#step-3-add-manifold-widgets-to-your-website). Step 1 and 2 are not required for this widget.