---
title: Customize the footer that displays at checkout
description: Learn how to customize the checkout footer with checkout UI extensions and the GraphQL Admin API's checkout branding types.
source_url:
  html: https://shopify.dev/docs/apps/build/checkout/customize-footer?extension=polaris
  md: https://shopify.dev/docs/apps/build/checkout/customize-footer.md?extension=polaris
---

# Customize the footer that displays at checkout

You can customize the checkout footer with trust-building information such as links to policies for shipping and returns.

This guide explains how to customize the footer using Shopify Extensions in Checkout. You'll use checkout UI extensions and the GraphQL Admin API's [checkout branding fields](https://shopify.dev/docs/api/admin-graphql/latest/mutations/checkoutBrandingUpsert) to render a customized footer on the **Checkout** and **Thank you** pages.

Note

Toggling the visibility for footer policies affects only the **Checkout** and **Thank you** pages. The **Order Status** and customer account pages aren't affected.

Follow this guide for an end-to-end example. Then, explore the API documentation to suit your customization needs.

Shopify Plus

Checkout UI extensions and styling customizations are available only to [Shopify Plus](https://www.shopify.com/plus) merchants.

## What you'll learn

In this tutorial, you'll learn how to do the following tasks:

* Hide the default footer, including the default policy links.
* Set the footer to full width.
* Configure an extension for multiple targets, such as the **Checkout** and **Thank you** pages.
* Populate the footer with custom links.
* Deploy your extension code to Shopify.

## Requirements

[The store that you're modifying with the branding API must be on a Shopify Plus plan.](https://help.shopify.com/manual/intro-to-shopify/pricing-plans/plans-features/shopify-plan)

* You're a [user with app development permissions](https://shopify.dev/docs/apps/build/dev-dashboard/user-permissions).

* You've created a new [development store](https://shopify.dev/docs/api/development-stores) with the following:

  * [Generated test data](https://shopify.dev/docs/api/development-stores/generated-test-data)
  * [Checkout and Customer Accounts Extensibility](https://shopify.dev/docs/api/developer-previews#checkout-and-customer-accounts-extensibility-developer-preview) feature preview enabled

* You've [created an app that uses Shopify CLI 3.85.1 or higher](https://shopify.dev/docs/apps/build/scaffold-app).

[Your app can make authenticated requests to the GraphQL Admin API.](https://shopify.dev/docs/api/admin-graphql)

[Installed GraphiQL or created an app](https://shopify-graphiql-app.shopifycloud.com/login)

You've either installed the GraphiQL app on your store or [created an app](https://shopify.dev/docs/apps/build/scaffold-app), with the `read_checkout_branding_settings` and `write_checkout_branding_settings` [access scopes](https://shopify.dev/docs/api/usage/access-scopes).

[You're using GraphQL Admin API version `2024-04` or higher.](https://shopify.dev/docs/api/admin-graphql)

[You're familiar with the GraphQL Admin API's branding structures.](https://shopify.dev/docs/apps/checkout/styling)

## Project

Polaris

[View on GitHub](https://github.com/Shopify/example-checkout--custom-footer--preact)

### Retrieve the store's published checkout profile ID

Checkout styling properties apply to a [checkout profile](https://shopify.dev/docs/apps/build/checkout/styling#checkout-profile).

In this step, you'll retrieve the ID of the checkout profile to which you'll apply changes to the footer.

1. Query [`checkoutProfiles`](https://shopify.dev/docs/api/admin-graphql/latest/queries/checkoutProfiles) to retrieve a list of checkout profile IDs.

   The `is_published` parameter indicates which checkout profile is currently applied to your store's live checkout.

2. Make note of your corresponding ID from the list. You'll supply the ID in subsequent mutations.

   ## POST https\://{shop}.myshopify.com/admin/api/{api\_version}/graphql.json

   ```graphql
   query checkoutProfiles {
     checkoutProfiles(first: 1, query: "is_published:true") {
       edges {
         node {
           id
           name
         }
       }
     }
   }
   ```

   ```json
   {
     "data": {
       "checkoutProfiles": {
         "edges": [
           {
             "node": {
               "id": "gid://shopify/CheckoutProfile/1",
               "name": "Default checkout profile"
             }
           }
         ]
       }
     }
   }
   ```

   ##### GraphQL query

   ```
   query checkoutProfiles {
     checkoutProfiles(first: 1, query: "is_published:true") {
       edges {
         node {
           id
           name
         }
       }
     }
   }
   ```

   ##### JSON response

   ```
   {
     "data": {
       "checkoutProfiles": {
         "edges": [
           {
             "node": {
               "id": "gid://shopify/CheckoutProfile/1",
               "name": "Default checkout profile"
             }
           }
         ]
       }
     }
   }
   ```

### Hide the default footer policy links and make the footer full width

To replace the default footer with customized content, you first need to hide it. After the default is hidden, you can use a checkout UI extension to add the custom footer.

Note

If you insert the `HIDDEN` and `END` values from the variables into the mutation, then remove the string delimiters as these are enum values.

Make a request to the `checkoutBrandingUpsert` mutation's [`customizations`](https://shopify.dev/docs/api/admin-graphql/latest/mutations/CheckoutBrandingUpsert#field-checkoutbrandinginput-customizations) object. You'll hide the default footer, and expand the footer to full width so that your extensions can render across the entire page.

## POST https\://{shop}.myshopify.com/admin/api/{api\_version}/graphql.json

```graphql
mutation updateCheckoutBranding($checkoutBrandingInput: CheckoutBrandingInput!, $checkoutProfileId:ID!) {
  checkoutBrandingUpsert(checkoutBrandingInput:$checkoutBrandingInput, checkoutProfileId:$checkoutProfileId) {
    checkoutBranding {
      customizations {
        footer {
          content {
            visibility
          }
          position
        }
      }
    }
  }
}
```

```json
{
  "checkoutProfileId": "gid://shopify/CheckoutProfile/YOUR_CHECKOUT_PROFILE_ID_HERE",
  "checkoutBrandingInput": {
    "customizations": {
      "footer": {
        "content": {
          "visibility": "HIDDEN"
        },
        "position": "END"
      }
    }
  }
}
```

```json
{
  "data": {
    "checkoutBrandingUpsert": {
      "checkoutBranding": {
        "customizations": {
          "footer": {
            "content": {
              "visibility": "HIDDEN"
            },
            "position": "END",
          }
        }
      }
    }
  }
}
```

##### GraphQL mutation

```
mutation updateCheckoutBranding($checkoutBrandingInput: CheckoutBrandingInput!, $checkoutProfileId:ID!) {
  checkoutBrandingUpsert(checkoutBrandingInput:$checkoutBrandingInput, checkoutProfileId:$checkoutProfileId) {
    checkoutBranding {
      customizations {
        footer {
          content {
            visibility
          }
          position
        }
      }
    }
  }
}
```

##### Query variables

```
{
  "checkoutProfileId": "gid://shopify/CheckoutProfile/YOUR_CHECKOUT_PROFILE_ID_HERE",
  "checkoutBrandingInput": {
    "customizations": {
      "footer": {
        "content": {
          "visibility": "HIDDEN"
        },
        "position": "END"
      }
    }
  }
}
```

##### JSON response

```
{
  "data": {
    "checkoutBrandingUpsert": {
      "checkoutBranding": {
        "customizations": {
          "footer": {
            "content": {
              "visibility": "HIDDEN"
            },
            "position": "END",
          }
        }
      }
    }
  }
}
```

### Create a checkout UI extension

To create a checkout UI extension, use Shopify CLI, which generates starter code for building your extension.

To create a checkout UI extension, you can use Shopify CLI, which generates starter code for building your extension and automates common development tasks.

1. Navigate to your app directory:

   ## Terminal

   ```terminal
   cd <directory>
   ```

2. Run the following command to create a new checkout UI extension:

   ## Terminal

   ```terminal
   shopify app generate extension --template checkout_ui --name my-checkout-ui-extension
   ```

1) Select `Checkout UI`.

   You should now have a new extension directory in your app's directory. The extension directory includes the extension script at `src/Checkout.jsx`. The following is an example directory structure:

   ## Checkout UI extension file structure

   ```text
   └── my-app
     └── extensions
       └── my-checkout-ui-extension
           ├── src
           │   └── Checkout.jsx OR Checkout.js // The index page of the checkout UI extension
           ├── locales
           │   ├── en.default.json // The default locale for the checkout UI extension
           │   └── fr.json // The locale file for non-regional French translations
           ├── shopify.extension.toml // The config file for the checkout UI extension
           └── package.json
   ```

1. Start your development server to build and preview your app:

   ## Terminal

   ```terminal
   shopify app dev
   ```

   To learn about the processes that are executed when you run `dev`, refer to the [Shopify CLI command reference](https://shopify.dev/docs/api/shopify-cli/app/app-dev).

2. Press `p` to open the developer console. In the developer console page, click on the preview link for your extension.

### Set up multiple targets for your extension

[Targets](https://shopify.dev/docs/api/checkout-extensions/checkout#extension-targets) control where your extension renders in the checkout flow. Extensions can support one or [multiple targets](https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration?accordionItem=targets-supporting-multiple-extension-targets).

This example uses [purchase.checkout.footer.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/latest/targets/footer/purchase-checkout-footer-render-after) and [purchase.thank-you.footer.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/latest/targets/footer/purchase-thank-you-footer-render-after) to render the extension on the **Checkout** and **Thank you** pages, respectively.

To support multiple targets, you must provide a separate file for each extension target using the `export default` declaration.

Note

You'll import and reference `Extension.jsx`, which will be created in a later [step](#create).

#### Render the extension from your Checkout script file

In your `Checkout.jsx` file, render the extension from `Extension.jsx` and export it so that you can reference it in your configuration.

## /extensions/customize-footer/src/Checkout.jsx

```jsx
import '@shopify/ui-extensions/preact';
import {render} from "preact";
import Extension from "./Extension.jsx";


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

#### Render the extension from your Thank you script file

Create a new file in your extension's `src` directory called `ThankYou.jsx`. You'll use this to reference the extension in your configuration file.

In your `ThankYou.jsx` file, render the extension from `Extension.jsx` and export it so that you can reference it in your configuration.

## /extensions/customize-footer/src/ThankYou.jsx

```jsx
import '@shopify/ui-extensions/preact';
import {render} from "preact";
import Extension from "./Extension.jsx";


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

#### Reference the extension targets in your configuration file

You can define more than one target so that app users can add the extension to multiple locations in the checkout.

In your checkout UI extension's configuration file, for each of your targets, create an `[[extensions.targeting]]` section with the following information:

* `module`: The path to the file that contains the extension code.

* `target`: An identifier that specifies where you're injecting code into Shopify.

***

[`shopify.extension.toml`](https://shopify.dev/docs/apps/build/app-extensions/configure-app-extensions) is the configuration file for your extension. It contains basic information and settings.

Note

Whenever you edit your extension configuration file, you need to restart your server for the changes to take effect.

## Terminal

```bash
shopify app dev
```

## /extensions/customize-footer/shopify.extension.toml

```toml
# Learn more about configuring your checkout UI extension:
# https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration


# The version of APIs your extension will receive. Learn more:
# https://shopify.dev/docs/api/usage/versioning
api_version = "2025-10"


[[extensions]]
name = "customize-footer"
handle = "customize-footer"
type = "ui_extension"
uid = "a6339931-c50a-f8fb-bd7e-8b29fcb1deb990526b7f"


# Controls where in Shopify your extension will be injected,
# and the file that contains your extension’s source code. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/latest/extension-targets-overview


[[extensions.targeting]]
module = "./src/Checkout.jsx"
target = "purchase.checkout.footer.render-after"


[[extensions.targeting]]
module= "./src/ThankYou.jsx"
target = "purchase.thank-you.footer.render-after"


[extensions.capabilities]
# Gives your extension access to directly query Shopify’s storefront API.
# https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration#api-access
api_access = true
```

### Populate the extension with custom content

In this step, you'll populate the footer with links to store policies, which you'll retrieve with the [StandardApi](https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/storefront-api#standardapi).

#### Create the Extension.jsx file

Create a new file in your extension's `src` directory named `Extension.jsx`.

This will render the footer content for both targets that you [previously set up](#set-up-multiple-targets-for-your-extension) in `Checkout.jsx` and `ThankYou.jsx`

#### Render links in a two column layout

Using the [`Stack`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/structure/stack) component with `direction` set to `inline`, create two groups of links that will become the left and right columns of the footer.

Create links to your storefront's pages with the [StandardApi](https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/storefront-api#standardapi). You can use the [`shop`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/standardapi#standardapi-propertydetail-shop) object from the StandardApi to retrieve the `storefrontUrl`.

Add the two groups of links to a [`Grid`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/structure/grid) component, which enables the links to render in two columns.

***

The `StandardApi` object is automatically made available to all targets.

[shop](https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/standardapi#standardapi-propertydetail-shop)[Standard​Api](https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/standardapi)[Icon](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/media/icon)[Grid](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/structure/grid)[Stack](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/structure/stack)[Link](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/actions/link)[Text](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/titles-and-text/text)

## /extensions/customize-footer/src/Extension.jsx

```jsx
export default function Extension() {
  const {storefrontUrl} = shopify.shop;


  return (
    <s-grid
      alignItems="center"
      gridTemplateColumns="1fr auto"
      accessibilityRole="navigation"
    >
      <s-stack
        direction="inline"
        gap="small-400"
        alignItems="center"
        accessibilityRole="ordered-list"
      >
        <s-stack
          direction="inline"
          accessibilityRole="list-item"
          alignItems="center"
          gap="small-400"
        >
          <s-link href={storefrontUrl}>Home</s-link>
          <s-icon type="chevron-right" size="small-200" />
        </s-stack>
        <s-stack
          direction="inline"
          accessibilityRole="list-item"
          alignItems="center"
          gap="small-400"
        >
          <s-link href={new URL("/collections", storefrontUrl).href}>
            Shop
          </s-link>
          <s-icon type="chevron-right" size="small-200" />
        </s-stack>
        <s-stack direction="inline" accessibilityRole="list-item">
          <s-text color="subdued">Checkout</s-text>
        </s-stack>
      </s-stack>


      <s-stack
        direction="inline"
        gap="small-200"
        alignItems="end"
        accessibilityRole="ordered-list"
      >
        <s-box accessibilityRole="list-item">
          <s-link href={new URL("/sizing", storefrontUrl).href}>Sizing</s-link>
        </s-box>
        <s-box accessibilityRole="list-item">
          <s-link href={new URL("/terms", storefrontUrl).href}>Terms</s-link>
        </s-box>
        <s-box accessibilityRole="list-item">
          <s-link href={new URL("/privacy", storefrontUrl).href}>
            Privacy
          </s-link>
        </s-box>
        <s-box accessibilityRole="list-item">
          <s-link href={new URL("/faq", storefrontUrl).href}>FAQ</s-link>
        </s-box>
        <s-box accessibilityRole="list-item">
          <s-link href={new URL("/accessibility", storefrontUrl).href}>
            Accessibility
          </s-link>
        </s-box>
      </s-stack>
    </s-grid>
  );
}
```

### Preview the extension

Preview your extension to make sure that it works as expected.

#### Start your server

Run the Shopify CLI `dev` command to build your app and preview it on your development store.

Make sure that you select a development store that has enabled the feature preview for [Checkout and Customer Accounts Extensibility](https://shopify.dev/docs/api/developer-previews#checkout-and-customer-accounts-extensibility-developer-preview).

1. In a terminal, navigate to your app directory.

2. Either start or restart your server to build and preview your app:

   ## Terminal

   ```bash
   shopify app dev
   ```

3. Press `p` to open the developer console.

4. In the developer console page, click on the preview link for the custom footerextension.

   The checkout opens.

***

This section describes how to solve some potential errors when you run `dev` for an app that contains a checkout UI extension.

### Property token error

If you receive the error `ShopifyCLI:AdminAPI requires the property token to be set`, then you'll need to use the [`--checkout-cart-url` flag](https://shopify.dev/docs/api/shopify-cli/app/app-dev#flags) to direct Shopify CLI to open a checkout session for you.

## Terminal

```terminal
shopify app dev --checkout-cart-url cart/{product_variant_id}:{quantity}
```

### Missing checkout link

If you don't receive the test checkout URL when you run `dev`, then verify the following:

* You have a development store populated with products.

* You're logged in to the correct Partners organization and development store. To verify, check your app info using the following command:

  ## Terminal

  ```terminal
  shopify app info
  ```

Otherwise, you can manually create a checkout with the following steps:

1. From your development store's storefront, add some products to your cart.

2. From the cart, click **Checkout**.

3. From directory of the app that contains your extension, run `dev` to preview your app:

   ## Terminal

   ```terminal
   shopify app dev
   ```

4. On the checkout page for your store, change the URL by appending the `?dev=https://{tunnel_url}/extensions` query string and reload the page. The `tunnel_url` parameter allows your app to be accessed using a unique HTTPS URL.

   You should now see a rendered order note that corresponds to the code in your project template.

When you're ready to release your changes to users, you can create and release an [app version](https://shopify.dev/docs/apps/launch/deployment/app-versions). An app version is a snapshot of your app configuration and all extensions.

1. Navigate to your app directory.

2. Run the following command.

   Optionally, you can provide a name or message for the version using the `--version` and `--message` flags.

   ## Terminal

   ```terminal
   shopify app deploy
   ```

Releasing an app version replaces the current active version that's served to stores that have your app installed. It might take several minutes for app users to be upgraded to the new version.

Tip

If you want to create a version, but avoid releasing it to users, then run the `deploy` command with a `--no-release` flag. You can release the unreleased app version using Shopify CLI's [`release`](https://shopify.dev/docs/api/shopify-cli/app/app-release) command, or through the Dev Dashboard.

## /extensions/customize-footer/src/Checkout.jsx

```jsx
import '@shopify/ui-extensions/preact';
import {render} from "preact";
import Extension from "./Extension.jsx";


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

## /extensions/customize-footer/src/ThankYou.jsx

```jsx
import '@shopify/ui-extensions/preact';
import {render} from "preact";
import Extension from "./Extension.jsx";


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

## /extensions/customize-footer/shopify.extension.toml

```toml
# Learn more about configuring your checkout UI extension:
# https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration


# The version of APIs your extension will receive. Learn more:
# https://shopify.dev/docs/api/usage/versioning
api_version = "2025-10"


[[extensions]]
name = "customize-footer"
handle = "customize-footer"
type = "ui_extension"
uid = "a6339931-c50a-f8fb-bd7e-8b29fcb1deb990526b7f"


# Controls where in Shopify your extension will be injected,
# and the file that contains your extension’s source code. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/latest/extension-targets-overview


[[extensions.targeting]]
module = "./src/Checkout.jsx"
target = "purchase.checkout.footer.render-after"


[[extensions.targeting]]
module= "./src/ThankYou.jsx"
target = "purchase.thank-you.footer.render-after"


[extensions.capabilities]
# Gives your extension access to directly query Shopify’s storefront API.
# https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration#api-access
api_access = true
```

## /extensions/customize-footer/src/Extension.jsx

```jsx
export default function Extension() {
  const {storefrontUrl} = shopify.shop;


  return (
    <s-grid
      alignItems="center"
      gridTemplateColumns="1fr auto"
      accessibilityRole="navigation"
    >
      <s-stack
        direction="inline"
        gap="small-400"
        alignItems="center"
        accessibilityRole="ordered-list"
      >
        <s-stack
          direction="inline"
          accessibilityRole="list-item"
          alignItems="center"
          gap="small-400"
        >
          <s-link href={storefrontUrl}>Home</s-link>
          <s-icon type="chevron-right" size="small-200" />
        </s-stack>
        <s-stack
          direction="inline"
          accessibilityRole="list-item"
          alignItems="center"
          gap="small-400"
        >
          <s-link href={new URL("/collections", storefrontUrl).href}>
            Shop
          </s-link>
          <s-icon type="chevron-right" size="small-200" />
        </s-stack>
        <s-stack direction="inline" accessibilityRole="list-item">
          <s-text color="subdued">Checkout</s-text>
        </s-stack>
      </s-stack>


      <s-stack
        direction="inline"
        gap="small-200"
        alignItems="end"
        accessibilityRole="ordered-list"
      >
        <s-box accessibilityRole="list-item">
          <s-link href={new URL("/sizing", storefrontUrl).href}>Sizing</s-link>
        </s-box>
        <s-box accessibilityRole="list-item">
          <s-link href={new URL("/terms", storefrontUrl).href}>Terms</s-link>
        </s-box>
        <s-box accessibilityRole="list-item">
          <s-link href={new URL("/privacy", storefrontUrl).href}>
            Privacy
          </s-link>
        </s-box>
        <s-box accessibilityRole="list-item">
          <s-link href={new URL("/faq", storefrontUrl).href}>FAQ</s-link>
        </s-box>
        <s-box accessibilityRole="list-item">
          <s-link href={new URL("/accessibility", storefrontUrl).href}>
            Accessibility
          </s-link>
        </s-box>
      </s-stack>
    </s-grid>
  );
}
```

## Tutorial complete!

Nice work - what you just built could be used by Shopify merchants around the world!

Keep the momentum going with these related tutorials and resources.

### Next steps

[![](https://shopify.dev/images/icons/32/globe.png)![](https://shopify.dev/images/icons/32/globe-dark.png)](https://shopify.dev/docs/apps/checkout/localizing-ui-extensions)

[Localize your extension](https://shopify.dev/docs/apps/checkout/localizing-ui-extensions)

[Learn how to localize the text and number formats in your extension.](https://shopify.dev/docs/apps/checkout/localizing-ui-extensions)

[![](https://shopify.dev/images/icons/32/blocks.png)![](https://shopify.dev/images/icons/32/blocks-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/polaris-web-components)

[Explore the Polaris web component reference](https://shopify.dev/docs/api/checkout-ui-extensions/polaris-web-components)

[Learn about all the components you can use in your checkout UI extensions.](https://shopify.dev/docs/api/checkout-ui-extensions/polaris-web-components)

[![](https://shopify.dev/images/icons/32/graphql.png)![](https://shopify.dev/images/icons/32/graphql-dark.png)](https://shopify.dev/docs/apps/checkout/styling)

[Explore the checkout branding API](https://shopify.dev/docs/apps/checkout/styling)

[Learn about other properties that are exposed in the GraphQL Admin API's checkout branding types.](https://shopify.dev/docs/apps/checkout/styling)