LogoLogo
Manifold for Developers
Manifold for Developers
  • Introduction
  • Shopify Merch Bridge
    • Overview
    • Tutorial
      • Step 1: Product Gate Setup
        • 1.1: Configure the Product
        • 1.2: Install Manifold Merch Bridge
        • 1.2: Create a New Product Gate
        • 1.3: Link a Product to the Gate
        • 1.4: Add Rules
      • Step 2: Store Theme Setup
        • 2.1 The Theme Editor
        • 2.2 Product Page Setup
        • 2.3 Cart Page Setup
    • Advanced Configuration
    • FAQ / Error Help
    • Reference
      • Product and Gate Configuration
        • Shopify Products
        • Product Gates
          • Gate Products
          • Rules
      • Custom Themes
      • Updating to the Latest Version
      • UI Configuration Options
      • Advanced Usage
      • Common Issues
  • Guides
    • Getting Started
    • HTML
    • React
    • NextJS
    • Vue
    • Wix
    • Squarespace
      • Simple Squarespace Site
      • Customised Squarespace Template
  • Resources
    • Apps
      • Grant Types
    • Widgets
      • Directory
      • Manifold CSS Variables
        • Scheme Utility Classes
        • List of Manifold CSS Variables
      • Connect Widget
        • Blockchain Interaction
        • Wallet Authentication
        • Data Client
          • NFT Information Retrieval
            • getNFT
            • getNFTsOfOwner
            • ownerHasNFT
            • getCollectors
          • Data Storage and Retrieval
        • Advanced Configuration
        • Customization & Styling
        • Automatic Error Handling
      • Campaign Widget
        • Campaign Creation
          • Questionnaire
        • Campaign Progress
        • Customization & Styling
      • Curation Widget
      • Marketplace Widgets
        • Widgets
          • Data Attributes
          • Layout Widgets
          • Card Widgets
          • Listing Widgets
        • Window Events
        • Troubleshooting
        • Customization & Styling
        • Version Change Notes
          • 3.2.1 - CSS Selector Changes
          • 3.1.1 - CSS Selector Changes
      • Claim Widgets
        • Widgets
          • Data Attributes
          • Complete Claim Widget
          • Buy Button Only Widget
          • Mint Count Widget
        • Troubleshooting
        • Customization & Styling
        • Version Change Notes
          • 1.7.0, 1.7.1 - CSS Selector Changes
      • Restricted Token Widget
        • Customization & Styling
      • Wallet Identity Widget
        • Customization & Styling
      • Subscription Widget
      • 6551 Display Widget
    • Manifold Ethereum Provider
  • Tools and APIs
    • Merkle Tree Tool
    • Snapshot Tool
    • Discord Tools
    • Server-Side Session Authentication
      • Signature Grant
      • Authorization Code Grant
  • Smart Contracts
    • Manifold Creator
      • Contracts
        • Creator Core
          • Common Functions
          • ERC721 Functions
          • ERC1155 Functions
        • Extensions
          • Extensions Functions
          • Extensions Examples
          • Extensions Deployment Guide
            • Dynamic NFT Extension
            • Lazy Mint Extension ERC1155
            • Lazy Mint Extension ERC721
        • Mint Permissions
          • Mint Permissions Functions
      • Prior Versions
        • 1.0.x
          • Creator Core
            • Common Functions
            • ERC721 Functions
            • ERC1155 Functions
          • Extensions
            • Extensions Functions
            • Extensions Examples
            • Extensions Deployment Guide
              • Dynamic NFT Extension
              • Lazy Mint Extension ERC1155
              • Lazy Mint Extension ERC721
          • Mint Permissions
            • Mint Permissions Functions
        • 2.0.x
          • Creator Core
            • Common Functions
            • ERC721 Functions
            • ERC1155 Functions
          • Extensions
            • Extensions Functions
            • Extensions Examples
            • Extensions Deployment Guide
              • Dynamic NFT Extension
              • Lazy Mint Extension ERC1155
              • Lazy Mint Extension ERC721
          • Mint Permissions
            • Mint Permissions Functions
    • Marketplace
      • Identity Verifier
    • Royalty Registry
  • Contact Us
Powered by GitBook
On this page
  • OpenSea Link
  • Campaign Confetti
  • Refreshing non-Dawn Theme Cart Counters
  • Redirect To Cart Page When Items Are Added
  • Force Reload When Items Are Added
  • Using Custom Product Properties
  • Changing Text of Buttons

Was this helpful?

  1. Shopify Merch Bridge
  2. Reference

UI Configuration Options

Last updated 2 years ago

Was this helpful?

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

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.

Make sure your div id is the same as your section name!

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

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

Make sure the property field id you are using matches the id of the input field of the property.

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

You may want some 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:

https://opensea.io/collection/replicator-by-mad-dog-jones
custom properties