Choose a version:

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.

Anchor to Use casesUse 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.
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.

Anchor to Footer targetFooter target

Use this static extension target 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 for order data and API properties for reading checkout state.

Anchor to Thank you footer ,[object Object]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 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 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)

Examples

jsx

import '@shopify/ui-extensions/preact';

import {render} from 'preact';

export default function extension() {

render(<Extension />, document.body);

}

function Extension() {

const orderNumber =

shopify.orderConfirmation.value?.number;

const referralUrl = `https://${shopify.shop.myshopifyDomain}/referral?order=${orderNumber}`;

return (

<s-stack gap="base">

<s-paragraph>

Share this link with a friend and you'll

both get 10% off your next order.

</s-paragraph>

<s-stack direction="inline" gap="base">

<s-text>{referralUrl}</s-text>

<s-button commandFor="referral-link">

Copy link

</s-button>

<s-clipboard-item

id="referral-link"

text={referralUrl}

</s-stack>

);

}

Examples

Description

Create a footer extension that generates a shareable referral link tied to the completed order.

jsx

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

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

function Extension() {
  const orderNumber =
    shopify.orderConfirmation.value?.number;
  const referralUrl = `https://${shopify.shop.myshopifyDomain}/referral?order=${orderNumber}`;

  return (
    <s-stack gap="base">
      <s-paragraph>
        Share this link with a friend and you'll
        both get 10% off your next order.
      </s-paragraph>
      <s-stack direction="inline" gap="base">
        <s-text>{referralUrl}</s-text>
        <s-button commandFor="referral-link">
          Copy link
        </s-button>
        <s-clipboard-item
          id="referral-link"
          text={referralUrl}
        />
      </s-stack>
    </s-stack>
  );
}

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

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

export default function extension() {
  render(<Extension />, 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 (
    <s-stack gap="base">
      <s-text type="strong">
        You earned {totalPoints} loyalty points
      </s-text>
      {isFirstOrder && (
        <s-text>
          Includes {FIRST_ORDER_BONUS} bonus
          points for your first order!
        </s-text>
      )}
      <s-link
        href={`https://${shopify.shop.myshopifyDomain}/account`}
      >
        View your rewards
      </s-link>
    </s-stack>
  );
}

Anchor to Best practicesBest 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 or 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 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 or header targets instead.

Was this page helpful?