Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

Choose a version:

Footer

The footer appears at the bottom of every customer account page, below the links to store policies. Use the footer to display persistent content that's visible across all pages, including Order index, Order status, Profile, Settings, and any full-page extensions.

Anchor to Use casesUse cases

Cookie consent: Display a cookie consent banner that appears across all customer account pages, allowing customers to manage their tracking preferences.
Global announcements: Show store-wide notices, such as holiday shipping deadlines or service updates, that apply to the entire customer account experience.
Accessibility aids: Provide persistent accessibility tools or links that customers can access from any page.
Legal compliance: Display required legal notices, privacy policy links, or regulatory disclosures that must be visible site-wide.

Anchor to Footer targetsFooter targets

Use the static extension target below to extend the footer on all customer account pages with persistent, globally visible content.

Since this target renders on every page, it's well-suited for cross-cutting concerns like consent management. The examples demonstrate using the Customer Privacy API to manage cookie consent, as well as rendering static content in the footer.

Note

To use the Customer Privacy API, you must enable the collect_buyer_consent capability in your TOML configuration file.

Anchor to Footer (render after) ,[object Object]Footer (render after) target

customer-account.footer.render-after

Renders a static extension target below the footer on all customer account pages.

To prevent layout shifting, avoid dynamic data fetching and rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading using Spinner.

Support

Components (63)

APIs (13)

Examples

import {useState} from 'react';

import {

reactExtension,

BlockStack,

Button,

Checkbox,

Form,

Grid,

Link,

Modal,

Sheet,

TextBlock,

useApi,

useCustomerPrivacy,

} from '@shopify/ui-extensions-react/customer-account';

import type {VisitorConsent} from '@shopify/ui-extensions/customer-account';

export default reactExtension(

'customer-account.footer.render-after',

() => <Extension />,

);

function Extension() {

const {applyTrackingConsentChange, ui} = useApi();

const {

shouldShowBanner,

visitorConsent: {

analytics,

marketing,

preferences,

saleOfData,

} = useCustomerPrivacy();

Examples

Description

Add a consent banner to the footer that lets customers manage their tracking preferences. This example uses a [Sheet](/docs/api/customer-account-ui-extensions/2025-07/components/overlays/sheet) to display the banner and a [Modal](/docs/api/customer-account-ui-extensions/2025-07/components/overlays/modal) for granular consent settings. It reads the current consent state from the [Customer Privacy API](/docs/api/customer-account-ui-extensions/2025-07/target-apis/account-apis/customer-privacy-api) and applies changes with `applyTrackingConsentChange`.

React

import {useState} from 'react';
import {
  reactExtension,
  BlockStack,
  Button,
  Checkbox,
  Form,
  Grid,
  Link,
  Modal,
  Sheet,
  TextBlock,
  useApi,
  useCustomerPrivacy,
} from '@shopify/ui-extensions-react/customer-account';

import type {VisitorConsent} from '@shopify/ui-extensions/customer-account';

export default reactExtension(
  'customer-account.footer.render-after',
  () => <Extension />,
);

function Extension() {
  const {applyTrackingConsentChange, ui} = useApi();

  const {
    shouldShowBanner,
    visitorConsent: {
      analytics,
      marketing,
      preferences,
      saleOfData,
    },
  } = useCustomerPrivacy();

  const [consentFormValues, setConsentFormValues] = useState({
    analytics,
    marketing,
    preferences,
    saleOfData,
  });

  const sheetId = 'sheet-consent';
  const modalId = 'modal-consent';

  const getCheckboxOnChangeHandler = (key: string) => {
    return function (checked: boolean) {
      setConsentFormValues({
        ...consentFormValues,
        [key]: checked,
      });
    };
  };

  const handleConsentChange = async (visitorConsent?: VisitorConsent) => {
    try {
      const result = await applyTrackingConsentChange({
        ...(visitorConsent ? visitorConsent : consentFormValues),
        type: 'changeVisitorConsent',
      });

      if (result.type === 'success') {
        ui.overlay.close(modalId);
        ui.overlay.close(sheetId);
      }
    } catch (error) {
      console.error('Failed to apply consent change:', error);
    }
  };

  const consentFormMarkup = (
    <Form onSubmit={() => handleConsentChange()}>
      <BlockStack>
        <Grid spacing="base">
          <Checkbox
            id="marketing"
            checked={consentFormValues.marketing}
            onChange={getCheckboxOnChangeHandler('marketing')}
          >
            Marketing
          </Checkbox>
          <Checkbox
            id="analytics"
            checked={consentFormValues.analytics}
            onChange={getCheckboxOnChangeHandler('analytics')}
          >
            Analytics
          </Checkbox>
          <Checkbox
            id="preferences"
            checked={consentFormValues.preferences}
            onChange={getCheckboxOnChangeHandler('preferences')}
          >
            Preferences
          </Checkbox>
          <Checkbox
            id="saleOfData"
            checked={consentFormValues.saleOfData}
            onChange={getCheckboxOnChangeHandler('saleOfData')}
          >
            Sale of data
          </Checkbox>
        </Grid>
        <Button accessibilityRole="submit">Save preferences</Button>
      </BlockStack>
    </Form>
  );

  return (
    <Sheet
      id={sheetId}
      accessibilityLabel="Cookie consent preferences"
      defaultOpen={shouldShowBanner}
      primaryAction={
        <>
          <Button
            kind="secondary"
            onPress={() =>
              handleConsentChange({
                analytics: false,
                marketing: false,
                preferences: false,
                saleOfData: false,
              })
            }
          >
            Decline
          </Button>
          <Button
            kind="secondary"
            onPress={() =>
              handleConsentChange({
                analytics: true,
                marketing: true,
                preferences: true,
                saleOfData: true,
              })
            }
          >
            Accept all
          </Button>
        </>
      }
      secondaryAction={
        <Button
          kind="plain"
          overlay={
            <Modal id={modalId} padding>
              {consentFormMarkup}
            </Modal>
          }
        >
          Manage preferences
        </Button>
      }
    >
      <TextBlock>
        This website uses cookies to ensure you get the best experience.{' '}
        <Link>Privacy Policy</Link>
      </TextBlock>
    </Sheet>
  );
}

TS

import {
  BlockStack,
  Button,
  Checkbox,
  extension,
  Form,
  Grid,
  Link,
  Modal,
  Sheet,
  TextBlock,
} from '@shopify/ui-extensions/customer-account';
import type {VisitorConsent} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.footer.render-after',
  (root, {applyTrackingConsentChange, customerPrivacy, ui}) => {
    const sheetId = 'sheet-consent';
    const modalId = 'modal-consent';

    let showBanner = customerPrivacy.current.shouldShowBanner;

    const formValues: VisitorConsent = {
      analytics: undefined,
      marketing: undefined,
      preferences: undefined,
      saleOfData: undefined,
    };

    customerPrivacy.subscribe((value) => {
      if (!value) return;

      showBanner = value.shouldShowBanner;

      formValues.analytics = value.visitorConsent.analytics;
      formValues.marketing = value.visitorConsent.marketing;
      formValues.preferences = value.visitorConsent.preferences;
      formValues.saleOfData = value.visitorConsent.saleOfData;

      analyticsCheckbox.updateProps({checked: value.visitorConsent.analytics});
      marketingCheckbox.updateProps({checked: value.visitorConsent.marketing});
      preferencesCheckbox.updateProps({checked: value.visitorConsent.preferences});
      saleOfDataCheckbox.updateProps({checked: value.visitorConsent.saleOfData});
    });

    const handleConsentChange = async (visitorConsent?: VisitorConsent) => {
      const result = await applyTrackingConsentChange({
        ...(visitorConsent ? visitorConsent : formValues),
        type: 'changeVisitorConsent',
      });

      if (result.type === 'success') {
        ui.overlay.close(modalId);
        ui.overlay.close(sheetId);
      }
    };

    const marketingCheckbox = root.createComponent(
      Checkbox,
      {
        checked: formValues.marketing,
        onChange: (checked: boolean) => { formValues.marketing = checked; },
      },
      'Marketing',
    );

    const analyticsCheckbox = root.createComponent(
      Checkbox,
      {
        checked: formValues.analytics,
        onChange: (checked: boolean) => { formValues.analytics = checked; },
      },
      'Analytics',
    );

    const preferencesCheckbox = root.createComponent(
      Checkbox,
      {
        checked: formValues.preferences,
        onChange: (checked: boolean) => { formValues.preferences = checked; },
      },
      'Preferences',
    );

    const saleOfDataCheckbox = root.createComponent(
      Checkbox,
      {
        checked: formValues.saleOfData,
        onChange: (checked: boolean) => { formValues.saleOfData = checked; },
      },
      'Sale of data',
    );

    const consentFormGrid = root.createComponent(Grid, {spacing: 'base'});
    consentFormGrid.appendChild(marketingCheckbox);
    consentFormGrid.appendChild(analyticsCheckbox);
    consentFormGrid.appendChild(preferencesCheckbox);
    consentFormGrid.appendChild(saleOfDataCheckbox);

    const consentFormBlockStack = root.createComponent(BlockStack);
    consentFormBlockStack.appendChild(consentFormGrid);
    consentFormBlockStack.appendChild(
      root.createComponent(Button, {accessibilityRole: 'submit'}, 'Save preferences'),
    );

    const consentForm = root.createComponent(
      Form,
      {onSubmit: () => handleConsentChange()},
    );
    consentForm.appendChild(consentFormBlockStack);

    const modalFragment = root.createFragment();
    modalFragment.appendChild(
      root.createComponent(Modal, {id: modalId, padding: true}, [consentForm]),
    );

    const declineButton = root.createComponent(
      Button,
      {
        kind: 'secondary',
        onPress: () =>
          handleConsentChange({
            analytics: false,
            marketing: false,
            preferences: false,
            saleOfData: false,
          }),
      },
      'Decline',
    );

    const acceptButton = root.createComponent(
      Button,
      {
        kind: 'secondary',
        onPress: () =>
          handleConsentChange({
            analytics: true,
            marketing: true,
            preferences: true,
            saleOfData: true,
          }),
      },
      'Accept all',
    );

    const settingsButton = root.createComponent(
      Button,
      {kind: 'plain', overlay: modalFragment},
      'Manage preferences',
    );

    const primaryActionFragment = root.createFragment();
    primaryActionFragment.appendChild(declineButton);
    primaryActionFragment.appendChild(acceptButton);

    const secondaryActionFragment = root.createFragment();
    secondaryActionFragment.appendChild(settingsButton);

    const sheet = root.createComponent(
      Sheet,
      {
        id: sheetId,
        defaultOpen: showBanner,
        accessibilityLabel: 'Cookie consent preferences',
        primaryAction: primaryActionFragment,
        secondaryAction: secondaryActionFragment,
      },
      [
        root.createComponent(TextBlock, undefined, [
          'This website uses cookies to ensure you get the best experience. ',
          root.createComponent(Link, undefined, 'Privacy Policy'),
        ]),
      ],
    );

    root.appendChild(sheet);
  },
);

Description

Add a simple, static message to the footer that appears on every customer account page. This example shows how to render lightweight content without dynamic data fetching, which is the recommended approach for this target to prevent layout shifting.

React

import {
  reactExtension,
  BlockStack,
  Divider,
  InlineStack,
  Link,
  Text,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.footer.render-after',
  () => <Extension />,
);

function Extension() {
  return (
    <BlockStack spacing="base">
      <Divider />
      <InlineStack spacing="base" blockAlignment="center" inlineAlignment="center">
        <Link to="https://your-app.com/help">Help Center</Link>
        <Text appearance="subdued">|</Text>
        <Link to="https://your-app.com/terms">Terms of Service</Link>
        <Text appearance="subdued">|</Text>
        <Link to="https://your-app.com/contact">Contact Us</Link>
      </InlineStack>
    </BlockStack>
  );
}

TS

import {
  BlockStack,
  Divider,
  extension,
  InlineStack,
  Link,
  Text,
} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.footer.render-after',
  (root) => {
    const links = root.createComponent(
      InlineStack,
      {spacing: 'base', blockAlignment: 'center', inlineAlignment: 'center'},
      [
        root.createComponent(Link, {to: 'https://your-app.com/help'}, 'Help Center'),
        root.createComponent(Text, {appearance: 'subdued'}, '|'),
        root.createComponent(Link, {to: 'https://your-app.com/terms'}, 'Terms of Service'),
        root.createComponent(Text, {appearance: 'subdued'}, '|'),
        root.createComponent(Link, {to: 'https://your-app.com/contact'}, 'Contact Us'),
      ],
    );

    const layout = root.createComponent(BlockStack, {spacing: 'base'}, [
      root.createComponent(Divider),
      links,
    ]);

    root.appendChild(layout);
  },
);

Anchor to Best practicesBest practices

Keep content lightweight: Since the footer renders on every customer account page, avoid heavy data fetching or complex rendering that could cause layout shifts. Use static content or reserve space with placeholder components while loading.
Use the consent APIs for privacy banners: Use applyTrackingConsentChange and useCustomerPrivacy() (React) or customerPrivacy (TS) rather than building custom consent tracking. These APIs integrate directly with Shopify's consent management system.
Respect the shouldShowBanner flag: When building consent banners, check shouldShowBanner from the Customer Privacy API to determine whether a banner should be shown. This flag accounts for whether consent has already been collected.
Provide accessible overlays: When using Sheet or Modal components for consent forms, include accessibilityLabel attributes and ensure the form can be navigated with keyboard controls.

Anchor to LimitationsLimitations

Single target per module: Each [[extensions.targeting]] entry in your TOML configuration maps one target to one module file.
Static target: This is a static extension target, meaning it renders on every customer account page. It can't be conditionally shown or hidden per page.
collect_buyer_consent capability required: Using applyTrackingConsentChange from the Customer Privacy API requires the collect_buyer_consent capability in your TOML configuration. Without this capability, consent changes will fail.
No block collapse: Returning null from this target collapses the extension rather than removing it from the page. The extension slot still exists in the DOM.

Was this page helpful?