How to change the metafield in Custom data in shopify in shopify theme template

[Joey_frizzlife]

I need to change the metafield in the Custom data in shopify in the shopify theme template, I can create the metafield in advance and just need to be able to read it and modify it!
For example: I have a customer birthday metafield right now, I need to make it possible for the customer to select the birthday in the theme and then update it to the customer metafield
PS: front-end engineers, back-end knowledge is very empty, so how to involve the back-end please tell me a little more detailed, thank you!

我需要在shopify主题模板中更改shopify中的Custom data中的metafield，我可以提前创建元字段，只需要可以读取，修改即可
例如：前端工程师，后端知识很空，所以如何涉及到后端请细致一点告诉我，谢谢

[rajweb · Accepted solution]

Hey @Joey_frizzlife ,

Perfect! Let's go ahead and build the full solution and logic for reading and updating a customer birthday metafield using Shopify theme code and frontend JavaScript (no app proxy yet). This will be entirely front-end based, meant for logged-in customers.

Goal:

Allow logged-in customers to:

- View their saved birthday.

- Edit and save it using a form in the customer account page.

- Save the data to a customer metafield: custom.birthday.

Step 1: Create the Customer Metafield in Shopify Admin

Go to:

Shopify Admin → Settings → Custom data → Customers → Add definition

Name: Birthday

Namespace and key: custom.birthday

Type: Date 

Check: Storefronts can read and write

Step 2: Update customers/account.liquid Template

Online Store → Themes → Edit Code → templates/customers/account.liquid

And add this block where you want the birthday form to appear:

{% if customer %}
  <div id="customer-birthday-wrapper">
    <h2>Update Your Birthday</h2>

    <form id="birthday-form">
      <label for="birthday">Your Birthday:</label>
      <input
        type="date"
        id="birthday"
        name="birthday"
        value="{{ customer.metafields.custom.birthday.value | date: "%Y-%m-%d" }}"
      >
      <button type="submit">Save</button>
    </form>

    <p id="birthday-message" style="margin-top: 10px;"></p>
  </div>
{% else %}
  <p>Please log in to edit your birthday.</p>
{% endif %}

Step 3: Add JavaScript Logic to Update the Birthday

Just below the form, add this Javascript:

<script>
document.addEventListener("DOMContentLoaded", function () {
  const form = document.getElementById("birthday-form");
  const message = document.getElementById("birthday-message");

  if (form) {
    form.addEventListener("submit", async function (e) {
      e.preventDefault();

      const birthday = document.getElementById("birthday").value;

      try {
        const res = await fetch('/account', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
          },
          body: JSON.stringify({
            customer: {
              metafields: [{
                namespace: "custom",
                key: "birthday",
                type: "date",
                value: birthday
              }]
            }
          })
        });

        if (res.ok) {
          message.innerText = " Birthday updated successfully!";
        } else {
          message.innerText = " Failed to update birthday. Try again.";
        }
      } catch (err) {
        message.innerText = " Error: " + err.message;
      }
    });
  }
});
</script>

If you want help implementing any of these steps or setting up an app proxy, please feel free to reach out via email – thanks!

Best Regards,

Rajat

Shopify Expert 

[Sonya_2025]

Hi @Joey_frizzlife 

pls refer to this document to add extra information to your customer when they register in your store

If you would like to save the extra information to customer metafields. you can create shopify flow to set up it automatically.

Hope this helps

[tim]

Unfortunately, suggestion By Rajat would not work.

It is not possible to directly update customer information from frontend other than addresses.

At customer account creation time  it's possible to supply extra information as per @Sonya_2025 recommendation.

Afterwards, you'd need an app, like Helium Customer fields

[mageplaza-cs]

Hi @Joey_frizzlife 

You can refer to the third-party app Helium Customer Fields.