--- title: Footer description: >- The footer area appears at the bottom of the Thank you page, below the policy links and copyright text. Extensions in this area add supplemental content like post-purchase surveys, loyalty enrollment, referral links, and custom branding. api_version: 2026-04 api_name: checkout-ui-extensions source_url: html: >- https://shopify.dev/docs/api/checkout-ui-extensions/latest/targets/thank-you/footer md: >- https://shopify.dev/docs/api/checkout-ui-extensions/latest/targets/thank-you/footer.md --- # Footer The footer area appears at the bottom of the Thank you page, below the policy links and copyright text. Extensions in this area add supplemental content to the post-purchase experience without interfering with the order confirmation. The footer area might not be visible in embedded checkout contexts, mobile SDK integrations, or when the footer is suppressed through checkout branding settings. ### Use cases * **Referral links**: Generate shareable referral URLs tied to the completed order, with a copy-to-clipboard action for easy sharing. * **Social media follow links**: Display links to the store's social media profiles, encouraging buyers to stay connected after purchase. * **Legal compliance notices**: Show region-specific legal disclaimers, data processing notices, or regulatory information required for the buyer's location. * **Custom branding**: Replace the default footer with branded content, custom layouts, and store-specific information. Learn how to customize the footer from an [end-to-end tutorial](https://shopify.dev/docs/apps/build/checkout/customize-footer). * **Delivery tracking opt-in**: Prompt buyers with physical shipments to subscribe to SMS or email delivery updates, pre-filling contact details from the checkout data. ![Thank you page showing a Continue shopping button, a Need help contact link, and policy links (Return policy, Privacy policy, Terms of service), with the purchase.thank-you.footer.render-after target slot below all footer links.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/purchase.thank-you.footer.render-after-C69NoMpQ.png) *** ## Footer target Use this [static extension target](https://shopify.dev/docs/api/checkout-ui-extensions/latest/targets#static-extension-targets) to extend the area below the Thank you page footer. This target supports the full checkout component set, including form fields, banners, images, and interactive elements. The examples demonstrate using the [Order API](https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/order-api#order-confirmation-properties) for order data and API properties for reading checkout state. ### Thank you footer target `purchase.thank-you.footer.render-after` Adds persistent content after the default footer on the Thank you page. The [Order API](https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/order-api#order-confirmation-properties) provides read access to order data, including the order number and whether it's the buyer's first order. Extensions also have read access through API properties to checkout state, including shop information, buyer identity, cost breakdowns, and cart lines. The Storefront API is available through the [`query`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/platform-apis/storefront-api#docsstandardqueryapi-propertydetail-query) method for fetching additional data like product recommendations. Write access isn't available on Thank you page targets because the order is complete. ### Support Components (55) APIs (24) ### Supported components * [Abbreviation](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/abbreviation) * [Badge](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/feedback-and-status-indicators/badge) * [Banner](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/feedback-and-status-indicators/banner) * [Box](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/layout-and-structure/box) * [Button](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/actions/button) * [Checkbox](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/checkbox) * [Chip](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/chip) * [Choice list](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/choice-list) * [Clickable](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/actions/clickable) * [Clickable chip](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/actions/clickable-chip) * [Clipboard item](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/actions/clipboard-item) * [Consent checkbox](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/consent-checkbox) * [Consent phone field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/consent-phone-field) * [Date field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/date-field) * [Date picker](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/date-picker) * [Details](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/details) * [Divider](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/layout-and-structure/divider) * [Drop zone](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/drop-zone) * [Email field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/email-field) * [Form](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/form) * [Grid](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/layout-and-structure/grid) * [Heading](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/heading) * [Icon](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/media-and-visuals/icon) * [Image](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/media-and-visuals/image) * [Link](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/actions/link) * [Map](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/media-and-visuals/map) * [Modal](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/overlays/modal) * [Money field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/money-field) * [Number field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/number-field) * [Ordered list](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/ordered-list) * [Paragraph](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/paragraph) * [Password field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/password-field) * [Payment icon](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/media-and-visuals/payment-icon) * [Phone field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/phone-field) * [Popover](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/overlays/popover) * [Press button](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/actions/press-button) * [Product thumbnail](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/media-and-visuals/product-thumbnail) * [Progress](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/feedback-and-status-indicators/progress) * [Qr code](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/media-and-visuals/qr-code) * [Query container](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/layout-and-structure/query-container) * [Scroll box](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/layout-and-structure/scroll-box) * [Section](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/layout-and-structure/section) * [Select](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/select) * [Sheet](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/overlays/sheet) * [Skeleton paragraph](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/skeleton-paragraph) * [Spinner](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/feedback-and-status-indicators/spinner) * [Stack](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/layout-and-structure/stack) * [Switch](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/switch) * [Text](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/text) * [Text area](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/text-area) * [Text field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/text-field) * [Time](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/time) * [Tooltip](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/overlays/tooltip) * [Unordered list](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/unordered-list) * [Url field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/url-field) ### Available APIs * [Addresses API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/addresses-api) * [Analytics API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/analytics-api) * [Attributes API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/attributes-api) * [Buyer Identity API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/buyer-identity-api) * [Buyer Journey API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/buyer-journey-api) * [Cart Instructions API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/cart-instructions-api) * [Cart Lines API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/cart-lines-api) * [Checkout Token API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/checkout-token-api) * [Cost API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/cost-api) * [Customer Privacy API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/customer-privacy-api) * [Delivery API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/delivery-api) * [Discounts API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/discounts-api) * [Extension API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/extension-api) * [Gift Cards API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/gift-cards-api) * [Localization API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/localization-api) * [Localized Fields API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/localized-fields-api) * [Metafields API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/metafields-api) * [Note API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/note-api) * [Payments API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/payments-api) * [Session Token API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/session-token-api) * [Settings API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/settings-api) * [Shop API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/shop-api) * [Storage API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/storage-api) * [Storefront API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/storefront-api) Examples ### Examples * #### ##### Description Create a footer extension that generates a shareable referral link tied to the completed order. ##### jsx ```jsx import '@shopify/ui-extensions/preact'; import {render} from 'preact'; export default function extension() { render(, document.body); } function Extension() { const orderNumber = shopify.orderConfirmation.value?.number; const referralUrl = `https://${shopify.shop.myshopifyDomain}/referral?order=${orderNumber}`; return ( Share this link with a friend and you'll both get 10% off your next order. {referralUrl} Copy link ); } ``` * #### ##### Description Display a loyalty points summary based on the order total, with a bonus for first-time buyers. This example combines \`shopify.orderConfirmation\`, \`shopify.cost\`, and \`shopify.shop\` to build a personalized reward message. ##### jsx ```jsx import '@shopify/ui-extensions/preact'; import {render} from 'preact'; export default function extension() { render(, document.body); } const POINTS_PER_DOLLAR = 2; const FIRST_ORDER_BONUS = 500; function Extension() { const total = shopify.cost.totalAmount.value; const isFirstOrder = shopify.orderConfirmation.value ?.isFirstOrder; const basePoints = Math.floor( total.amount * POINTS_PER_DOLLAR, ); const bonusPoints = isFirstOrder ? FIRST_ORDER_BONUS : 0; const totalPoints = basePoints + bonusPoints; return ( You earned {totalPoints} loyalty points {isFirstOrder && ( Includes {FIRST_ORDER_BONUS} bonus points for your first order! )} View your rewards ); } ``` *** ## Best practices * **Reserve space for dynamic content**: Layout shifts in the footer are still noticeable during scrolling. If you load data asynchronously, use a [skeleton paragraph](https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/typography-and-content/skeleton-paragraph) or [spinner](https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/feedback-and-status-indicators/spinner) to hold space while content loads. * **Use full-width layouts**: A full-width layout gives your extension more space for content like multi-column layouts. Configure this through your store's checkout branding settings. * **Hide the default footer before replacing it**: When replacing the default footer with custom content, hide the default footer through your store's checkout branding settings first. This prevents duplicate footer content. * **Use the [Storage API](https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/platform-apis/storage-api) to track interactions**: Record whether a buyer has already submitted a survey or dismissed an enrollment prompt so it doesn't resurface on page refresh. * **Avoid placing critical actions in the footer**: This target renders after the policy links and copyright text at the bottom of the page. Buyers might not scroll this far, so place key post-purchase content in the [announcement](https://shopify.dev/docs/api/checkout-ui-extensions/latest/targets/thank-you/announcement) or [header](https://shopify.dev/docs/api/checkout-ui-extensions/latest/targets/thank-you/header) targets instead. ***