Build a validation user interface

In this tutorial, you'll learn how to do the following tasks:

• Generate starter code for a validation settings UI extension.
• Create a validation user interface with Admin UI Extensions.

• You created your app with the Remix app template.
• You've completed the Add configuration to your validation function tutorial.
• Your app has the read_products access scope. Learn how to configure your access scopes using Shopify CLI.

The following example builds a React-based Admin UI extensions that enables merchants to create and configure a validation function.

1. Navigate to your app directory:

2. Run the following command to create a new validation rule UI extension:

3. Choose the language that you want to use. For this tutorial, you should select either JavaScript React or TypeScript React.

4. Navigate to extensions/validation-settings:

5. Replace the src/ValidationSettings.jsx or src/ValidationSettings.tsx file with the following code.

1. Go to your validation folder:

2. Add the following to your shopify.extension.toml:

1. Navigate to your app directory:

2. To build and preview your app, either start or restart your server with the following command:

3. Press p to open the developer console.

4. In the developer console page, click on the preview link for the validation settings extension.

5. Go to Settings > Checkout in Shopify admin.

6. In the Checkout rules section, click on Add rule and add your validation.

7. Confirm the user interface looks and works as intended.