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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.manifold.xyz/manifold-for-developers/shopify-merch-bridge/reference/ui-configuration-options.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.