Choose a version:

Footer

The footer appears at the bottom of the checkout page, below the policy links and copyright text. Use this area to extend or replace the default footer with supplemental content such as custom policy links and branded layouts. Interactive elements like discount code inputs and consent toggles belong in the main checkout experience instead.

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

Custom policy links: Add links to store policies beyond the defaults, such as shipping, returns, accessibility, or region-specific policies.
Trust signals: Display security badges, certifications, or compliance marks to reinforce buyer confidence.
Legal disclaimers and disclosures: Surface region-specific legal text, regulatory notices, or accessibility statements.
Support and contact information: Display customer service details, business hours, or support links for buyers who need help.
Custom branding: Replace the default footer with branded content, custom layouts, and store-specific information.

Anchor to Footer targetFooter target

Use this static extension target to extend the area below the checkout footer. This target supports the full checkout component set, including form fields, banners, images, and interactive elements. The examples demonstrate rendering custom policy links with the Shop API and displaying trust signals with web components.

Anchor to Checkout footer ,[object Object]Checkout footer target

purchase.checkout.footer.render-after

Adds persistent content after the default checkout footer. Like all checkout targets, this target has write access through API methods for cart lines, discount codes, gift cards, notes, attributes, metafields, and shipping address changes.

Extensions also have read access through API properties to checkout state, including shop information, buyer identity, cost breakdowns, and cart lines.

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 storefrontUrl = shopify.shop.storefrontUrl;

if (!storefrontUrl) return null;

return (

<s-stack direction="inline" gap="large-100">

<s-link href={`${storefrontUrl}/policies/accessibility-statement`}>

Accessibility

</s-link>

<s-link href={`${storefrontUrl}/pages/shipping-and-delivery`}>

Shipping details

</s-link>

<s-link href={`${storefrontUrl}/pages/contact`}>

</s-link>

</s-stack>

);

}

Examples

Description

Render a row of additional policy links below the default footer. This example uses the Shop API to build storefront URLs for accessibility, shipping, and contact pages.

jsx

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

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

function Extension() {
  const storefrontUrl = shopify.shop.storefrontUrl;

  if (!storefrontUrl) return null;

  return (
    <s-stack direction="inline" gap="large-100">
      <s-link href={`${storefrontUrl}/policies/accessibility-statement`}>
        Accessibility
      </s-link>
      <s-link href={`${storefrontUrl}/pages/shipping-and-delivery`}>
        Shipping details
      </s-link>
      <s-link href={`${storefrontUrl}/pages/contact`}>
        Contact us
      </s-link>
    </s-stack>
  );
}

Description

Reinforce buyer confidence with a secure-checkout badge next to a short message. This example uses layout components to render a static trust signal.

jsx

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

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

function Extension() {
  return (
    <s-stack direction="inline" gap="small" alignItems="center">
      <s-image
        src="https://cdn.shopify.com/YOUR_BADGE_IMAGE_HERE"
        alt="Secure checkout badge"
      />
      <s-text>
        Your payment is encrypted and processed securely.
      </s-text>
    </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.
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 essential checkout actions in higher-visibility targets like the header or a block placement.

Was this page helpful?

Footer

Anchor to Use casesUse cases

Anchor to Footer targetFooter target

Anchor to Checkout footer ,[object Object]Checkout footer target

Supported components

Available APIs

Supported components

Available APIs

jsx

Anchor to Best practicesBest practices