Customer data and newsletter

Beyond orders and addresses, an account can hold the customer’s own data: their name, preferences you store in customer metafields, their email subscription and their store credit. This page builds the forms that show and change them. It ends with a newsletter form that works for any visitor, logged in or not.

1. The customer’s name

Add a Custom element with the tag customer-user-update, with a Form Block inside it. The Form needs two Text fields, whose Name setting is firstName and lastName, and a Form Button. Without both fields, the element removes itself.

Smootify fills the fields with the customer’s current name. When the customer saves, the Success message shows, every [customer] value on the page updates without a reload, and after 5 seconds the form comes back with the new values. customer-condition="no-names" can show a reminder to customers who have not given both names yet.

2. Show customer metafields

Customer metafields hold the data you add to a customer in Shopify: a shoe size, a loyalty level, a birthday. customer-metafield="shoe_size" on a Text block shows the metafield custom.shoe_size of the logged-in customer, anywhere on any page.

Shopify set-up. Create the definition under Settings › Custom data › Customers, and set its Customer accounts access to Read, or to Read and write if customers edit it (step 3):

• Namespace. Add namespace="…" when the namespace is not custom.
• Types. Every type renders as on the product page: text, numbers, dates, files, lists, references. See Metafields on the page and metafield types.
• Show or hide. if-customer-metafield="…" shows an element only when the metafield is set (for a number, above 0; for a true-or-false, true). unless-customer-metafield="…" shows it only when the metafield is not set. Add data-check-value="…" to compare with a value instead. See customer metafield conditions.
• B2B. company-metafield="…" and its if- and unless- forms read the metafields of the customer’s company.
• Logged out. These elements are taken out of the page for a visitor who is not logged in.

The attributes are in customer metafields.

3. Let customers edit their metafields

Add a Custom element with the tag customer-metafields-editor, with a Form Block inside it. Add one field per metafield. The field’s Name setting is the key of the metafield, as Shopify shows it, such as shoe_size, or the same words with spaces, such as Shoe size: Smootify turns the Name into the key. The editor saves in the namespace custom.

• Fields. Text fields, Text areas, Select fields, Radio buttons and Checkboxes work. For a Select field or Radio buttons, the option’s value (a Radio button’s Choice value) is what is saved. A Checkbox alone, for a true-or-false metafield, saves true when ticked and false when not.
• Prefilled. Smootify fills each field with the value saved in Shopify, and picks the matching option.
• Every field needs a definition. A field whose Name matches no customer metafield definition makes the save fail. Its definition needs Read and write access for customer accounts.
• Fields that are not saved. A field whose Name starts with _, such as _accepted, is never saved. Use it for a field the form needs but Shopify does not, such as a checkbox to accept your terms, marked Required.
• Emptying a field deletes the value in Shopify. A field hidden by a condition is left as it is.
• After saving, the Success message shows, and after 5 seconds the form comes back with the new values, unless the form has a Redirect URL.
• Errors. When Shopify refuses a value, for example text in a number metafield, its message shows in the form’s Error message.

Files. With the Server plan, a file-input in the editor uploads a file to Shopify and saves it in a File metafield. Its name is the metafield’s key, and data-multiple allows several files for a list of files. The files the customer saved before show in it, with their name, and with their preview when the item template has upload="preview". Only images get a preview: a saved PDF or another file shows its name alone. Removing the last one empties the metafield. See File uploads.

4. Email subscription

Two forms let a logged-in customer change their email marketing subscription, with the email of their account. To collect new subscribers from any visitor, use the newsletter form of step 6:

Each of the two account forms is a Custom element with a Form Block and a Form Button inside it. Wrap each one in an element with the matching condition, so the customer sees only the form that applies. The conditions follow at once when the customer saves.

5. Store credit

Shopify can give a customer store credit, which they spend at checkout. Add a Custom element with the tag store-credit to show it. A customer with no store credit sees a balance of 0 and no movements, so the card can stay on the account page.

• Balance. store-credit="balance" shows the balance. store-credit="expirableBalance" shows the part of it that expires. Wrap it in an element with if-credit="expires", which is removed when no credit expires.
• Transactions. store-credit-transaction is the template of one movement, repeated for each. Inside it: amount, balanceAfterTransaction, event (what happened, such as an order payment, a subscription payment or a refund), createdAt and expiresAt. An element with if-credit-transaction="expires" is removed from the movements that do not expire.
• No credit yet. An element with customer-condition="no-store-credit" shows only while the customer has no balance and no movements, such as “No credit yet. A refund or a credit from us shows here.” Put the movements in an element with customer-condition="has-store-credit". To hide the whole card instead, give store-credit itself customer-condition="has-store-credit".
• Your own words. The event texts are in English. The SmootifyStoreCreditEventsLabel script changes them, built like the status labels in Orders and buy again, with Shopify’s codes such as ORDER_PAYMENT as keys.

See store-credit and store credit values. To give credit on its own, the Flow library has Store credit on a paid order: Shopify Flow credits a share of every paid order above an amount you choose. To show in the cart what an order will earn, a short script does it: see the store credit a cart earns.

6. Newsletter form for any visitor

newsletter-subscribe turns a Webflow form into a newsletter sign-up. The visitor does not need an account: Smootify adds the email to your Shopify customers, subscribed to email marketing. It needs the Server plan, and Newsletter Subscription turned on in the Smootify dashboard.

1. Add a Custom element with the tag newsletter-subscribe, and put a Form Block inside it.
2. In the Form, add a Text field and set its Type setting to Email, then a Form Button.
3. Optional: add tags="newsletter, footer" to newsletter-subscribe to tag the new customers in Shopify, for example to know which form they used.

After the submit, the Success message shows, and the form’s Redirect URL setting is followed if it has one. The subscribers are in Shopify, under Customers:

Before you publish