Skip to main content

Information

The information step is where buyers enter their email address or phone number and, for shipping orders, a delivery address. Use this target to add UI immediately after the contact form, such as marketing opt-in checkboxes, loyalty account lookups, or contact verification messaging.

Contact data at this target is read-only. Extensions can read the buyer's contact information through shopify.buyerIdentity but can't modify the contact form fields or pre-fill values programmatically.

Anchor to Use casesUse cases

  • Marketing opt-in: Display a checkbox after the email field to collect buyer consent for email or SMS marketing and store the opt-in status.
  • Loyalty account lookup: Check whether the buyer's email matches an existing loyalty account, and display their points balance or membership tier to encourage checkout completion.
  • Phone or email verification: Display a verification prompt or format guidance after the buyer enters their phone number or email address, helping ensure accurate contact information before the order is placed.
  • Gift messaging: Collect a gift message or special delivery instructions right after the contact form, and attach the information to the order.
Checkout Contact section showing an email field and a marketing opt-in checkbox, with the purchase.checkout.contact.render-after target slot below the contact fields, above the Delivery section.

Anchor to Information targetInformation target

A static extension target that renders below the customer information section in checkout. Unlike block targets, this target always renders in a fixed position relative to the customer information.

Anchor to Render after contact form ,[object Object]Render after contact form target

purchase.checkout.contact.render-after

Renders immediately after the contact form element on the information step. Use this target to display consent checkboxes, account lookups, or supplementary fields that relate to the buyer's contact information.

Read access to cart contents, buyer identity, and delivery details is available through API properties. Write operations are available through the note API and metafields API. Use cart instructions to check which mutations are available before calling them.

Support
Components (56)
APIs (24)

Supported components

Available APIs

Examples

Preact

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
render(<Extension />, document.body);
}

function Extension() {
async function onCheckboxChange(event) {
const isChecked = event.currentTarget.checked;
if (!shopify.instructions.value.metafields.canSetCartMetafields) {
return;
}
try {
if (isChecked) {
await shopify.applyMetafieldChange({
type: 'updateCartMetafield',
metafield: {
namespace: '$app:marketing',
key: 'email_opt_in',
value: 'true',
type: 'single_line_text_field',
},
});
} else {
await shopify.applyMetafieldChange({
type: 'removeCartMetafield',
namespace: '$app:marketing',
key: 'email_opt_in',
});
}
} catch {
event.currentTarget.checked = !isChecked;
}
}

return (
<s-checkbox
onChange={onCheckboxChange}
label="Send me emails about new products and promotions"
/>
);
}

Anchor to Best practicesBest practices

  • Revert UI on failure: When a mutation fails, revert the UI to its previous state so buyers aren't misled into thinking their input was saved.
Was this page helpful?