---
gid: ebe11a4d-7045-44f7-bc8c-5bd296f692c4
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.
---
import CheckoutUiRequirements from 'app/views/partials/apps/checkout/ui-extensions/requirements.mdx'
import CheckoutUiCreate from 'app/views/partials/apps/checkout/ui-extensions/create.mdx'
import CheckoutQueryPublishedCheckoutProfile from 'app/views/partials/apps/checkout/ui-extensions/query-published-checkout-profile.mdx'
import Deploy from 'app/views/partials/extensions/deploy.mdx'
import CheckoutUiPreview from 'app/views/partials/apps/checkout/ui-extensions/preview.mdx'
import CheckoutUiTroubleShooting from 'app/views/partials/apps/checkout/ui-extensions/troubleshooting.mdx'
import CheckoutUiReference from 'app/views/partials/apps/checkout/ui-extensions/reference.mdx'

<Repo extension="react" href="https://github.com/Shopify/example-checkout--custom-footer--react" />
<Repo extension="javascript" href="https://github.com/Shopify/example-checkout--custom-footer--js" />

<Picker name="extension">
  <PickerOption name="react" />
  <PickerOption name="javascript" />
</Picker>

<Overview>

  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 Checkout Extensibility. You'll use checkout UI extensions and the GraphQL Admin API's [checkout branding fields](/docs/api/admin-graphql/latest/mutations/checkoutBrandingUpsert) to render a customized footer on the **Checkout** and **Thank you** pages.

  <Notice type="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.
  </Notice>

  Learn from an end-to-end example in this guide, and then explore the API documentation to suit your customization needs.

  <Notice type="shopifyPlus" title="Shopify Plus">
      Checkout UI extensions and styling customizations are available only to [Shopify Plus](https://www.shopify.com/plus) merchants.
  </Notice>

  <video autoPlay muted loop controls>
      <source src="/assets/apps/checkout/header-footer/footer.webm" type="video/webm"/>
  </video>

  ## 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

</Overview>

<Requirements>
  <Requirement href="https://help.shopify.com/manual/intro-to-shopify/pricing-plans/plans-features/shopify-plan" label="The store that you're modifying with the branding API must be on a Shopify Plus plan.">
  </Requirement>
  <CheckoutUiRequirements />
  <Requirement href="/docs/api/admin-graphql" label="Your app can make authenticated requests to the GraphQL Admin API.">
  </Requirement>
  <Requirement href="https://shopify-graphiql-app.shopifycloud.com/login" label="Installed GraphiQL or created an app">
  You've either installed the GraphiQL app on your store or [created an app](/docs/apps/build/scaffold-app), with the `read_checkout_branding_settings` and `write_checkout_branding_settings` [access scopes](/docs/api/usage/access-scopes).
  </Requirement>
  <Requirement href="/docs/api/admin-graphql" label="You're using API version `2024-04` or higher.">
  </Requirement>
  <Requirement href="/docs/apps/checkout/styling" label="You're familiar with the GraphQL Admin API's branding structures.">
  </Requirement>

</Requirements>

<StepSection>

  <Step>
    <CheckoutQueryPublishedCheckoutProfile area="footer" />
  </Step>

  <Step>
    ### 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.

    <Notice type="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.
    </Notice>

    <Substep>

    Make a request to the `checkoutBrandingUpsert` mutation's [`customizations`](/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.

    <Codeblock title="POST https://{shop}.myshopify.com/admin/api/{api_version}/graphql.json">
      ```graphql title="GraphQL mutation"
      mutation updateCheckoutBranding($checkoutBrandingInput: CheckoutBrandingInput!, $checkoutProfileId:ID!) {
        checkoutBrandingUpsert(checkoutBrandingInput:$checkoutBrandingInput, checkoutProfileId:$checkoutProfileId) {
          checkoutBranding {
            customizations {
              footer {
                content {
                  visibility
                }
                position
              }
            }
          }
        }
      }
      ```

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

      ```json title="JSON response"
      {
        "data": {
          "checkoutBrandingUpsert": {
            "checkoutBranding": {
              "customizations": {
                "footer": {
                  "content": {
                    "visibility": "HIDDEN"
                  },
                  "position": "END",
                }
              }
            }
          }
        }
      }
      ```
    </Codeblock>

    </Substep>

  </Step>

  <Step>

    ### Create a checkout UI extension

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

    <Substep>

      <CheckoutUiCreate />

    </Substep>
  </Step>

  <Step>
    ### Set up multiple targets for your extension

    [Targets](/docs/api/checkout-extensions/checkout#extension-targets) control where your extension renders in the checkout flow. Extensions can support one or [multiple targets](/docs/api/checkout-ui-extensions/unstable/configuration#targets-supporting-multiple-extension-targets).

    This example uses [purchase.checkout.footer.render-after](/docs/api/checkout-ui-extensions/latest/targets/footer/purchase-checkout-footer-render-after) and [purchase.thank-you.footer.render-after](/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.

    <Notice type="note">
    You'll import and reference <If extension="react">`Extension.jsx`</If><If extension="javascript">`Extension.js`</If>, which will be created in a later [step](#create).
    </Notice>
    <Substep>

    <CodeRef
    extension="react"
    href="https://github.com/Shopify/example-checkout--custom-footer--react/blob/main/extensions/custom-footer/src/Checkout.jsx" tag="custom-footer.ext-point" />

    <CodeRef
    extension="javascript"
    href="https://github.com/Shopify/example-checkout--custom-footer--js/blob/main/extensions/custom-footer/src/Checkout.js" tag="custom-footer.ext-point" />

      #### Export the target from your Checkout script file

      In your <If extension="react">`Checkout.jsx`</If><If extension="javascript">`Checkout.js`</If> file, set the entrypoint for the checkout extension on the checkout page, and then export it so that you can reference it in your configuration.

      ---

      <Resources>
        [purchase.checkout.footer.render-after](/docs/api/checkout-ui-extensions/latest/targets/footer/purchase-checkout-footer-render-after)
      </Resources>

    </Substep>

    <Substep>
      <CodeRef
      extension="react"
      href="https://github.com/Shopify/example-checkout--custom-footer--react/blob/main/extensions/custom-footer/src/ThankYou.jsx" tag="custom-footer.ext-point" />

      <CodeRef
      extension="javascript"
      href="https://github.com/Shopify/example-checkout--custom-footer--js/blob/main/extensions/custom-footer/src/ThankYou.js" tag="custom-footer.ext-point" />


      #### Export the target from your Thank you script file

      Create a new file in your extension's `src` directory called <If extension="react">`ThankYou.jsx`</If><If extension="javascript">`ThankYou.js`</If>. You'll use this to set the checkout extension's entrypoint on the **Thank you** page.

      Set the entrypoint for the checkout extension, and then export it so that you can reference it in your configuration.

      ---

      <Resources>
        [purchase.thank-you.footer.render-after](/docs/api/checkout-ui-extensions/latest/targets/footer/purchase-thank-you-footer-render-after)
      </Resources>
    </Substep>

    <Substep>

        <CodeRef
        extension="react"
        href="https://github.com/Shopify/example-checkout--custom-footer--react/blob/main/extensions/custom-footer/shopify.extension.toml" tag="custom-footer.config-ext-point" />

        <CodeRef
        extension="javascript"
        href="https://github.com/Shopify/example-checkout--custom-footer--js/blob/main/extensions/custom-footer/shopify.extension.toml" tag="custom-footer.config-ext-point" />

        <CheckoutUiReference />

      </Substep>

  </Step>

  <Step>
    ### 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](/docs/api/checkout-ui-extensions/latest/apis/storefront-api#standardapi).

    <Substep>
      #### Create the <If extension="react">Extension.jsx</If><If extension="javascript">Extension.js</If> file
      <CodeRef
      extension="react"
      href="https://github.com/Shopify/example-checkout--custom-footer--react/blob/main/extensions/custom-footer/src/Extension.jsx" />

      <CodeRef
      extension="javascript"
      href="https://github.com/Shopify/example-checkout--custom-footer--js/blob/main/extensions/custom-footer/src/Extension.js" />

      Create a new file in your extension's `src` directory named <If extension="react">`Extension.jsx`</If><If extension="javascript">`Extension.js`</If>.

      This will render the footer content for both targets that you [previously set up](#set-up-multiple-targets-for-your-extension) in <If extension="react">`Checkout.jsx`</If><If extension="javascript">`Checkout.js`</If> and <If extension="react">`ThankYou.jsx`</If><If extension="javascript">`ThankYou.js`</If>
    </Substep>

    <Substep>
      #### Render links in a two column layout

      <CodeRef
      extension="react"
      href="https://github.com/Shopify/example-checkout--custom-footer--react/blob/main/extensions/custom-footer/src/Extension.jsx" tag="custom-footer.render" />

      <CodeRef
      extension="javascript"
      href="https://github.com/Shopify/example-checkout--custom-footer--js/blob/main/extensions/custom-footer/src/Extension.js" tag="custom-footer.render" />

      Using the [`InlineStack`](/docs/api/checkout-ui-extensions/latest/components/structure/inlinestack) component, create two groups of links that will become the left and right columns of the footer.

      <If extension="react">
      Create links to your storefront's pages using the [`useShop`](/docs/api/checkout-ui-extensions/latest/apis/shop#useShop) hook to retrieve the `storefrontUrl`.
      </If>
      <If extension="javascript">
      Create links to your storefront's pages with the [StandardApi](/docs/api/checkout-ui-extensions/latest/apis/storefront-api#standardapi). You can use the [`shop`](/docs/api/checkout-ui-extensions/latest/apis/standardapi#standardapi-propertydetail-shop) object from the StandardApi to retrieve the `storefrontUrl`.
      </If>

      Add the two groups of links to an [`InlineLayout`](/docs/api/checkout-ui-extensions/latest/components/structure/inlinelayout) component, which enables the links to render in two columns.

      ---

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

      <Resources>
        <If extension="react">
        [useShop](/docs/api/checkout-ui-extensions/latest/apis/shop#useShop)
        </If>
        <If extension="javascript">
        [shop](/docs/api/checkout-ui-extensions/latest/apis/standardapi#standardapi-propertydetail-shop)
        [StandardApi](/docs/api/checkout-ui-extensions/latest/apis/standardapi)
        </If>
        [Icon](/docs/api/checkout-ui-extensions/latest/components/media/icon)
        [InlineLayout](/docs/api/checkout-ui-extensions/latest/components/structure/inlinelayout)
        [InlineStack](/docs/api/checkout-ui-extensions/latest/components/structure/inlinestack)
        [Link](/docs/api/checkout-ui-extensions/latest/components/actions/link)
        [Text](/docs/api/checkout-ui-extensions/latest/components/titles-and-text/text)
      </Resources>

    </Substep>

  </Step>

  <Step>

    <CheckoutUiPreview extension="footer " />

  </Step>

  <Deploy />


</StepSection>

<NextSteps>

  ## 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

  <CardGrid>

    <LinkCard href="/docs/apps/checkout/localizing-ui-extensions">

      #### Localize your extension

      Learn how to localize the text and number formats in your extension.

    </LinkCard>

    <LinkCard href="/docs/api/checkout-ui-extensions/latest/components">

      #### Explore the checkout UI extension component reference

      Learn about all the components you can use in your checkout UI extensions.

    </LinkCard>

    <LinkCard href="/docs/apps/checkout/styling">

      #### Explore the checkout branding API

      Learn about other properties that are exposed in the GraphQL Admin API's checkout branding types.

    </LinkCard>

  </CardGrid>

</NextSteps>