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 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.
Follow this guide for an end-to-end example. Then, explore the API documentation to suit your customization needs.
Checkout UI extensions and styling customizations are available only to Shopify Plus merchants.
Anchor to What you'll learnWhat 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
-
You've created a Partner account.
-
You've created a new development store with the following:
- Generated test data
- Checkout and Customer Accounts Extensibility developer preview enabled
You've either installed the GraphiQL app on your store or created an app, with the read_checkout_branding_settings
and write_checkout_branding_settings
access scopes.
Project
Anchor to Retrieve the store's published checkout profile IDRetrieve the store's published checkout profile ID
Checkout styling properties apply to a checkout profile.
In this step, you'll retrieve the ID of the checkout profile to which you'll apply changes to the footer.
-
Query
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. -
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
query checkoutProfiles {checkoutProfiles(first: 1, query: "is_published:true") {edges {node {idname}}}}{"data": {"checkoutProfiles": {"edges": [{"node": {"id": "gid://shopify/CheckoutProfile/1","name": "Default checkout profile"}}]}}}query checkoutProfiles { checkoutProfiles(first: 1, query: "is_published:true") { edges { node { id name } } } }
{ "data": { "checkoutProfiles": { "edges": [ { "node": { "id": "gid://shopify/CheckoutProfile/1", "name": "Default checkout profile" } } ] } } }
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
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
mutation updateCheckoutBranding($checkoutBrandingInput: CheckoutBrandingInput!, $checkoutProfileId:ID!) {
checkoutBrandingUpsert(checkoutBrandingInput:$checkoutBrandingInput, checkoutProfileId:$checkoutProfileId) {
checkoutBranding {
customizations {
footer {
content {
visibility
}
position
}
}
}
}
}
{
"checkoutProfileId": "gid://shopify/CheckoutProfile/YOUR_CHECKOUT_PROFILE_ID_HERE",
"checkoutBrandingInput": {
"customizations": {
"footer": {
"content": {
"visibility": "HIDDEN"
},
"position": "END"
}
}
}
}
{
"data": {
"checkoutBrandingUpsert": {
"checkoutBranding": {
"customizations": {
"footer": {
"content": {
"visibility": "HIDDEN"
},
"position": "END",
}
}
}
}
}
}
Anchor to Create a checkout UI extensionCreate 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.
-
Navigate to your app directory:
Terminal
cd <directory> -
Run the following command to create a new checkout UI extension:
Terminal
shopify app generate extension --template checkout_ui --name my-checkout-ui-extension -
Select a language for your extension. You can choose from TypeScript, JavaScript, TypeScript React, or JavaScript React.
TipTypeScript or JavaScript is suitable for smaller projects that require a more straightforward API. TypeScript React or JavaScript React is suitable when you want an easy model for mapping state updates to UI updates. With JavaScript or TypeScript, you need to map state updates yourself. This process is similar to writing an application targeting the DOM, versus using
react-dom
.You should now have a new extension directory in your app's directory. The extension directory includes the extension script at
src/index.{file-extension}
. The following is an example directory structure:Checkout UI extension file structure
└── 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
-
Start your development server to build and preview your app:
Terminal
shopify app devTo learn about the processes that are executed when you run
dev
, refer to the Shopify CLI command reference. -
Press
p
to open the developer console. In the developer console page, click on the preview link for your extension.
Anchor to Set up multiple targets for your extensionSet up multiple targets for your extension
Targets control where your extension renders in the checkout flow. Extensions can support one or multiple targets.
This example uses purchase.checkout.footer.render-after and 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
, which will be created in a later step.
Anchor to Export the target from your Checkout script fileExport the target from your Checkout script file
In your Checkout.jsx
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.
Anchor to Export the target from your Thank you script fileExport the target from your Thank you script file
Create a new file in your extension's src
directory called ThankYou.jsx
. 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.
Anchor to Reference the extension targets in your configuration fileReference 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. This needs to match the target that you exported from your file/s.
shopify.extension.toml
is the configuration file for your extension. It contains basic information and settings.
Whenever you edit your extension configuration file, you need to restart your server for the changes to take effect.
Terminal
Anchor to Populate the extension with custom contentPopulate 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.
Anchor to Create the ,[object Object],[object Object], fileCreate 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 in Checkout.jsx
and ThankYou.jsx
Anchor to Render links in a two column layoutRender links in a two column layout
Using the 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
hook to retrieve the storefrontUrl
.
Add the two groups of links to an InlineLayout
component, which enables the links to render in two columns.
The StandardApi
object is automatically made available to all targets.
Anchor to Preview the extensionPreview the extension
Preview your extension to make sure that it works as expected.
Anchor to Start your serverStart 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 developer preview for Checkout and Customer Accounts Extensibility.
-
In a terminal, navigate to your app directory.
-
Either start or restart your server to build and preview your app:
Terminal
shopify app dev -
Press
p
to open the developer console. -
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.
Anchor to Property token errorProperty 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 to direct Shopify CLI to open a checkout session for you.
Terminal
Anchor to Missing checkout linkMissing 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
shopify app info
Otherwise, you can manually create a checkout with the following steps:
-
From your development store's storefront, add some products to your cart.
-
From the cart, click Checkout.
-
From directory of the app that contains your extension, run
dev
to preview your app:Terminal
shopify app dev -
On the checkout page for your store, change the URL by appending the
?dev=https://{tunnel_url}/extensions
query string and reload the page. Thetunnel_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. An app version is a snapshot of your app configuration and all extensions.
-
Navigate to your app directory.
-
Run the following command.
Optionally, you can provide a name or message for the version using the
--version
and--message
flags.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.
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
command, or through the Partner Dashboard.
Anchor to Tutorial complete!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.
Anchor to Next stepsNext steps
Learn how to localize the text and number formats in your extension.
Learn about all the components you can use in your checkout UI extensions.
Learn about other properties that are exposed in the GraphQL Admin API's checkout branding types.