Customizing your checkout and customer accounts with apps
You can customize your checkout and customer accounts pages with app blocks, including the checkout configuration, the thank you and order status pages, and the customer order and profile pages. App developers and Shopify Partners build apps, and then publish them on the Shopify App Store. You can install publicly available apps that work with checkout or customer accounts, create a custom app with your developer, or hire a Shopify Partner.
After you install an app to your Shopify admin, you can add it to supported pages using the checkout and accounts editor. Some app blocks can be added only to specific areas of your pages.
On this page
- App availability
- Install an app
- Using the Apps sidebar in the checkout and accounts editor
- Add app blocks from installed apps
- Move and place an app
- Add a a page to customer accounts using app blocks
- Configure an app
- Managing app's behavior controls
- Add features to the post-purchase page at checkout
- Remove an app
App availability
Some apps that customize checkout and customer accounts, including the thank you and order status pages, are available to businesses that are on the Basic Shopify plan or higher. Apps that customize the information, shipping, and payment pages of the checkout, including checkouts from draft orders, are available only to Shopify Plus.
App type | Basic Shopify plan or higher | Shopify Plus |
---|---|---|
Apps built with web pixel app extensions | ✔ | ✔ |
Apps built with post-purchase app extensions | ✔ | ✔ |
Public apps built with Shopify Functions | ✔ | ✔ |
Custom apps built with Shopify Functions | ✘ | ✔ |
Apps built with UI extensions for the thank you and order status pages | ✔ | ✔ |
Apps built with UI extensions for all customer accounts pages | ✔ | ✔ |
Apps built with UI extensions for the information, shipping, and payment pages | ✘ | ✔ |
Checkout Blocks, a free app for customizing your checkout with UI extensions and Shopify Functions | ✔ (With some feature restrictions) | ✔ |
Install an app
If there are additional features that you want to add to your checkout, customer accounts, thank you, and order status pages, then explore apps that can provide these features for you. App developers and Shopify Partners can build custom apps for you, or you can install third-party apps for checkout or customer accounts customization from the Shopify App Store.
Steps:
- Go to the Shopify App Store, and search for a checkout app that suits your business.
- Click Add app.
- Click Install app.
After you install your app, you need to add it to your pages using the checkout and accounts editor.
Using the Apps sidebar in the checkout and accounts editor
The Apps sidebar in the checkout and accounts editor is where you can access an overview of your available and installed app blocks. The sidebar is divided into the All and Added tabs. The All tab lists the available app blocks that can be added to your checkout and accounts pages, and the Added tab lists the app blocks that you've already added to your checkout and accounts pages.
Use the Search app blocks search bar to search among all of your available app blocks and app block collections across all pages.
All tab
The All tab contains a list of all available app blocks from your installed apps. You can add app blocks to the relevant checkout and accounts pages directly from the All tab.
All available app blocks display beneath the names of the apps that the app blocks are from. If a single app offers multiple types of app blocks, then the app blocks can display in collections that group related app blocks together, such as "Loyalty points" or "Wishlist management". Grouped app blocks from a single app are often intended to work together, so consider adding all the app blocks within an app block collection to provide a complete experience to your customers. You must add each app block from a collection individually so you can configure each app block as needed.
When an app block is added to a page, a ✓ displays next to the app block name. If the app block is added multiple times to your checkout configuration, then a number displays representing the number of times the app block is included in your checkout configuration. If the app block can be added only one time, then the option to add the app block deactivates after it's been placed.
Added tab
The Added tab contains a list of all installed app blocks that exist in at least 1 place in your checkout and accounts configuration. All added app blocks display beneath the names of the apps that the app blocks are from. The listed app blocks also display any pages that the app block is added to.
Click the app block to access the app block settings.
Add app blocks from installed apps
After you install your app, you can add it to your pages using the checkout and accounts editor as an app block. Some apps can be added only to specific areas of your configuration. There is a maximum limit of 3 apps per highlighted area.
You can add existing app blocks directly to sections on pages using the Sections sidebar or the Apps sidebar.
Add app blocks using the Sections sidebar
You can add app blocks from apps that you've installed to the page you're currently viewing using the Sections sidebar. Only app blocks that are available to be installed on a page or section display as selectable options.
Steps:
Desktop
From your Shopify admin, go to Settings > Checkout.
In the Configurations section, click Customize next to the checkout configuration that you want to customize.
In the checkout and accounts editor, select the page that you want to add an app to, and then click the sections icon to access the Sections sidebar.
Click ⊕ Add app block in the section you want to add an app to.
Click the app block that you want to add.
-
Customize the app block as necessary:
- To re-arrange the location of the app block, drag and drop the app block up or down in the Sections list, or use the move buttons in the preview window.
- Click the app block to configure any app block settings.
Click Save.
iPhone
- From the Shopify app, tap the … button, and then tap Settings.
- In the Store settings section, tap Checkout.
- In the Configurations section, tap Customize on the checkout configuration that you want to customize.
- In the checkout and accounts editor, select the page that you want to add an app to, and then tap Sections.
- Tap ⊕ Add app block in the section you want to add an app to.
- Tap the app block that you want to add.
- Customize the app block as necessary:
- To re-arrange the location of the app block, drag and drop the app block up or down in the Sections list, or use the move buttons in the preview window.
- Tap the app block to configure any app block settings.
- Tap Save.
Android
- From the Shopify app, tap the ☰ button, and then tap Settings.
- In the Store settings section, tap Checkout.
- In the Configurations section, tap Customize on the checkout configuration that you want to customize.
- In the checkout and accounts editor, select the page that you want to add an app to, and then tap Sections.
- Tap ⊕ Add app block in the section you want to add an app to.
- Tap the app block that you want to add.
- Customize the app block as necessary:
- To re-arrange the location of the app block, drag and drop the app block up or down in the Sections list, or use the move buttons in the preview window.
- Tap the app block to configure any app block settings.
- Tap Save.
Add app blocks using the Apps sidebar
You can add app blocks from apps you've installed to the page you're currently viewing using the Apps sidebar. Only pages that are available to have specific app blocks installed on them display as options when adding an app block.
Learn more about using the Apps sidebar in the checkout and accounts editor.
Steps:
Desktop
From your Shopify admin, go to Settings > Checkout.
In the Configurations section, click Customize next to the checkout configuration that you want to customize.
In the checkout and accounts editor, click the app blocks icon to access the Apps sidebar.
Next to the app block that you want to add, click ⊕.
In the Add to pop-out, click the page that you want to add the app block to.
-
Customize the app block as necessary:
- To re-arrange the location of the app block, use the move buttons in the preview window.
- Configure any app block settings.
Click Save.
iPhone
- From the Shopify app, tap the … button, and then tap Settings.
- In the Store settings section, tap Checkout.
- In the Configurations section, tap Customize on the checkout configuration that you want to customize.
- In the checkout and accounts editor, tap Apps.
- Next to the app block that you want to add, tap ⊕.
- In the Add to pop-out, tap the page that you want to add the app block to.
- Customize the app block as necessary:
- To re-arrange the location of the app block, use the move buttons in the preview window.
- Configure any app block settings.
- Tap Save.
Android
- From the Shopify app, tap the ☰ button, and then tap Settings.
- In the Store settings section, tap Checkout.
- In the Configurations section, tap Customize on the checkout configuration that you want to customize.
- In the checkout and accounts editor, tap Apps.
- Next to the app block that you want to add, tap ⊕.
- In the Add to pop-out, tap the page that you want to add the app block to.
- Customize the app block as necessary:
- To re-arrange the location of the app block, use the move buttons in the preview window.
- Configure any app block settings.
- Tap Save.
Move and place an app
You can move and place an app within the blocks of a given page. Some apps can be placed only to certain areas of a page. The unavailable areas are grayed out when you try to drag and drop the app.
Steps:
From your Shopify admin, go to Settings > Checkout.
In the Configurations section, click Customize next to the checkout configuration that you want to customize.
Find the app that you want to move.
Click and drag the ⠿ icon next to an app and move the app to another area.
Click Save.
Add a a page to customer accounts using app blocks
Some apps offer app blocks that let you add a new page to your customer accounts header. For example, a wishlist app might offer an app block that lets you add a new wishlist page to customer accounts.
You can create app pages from the Apps sidebar in the checkout and accounts editor. Some app pages support direct linking, which lets you link the page to your customer accounts menu from the checkout and accounts editor, or from the Menus page in your Shopify admin.
After you add a new page, you can access it from the Added tab of the Apps sidebar, or from the page selector menu in the checkout and accounts editor.
Steps:
From your Shopify admin, go to Settings > Checkout.
In the Configurations section, click Customize next to the checkout configuration that you want to customize.
In the Apps section, find the app that you want to create a page for.
Click the + icon, and in the Add page to section, click Accounts.
In the App block settings, configure the settings for your app.
Click Save.
-
Optional: To display the app page to your customers in your customer accounts menu, click Add to menu. In the Customer account menu menu dialog, do the following:
- Review the Label and Link that automatically populate from the checkout and account editor. If you want to rename the link, then update the Label field**.
- Optional: Add any other menu items that you want to add to the Customer account main menu.
- Click Save.
Configure an app
You can customize an app's settings. Each app has unique settings that you can customize. The app settings are defined by the developer or Partner who creates the app. If you have your own development team, then you can specify what settings you want to be able to customize yourself.
For example, if you use an app that lets you create a custom banner, then you can customize the banner title, description, and status.
Steps:
From your Shopify admin, go to Settings > Checkout.
In the Configurations section, click Customize next to the checkout configuration that you want to customize.
Click the app that you want to configure.
Customize your app's settings.
Click Save.
Managing app's behavior controls
When you configure your app, you can also manage your app's behavior controls. These controls let you manage the following behaviors:
- allow the app to block the checkout
- include the app in accelerated checkouts
- automatically expand sections to display the app
Depending on the app that you're configuring, some controls might not be available.
Allow an app to block your checkout
You can select whether to have an app block your checkout and reject an order if the customer provides incomplete or invalid information within the app.
For example, you have an app which adds a checkbox in your checkout that a customer needs to select. If you allow this app to block your checkout and your customer doesn't select this checkbox, then their order is automatically rejected.
Steps:
From your Shopify admin, go to Settings > Checkout.
In the Configurations section, click Customize next to the checkout configuration that you want to customize.
Click the app that you want to configure.
In the Checkout behavior section at the right sidebar, select Allow app to block checkout.
Click Allow app to block checkout.
Click Save.
Include an app in accelerated checkout
You can select whether you want to include an app in your accelerated checkouts, such as Shop Pay. You can also allow the app to force collapsed sections to expand automatically in accelerated checkouts.
Steps:
From your Shopify admin, go to Settings > Checkout.
In the Configurations section, click Customize next to the checkout configuration that you want to customize.
Click the app that you want to configure.
In the Checkout behavior section, select Include app in express checkouts.
Optional: Select Automatically expand sections to show app to expand closed sections.
Click Save.
Optional: To preview how an accelerated checkout is displayed in your store, click the checkout icon at the top right corner of the checkout editor.
Add features to the post-purchase page at checkout
You can add features such as customer surveys or upsell offers to your customer checkout experience using post-purchase apps. These apps add content after your customer completes their payment, but before they're presented with their order confirmation page.
To add features to your post-purchase page, you need to install and configure a checkout app, and then select that app to use on the post-purchase page in your checkout settings.
You can use only one checkout app to add post-purchase features at a time. If you have more than one app with post-purchase functionality installed, then you can select the app that you want to use in your checkout settings.
Install a checkout app to add post-purchase features
To add features to your post-purchase page, you need to use a third-party app that supports post-purchase features at checkout.
If you need help with a third-party app, then you need to contact the app developer.
Steps:
- Go to the Shopify App Store, and search for the post-purchase app that's right for your business.
- Click Add app. If you aren't logged in to your Shopify account, then you're prompted to log in.
- Click Install app.
- Go to the Apps section of your Shopify admin, and then tap the name of your checkout app.
- Enter any configuration settings required.
Select an app to use on your post-purchase page
After you install and configure a checkout app, you need to select that app to use on the post-purchase page in your checkout settings.
You can also change the app that you want to use in your checkout settings.
Steps:
From your Shopify admin, go to Settings > Checkout.
In the Post-purchase page section, select the checkout app that you want to use.
Remove an app
You can remove an app from your checkout. If you want to remove an app completely from your Shopify admin, then you need to uninstall the app.
Steps:
From your Shopify admin, go to Settings > Checkout.
In the Configurations section, click Customize next to the checkout configuration that you want to customize.
Click the app that you want to remove from your checkout.
Click Remove app from checkout.
Click Save.