--- title: Footer description: >- The footer appears at the bottom of every customer account page. Extensions in the footer are ideal for elements that need to be visible across the entire customer account experience, such as cookie consent banners. api_version: 2026-04 source_url: html: >- https://shopify.dev/docs/api/customer-account-ui-extensions/latest/targets/footer md: >- https://shopify.dev/docs/api/customer-account-ui-extensions/latest/targets/footer.md --- # 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](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/targets/full-page). This is a static extension target that renders on every customer account page and can't be conditionally shown or hidden per page. Returning `null` from this target collapses the extension rather than removing it from the page, so the extension slot still exists in the DOM. ### Use 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. ![Customer account footer section showing all available extension target locations with highlighted slots below the page content.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/footer-hero-img-swX3LwzH.png) *** ## Footer targets Use the [static extension target](https://shopify.dev/docs/api/customer-account-ui-extensions/latest#building-your-extension) 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](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/target-apis/account-apis/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](https://shopify.dev/docs/apps/build/customer-accounts/capabilities#collect-buyer-consent) in your TOML configuration file. ### Footer (render after) target `customer-account.footer.render-after` Renders a [static extension target](https://shopify.dev/docs/api/customer-account-ui-extensions/latest#building-your-extension) 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](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components/feedback-and-status-indicators/spinner), [skeleton paragraph](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components/typography-and-content/skeleton-paragraph), or [stack](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components/layout-and-structure/stack). ### Support Components (62) APIs (14) ### Supported components * [Abbreviation](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/abbreviation) * [Announcement](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/announcement) * [Avatar](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/avatar) * [Badge](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/badge) * [Banner](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/banner) * [Box](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/box) * [Button](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/button) * [Button group](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/button-group) * [Checkbox](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/checkbox) * [Chip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/chip) * [Choice list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/choice-list) * [Clickable](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clickable) * [Clickable chip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clickable-chip) * [Clipboard item](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/clipboard-item) * [Consent checkbox](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/consent-checkbox) * [Consent phone field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/consent-phone-field) * [Customer account action](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/customer-account-action) * [Date field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/date-field) * [Date picker](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/date-picker) * [Details](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/details) * [Divider](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/divider) * [Drop zone](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/drop-zone) * [Email field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/email-field) * [Form](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/form) * [Grid](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/grid) * [Heading](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/heading) * [Icon](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/icon) * [Image](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/image) * [Image group](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/image-group) * [Link](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/link) * [Map](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/map) * [Menu](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/menu) * [Modal](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/modal) * [Money field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/money-field) * [Number field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/number-field) * [Ordered list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/ordered-list) * [Page](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/page) * [Paragraph](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/paragraph) * [Password field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/password-field) * [Payment icon](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/payment-icon) * [Phone field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/phone-field) * [Popover](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/popover) * [Press button](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/actions/press-button) * [Product thumbnail](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/product-thumbnail) * [Progress](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/progress) * [Qr code](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/media-and-visuals/qr-code) * [Query container](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/query-container) * [Scroll box](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/scroll-box) * [Section](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/section) * [Select](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/select) * [Sheet](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/sheet) * [Skeleton paragraph](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/skeleton-paragraph) * [Spinner](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/feedback-and-status-indicators/spinner) * [Stack](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/layout-and-structure/stack) * [Switch](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/switch) * [Text](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/text) * [Text area](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/text-area) * [Text field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/text-field) * [Time](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/time) * [Tooltip](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/overlays/tooltip) * [Unordered list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/typography-and-content/unordered-list) * [Url field](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/web-components/forms/url-field) ### Available APIs * [Analytics API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/analytics-api) * [Authenticated Account API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/authenticated-account-api) * [Customer Account API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/customer-account-api) * [Customer Privacy API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/account-apis/customer-privacy-api) * [Extension API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/extension-api) * [Intents API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/intents-api) * [Localization API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/localization-api) * [Navigation API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/navigation-api) * [Session Token API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/session-token-api) * [Settings API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/settings-api) * [Storage API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/storage-api) * [Storefront API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/storefront-api) * [Toast API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/toast-api) * [Version API](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/target-apis/platform-apis/version-api) Examples ### 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/latest/polaris-web-components/overlays/sheet) to display the banner and a \[modal]\(/docs/api/customer-account-ui-extensions/latest/polaris-web-components/overlays/modal) for granular consent settings. It reads the current consent state from \`shopify.customerPrivacy\` and applies changes with \`shopify.applyTrackingConsentChange\`. ##### jsx ```jsx import '@shopify/ui-extensions/preact'; import {render} from 'preact'; import {useState, useRef} from 'preact/hooks'; export default async () => { render(, document.body); }; function Extension() { const { shouldShowBanner, visitorConsent: { analytics, marketing, preferences, saleOfData, }, } = shopify.customerPrivacy.value; const [consentFormValues, setConsentFormValues] = useState({ analytics, marketing, preferences, saleOfData, }); const sheetId = 'sheet-consent'; const modalId = 'modal-consent'; const sheetRef = useRef(); const modalRef = useRef(); const getCheckboxOnChangeHandler = (key) => { return function (event) { setConsentFormValues({ ...consentFormValues, [key]: event.currentTarget.checked, }); }; }; const handleConsentChange = async (visitorConsent) => { try { const result = await shopify.applyTrackingConsentChange({ ...(visitorConsent ? visitorConsent : consentFormValues), type: 'changeVisitorConsent', }); if (result.type === 'success') { modalRef.current?.hideOverlay(); sheetRef.current?.hideOverlay(); } } catch (error) { console.error('Failed to apply consent change:', error); } }; if (!shouldShowBanner) { return null; } return ( handleConsentChange({ analytics: false, marketing: false, preferences: false, saleOfData: false, }) } > Decline handleConsentChange({ analytics: true, marketing: true, preferences: true, saleOfData: true, }) } > Accept all Manage preferences handleConsentChange()}> Save preferences This website uses cookies to ensure you get the best experience.{' '} Privacy Policy ); } ``` * #### ##### 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. ##### jsx ```jsx import '@shopify/ui-extensions/preact'; import {render} from 'preact'; export default async () => { render(, document.body); }; function Extension() { return ( Help Center | Terms of Service | Contact Us ); } ``` *** ## Best 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 `shopify.customerPrivacy` and `shopify.applyTrackingConsentChange` 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 `shopify.customerPrivacy.value.shouldShowBanner` to determine whether a banner should be shown. This flag accounts for whether consent has already been collected. * **Provide accessible overlays:** When using [sheet](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components/overlays/sheet) or [modal](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components/overlays/modal) components for consent forms, include `accessibilityLabel` attributes and ensure the form can be navigated with keyboard controls. ***