Context

The tokengating app was developed to enhance Shopify's capabilities by integrating Web3 technology.
It aimed to provide a guide for merchants on creating tokengate apps, ensuring both experienced and new merchants could leverage Web3 to offer exclusive experiences to their customers.

Problem

Merchants needed a way to offer exclusive products, discounts, and content to specific token holders, enhancing customer loyalty and engagement through blockchain technology. There was also a need to educate merchants on the best practices for integrating tokengating within their Shopify stores.

Target Audience

• ‍Shopify merchants looking to leverage Web3 technology for exclusive promotions.
• New merchants seeking guidance on offering Web3-based product offerings.
• Customers who hold specific tokens and seek exclusive access or discounts.

Objective

1. Demonstrates UX best practices for tokengate apps.
2. Provides a solid guide for new merchants to offer Web3-based products.
3. Allows merchants to configure tokengates based on blockchain data.
4. Provides customers with a seamless experience to connect their wallets and access exclusive offers.
5. Ensures programmatic representation of gated statuses using metafields.

Research

• Interviews with merchants to understand their needs for exclusivity and promotion.
• Analysis of blockchain technology to ensure seamless integration with Shopify.
• UX studies to determine the most intuitive way to present tokengated content to customers.
• Competitive analysis of existing tokengate solutions to identify best practices.

• Creating wireframes and prototypes for the merchant and customer interfaces.
• Iterative testing with users to refine the experience.
• Ensuring the design aligns with Shopify's overall aesthetic and usability standards.
• Developing educational resources integrated within the app for merchant guidance.

Implementation

• Developing the gate configuration process using the Gates API.
• Integrating wallet connection and verification using the @shopify/connect-wallet package.
• Implementing server-side validation to ensure secure and accurate gate evaluations.
• Creating comprehensive documentation and tutorials for merchants.

Final Solution and Impact

The final solution is a robust tokengating app that:

• Demonstrates UX best practices, providing a seamless experience for merchants and customers.
• Offers a comprehensive guide for new merchants to adopt Web3 technology.
• Allows merchants to easily configure gates and define reactions such as discounts.
• Provides customers with a seamless wallet connection experience.
• Ensures gated statuses are programmatically represented in orders and products using metafields.

The app stores the merchant's gate configuration in the GateConfiguration model and binds it to products through the GateSubject model. Only the app that created these configurations can update or delete them.

Presentation

The app displays gate configuration data to customers using a theme app extension or a custom storefront built with Hydrogen or the Headless channel. Key responsibilities include:

• Displaying gate requirements and status.
• Connecting and verifying wallets.

• Increased merchant engagement with blockchain technology.
• Enhanced customer loyalty through exclusive offers.
• Streamlined process for merchants to leverage Web3 capabilities on Shopify.
• Empowered new merchants to confidently offer Web3-based product offerings.