--- 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' 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. Toggling the visibility for footer policies affects only the **Checkout** and **Thank you** pages. The **Order Status** and customer account pages aren't affected. Learn from an end-to-end example in this guide, and then explore the API documentation to suit your customization needs. 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 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). ### 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. 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`](/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. ```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", } } } } } } ``` ### Create a checkout UI extension To create a checkout UI extension, use Shopify CLI, which generates starter code for building your extension. ### 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. You'll import and reference `Extension.jsx``Extension.js`, which will be created in a later [step](#create). #### Export the target from your Checkout script file In your `Checkout.jsx``Checkout.js` 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. --- [purchase.checkout.footer.render-after](/docs/api/checkout-ui-extensions/latest/targets/footer/purchase-checkout-footer-render-after) #### Export the target from your Thank you script file Create a new file in your extension's `src` directory called `ThankYou.jsx``ThankYou.js`. 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. --- [purchase.thank-you.footer.render-after](/docs/api/checkout-ui-extensions/latest/targets/footer/purchase-thank-you-footer-render-after) ### 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). #### Create the Extension.jsxExtension.js file Create a new file in your extension's `src` directory named `Extension.jsx``Extension.js`. This will render the footer content for both targets that you [previously set up](#set-up-multiple-targets-for-your-extension) in `Checkout.jsx``Checkout.js` and `ThankYou.jsx``ThankYou.js` #### Render links in a two column layout 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. Create links to your storefront's pages using the [`useShop`](/docs/api/checkout-ui-extensions/latest/apis/shop#useShop) hook to retrieve the `storefrontUrl`. 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`. 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. [useShop](/docs/api/checkout-ui-extensions/latest/apis/shop#useShop) [shop](/docs/api/checkout-ui-extensions/latest/apis/standardapi#standardapi-propertydetail-shop) [StandardApi](/docs/api/checkout-ui-extensions/latest/apis/standardapi) [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) ## 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 #### Localize your extension Learn how to localize the text and number formats in your extension. #### Explore the checkout UI extension component reference Learn about all the components you can use in your checkout UI extensions. #### Explore the checkout branding API Learn about other properties that are exposed in the GraphQL Admin API's checkout branding types.