How to add a gender field to the registration page on Hydrogen

Retired Boards Appdev Custom Storefronts
1

hi team,

Currently we are working on Hydrogen.
We’re having a problem with the registration page.
We want to add a gender field to the registration page.
However we test storefront API does not support metafield.

Is there any solution for this problem?

2

@AlexBoy

Usually we use radio option for gender field.

In hydrogen create field.

Refer this code.


You can also refer this link.
[https://shopify.engineering/rapid-development-hydrogen-building-product-page](https://shopify.engineering/rapid-development-hydrogen-building-product-page)

Apply this and let me share your further query.
3

for the gender field on the registration page. How do you save it?

4

@AlexBoy ,

Can you share the screenshot where you are doing this ?

Try to implement this code if you face any issues with this code let me know.

5

hi @oscprofessional ,

We want to save the gender information to the customer’s metafile when the user successfully registers for an account. But we can’t find any stoerfront API that can do that

6

@AlexBoy

Hi, I had the same problem, but I solved it with the following method.

  1. add firstName and lastName in the action function with form.get(). This should match the name attribute of the form
  2. Add them in the query as well
export const action: ActionFunction = async ({request, context, params}) => {
  const {session, storefront} = context;
  const formData = await request.formData();

  const email = formData.get('email');
  const password = formData.get('password');
  const firstName = formData.get('firstName');
  const lastName = formData.get('lastName');

  if (
    !email ||
    !password ||
    !firstName ||
    !lastName ||
    typeof email !== 'string' ||
    typeof password !== 'string' ||
    typeof firstName !== 'string' ||
    typeof lastName !== 'string'
  ) {
    return badRequest({
      formError: invalidInput,
    });
  }

  try {
    const data = await storefront.mutate<{
      customerCreate: CustomerCreatePayload;
    }>(CUSTOMER_CREATE_MUTATION, {
      variables: {
        input: {email, password, firstName, lastName},
      },
    });
 ...something

Add the gender field in the same way and it should work

7

you can auto detect with an application

https://apps.shopify.com/gender-api

Gender API