[BUG] s-consent-phone-field and s-consent-checkbox web components not rendering in customer account UI extensions

Problem

The s-consent-phone-field and s-consent-checkbox web components are completely broken when used inside a Customer Account UI Extension. Instead of rendering the components, the browser console throws:

The extension itself builds and deploys successfully, the error only appears at runtime in the storefront page.


Code to Reproduce

OrderStatusBlock.tsx

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

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

function Extension() {
  return (
    <s-stack direction="block" gap="base">
      <s-form>
        <s-consent-phone-field
          name="sms-marketing-phone"
          label="Phone"
          policy="sms-marketing"
          defaultValue="587-746-7439"
        />
        <s-consent-checkbox
          name="sms-marketing-consent"
          defaultChecked
          label="Text me with news and offers"
          policy="sms-marketing"
        />
      </s-form>
    </s-stack>
  );
}

shopify.extension.toml (relevant section)

[extensions.capabilities.collect_buyer_consent]
customer_privacy = true
sms_marketing = true

What I’ve Already Tried

  • :white_check_mark: Enabled the sms_marketing and customer_privacy (I also tried individually) capabilities in the TOML as required by the docs
  • :white_check_mark: Adjusted the API version in the TOML
  • :white_check_mark: Confirmed other web components (s-stack, s-form, etc.) render without issues in the same extension
  • :white_check_mark: Verified the extension builds successfully (Build successful + Extension changed in the CLI)
  • :white_check_mark: App preview is updated on the dev store
  • :white_check_mark: No TypeScript or import errors in the extension component file, the error only appears in the browser at runtime

Expected Behavior

  • s-consent-phone-field and s-consent-checkbox should render as documented on:
  • The sms_marketing capability flag in the TOML should be sufficient to unlock these components.

Actual Behavior

  • Both components are silently broken from the rendered UI.

  • The browser console shows:

  • No error is shown in the extension source file or during the build, the failure is purely at runtime.


Environment

Shopify CLI version (latest)
Extension type Customer Account UI Extension (Web Components)
Target customer-account.order-status.block.render
Dev store New Customer Accounts enabled
API version 2026-04 / latest

Request

Please investigate whether s-consent-phone-field and s-consent-checkbox are actually registered as remote elements in the Customer Account UI Extension runtime, or if the collect_buyer_consent capability flag is not being picked up correctly to unlock them.

Happy to provide a minimal reproduction repo if needed. Thanks!

1 Like

Hey, those components are currently not supported on customer accounts.

I reached out to the team about this and will get back here if anything changes, but I already wanted to let you know that this is currently expected.

1 Like

Hey Robin! thanks for the quick response and for reaching out to the team! really appreciate it!

That said, it would be great to get an ETA on when these components will actually be supported. The reason this was so confusing is that s-consent-phone-field and s-consent-checkbox are already documented in the Customer Account UI Extensions API reference, and the docs even describe the collect_buyer_consent capability configuration needed to enable them, so naturally the assumption was that they were ready to use.

If they’re not yet supported, it might be worth adding a note to the docs (e.g. a “coming soon” or “not yet available” callout) to save other developers the same debugging rabbit hole.

Looking forward to hearing back from the team!

Hey,

the components being documented for the customer account surface was done in error. We will remove them from the docs.

Thank you!

1 Like