> 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/shopify-merch-bridge/reference/ui-configuration-options.md).

# UI Configuration Options

Each of the following configuration options can be made by adding props to the `m-add-to-cart` div, within the theme's `snippets/manifold-campaign-widget.liquid` file.

## OpenSea Link

The Shopify Gate can show an OpenSea link to get NFTs if you are on a product page and you don't have any qualifying NFTs.  To display and configure the link location, simply add the prop:

```
data-opensea-collection-slug="<YOUR_OPENSEA_SLUG>"
```

The OpenSea slug is the string which leads to your collection.  For example, the slug "**replicator-by-mad-dog-jones**" will result in a link to <https://opensea.io/collection/replicator-by-mad-dog-jones>

## Campaign Confetti

Whenever a product is added, we show a confetti animation.  By default, they are the 👕 and 🧢 emojis.  You can change this to your own emoji by adding the prop:

```
data-add-to-cart-emojis="<CONFETTI_EMOJI>"
```

You can disable the confetti by adding the prop

```
data-no-emojis="true"
```

## Refreshing non-Dawn Theme Cart Counters

If you've implemented your own cart icon and want the counter to refresh whenever a product is added, it must be a liquid Section.  To get this Section counter to refresh, add the prop:

```
data-cart-icon-section="<YOUR_SECTION(S)_COMMA_SEPARATED>"
```

This will cause the section to update whenever the cart is updated.  For reference, the default Dawn theme section is called "cart-icon-bubble" and can be found under "Sections: cart-icon-bubble.liquid".  Please check this out to see how they show cart counters.

{% hint style="danger" %}
Make sure your div id is the same as your section name!
{% endhint %}

## Redirect To Cart Page When Items Are Added

You can force a redirect to the cart page when an item is added. To do this, add the prop:

```
data-redirect-to-cart="true"
```

## Force Reload When Items Are Added

You can also force a page reload when items are added.  To do this, add the prop:

```
data-reload-page-on-add-to-cart="true"
```

## Using Custom Product Properties

You may want some [custom properties](https://ui-elements-generator.myshopify.com/pages/line-item-property) for your products (e.g. an Engraving message).  If you have added a custom input property field, you MUST configure the Merch Bridge to know about these properties.  To do this, add the prop:

```
data-product-properties="your-property-field-id"
```

{% hint style="danger" %}
Make sure the property field id you are using matches the id of the input field of the property.
{% endhint %}

You can add multiple properties by putting a comma separated list of property field id's.

## Changing Text of Buttons

The text of the various buttons can be changed as well.  The props to configure are:

**data-add-to-cart-text**: Default "Add to Cart"

**data-apply-discount-text**: Default "Apply Discount"

**data-nft-available-title**: Default "Discount Available"

**data-nft-available-message**: Default "LFG! Apply Discount for more info"

**data-nft-eligible-title**: Default "NFT Discount Eligible"

**data-nft-eligible-message**: Default "Use "Connect Wallet" button to apply discounts"

**data-no-eligible-tokens-message**: Default "You don't have eligible tokens."

**data-no-eligible-tokens-title**: Default "Token Exclusive"

**data-checkout-text** (applied to `m-checkout`): Default "Checkout with NFTs"

**data-clear-cart-text** (applied to `m-checkout`): Default "Clear Cart"

**data-already-existing-checkout-message** (applied to `m-checkout`): Default "Already existing checkout, click here to complete."