How to develop a custom form to fulfill business use?

[joeyip]

I’ve developed a custom form to replace the customer register update form. The custom form includes adding OTP function and a check mobile function. How to build an extension to build two blocks and apply them to the themes?

Is that any example for reference?

[Liam]

Hi Joeyip,

If I'm understanding you correctly, you'd like the form you've created to be a theme app extension consisting of two blocks? If so, these are the steps you'd need to take:

1. Create an App Extension: You need to create a new app extension in the Shopify admin. This can be done from the Extensions page in the Shopify Partners dashboard.

2. Create Blocks: Once you've created an app extension, you can create blocks. You'll need to create two blocks for your custom form - one for the OTP function and another for the check mobile function.

3. Block Settings: For each block, you can define the settings that merchants can configure in the theme editor. These settings are defined in the block's schema, which is a JSON object.

4. Block Templates: Each block also needs a Liquid template that defines its output in the theme. You can use Shopify Liquid to code the functionality your OTP and check mobile functions.

5. Apply Blocks: Once you've created the blocks, you can apply them to your themes. You can do this by adding them to the theme's JSON file or by providing a deep link that merchants can use to add the block to their theme within the theme editor.

Here's a basic example of what a block's schema and template might look like:

// In the schema.json file
{
  "name": "OTP Block",
  "settings": [
    {
      "id": "otp_placeholder",
      "type": "text",
      "label": "OTP Placeholder Text",
      "default": "Enter your OTP"
    }
  ],
  "presets": [
    {
      "name": "Default",
      "settings": {
        "otp_placeholder": "Enter your OTP"
      }
    }
  ]
}

// In the block.liquid file
<div class="otp-block">
  <input type="text" placeholder="{{ block.settings.otp_placeholder }}">
</div>

Please note that the actual implementation will depend on the specific requirements of your OTP function and check mobile function. Our developer docs here provide an in-depth guide on how to build theme app extensions.

Hope this helps!