--- title: Navigation description: >- Render content before the action button at the end of each checkout section, for consent capture, gift notes, or legal copy. api_version: 2026-07 api_name: checkout-ui-extensions source_url: html: >- https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/navigation md: >- https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/navigation.md --- # Navigation Checkout presents buyers with an action button at the end of each section. Use this target to add UI before those buttons, giving you a place to collect marketing consent, capture gift notes, or show cart-based messages. Shopify's checkout action buttons — such as **Continue to payment** and **Pay now** — can't be modified by any extension. Labels, disabled states, and appearance are controlled by Shopify. This target doesn't render when Shop Pay is the active checkout method. During Apple Pay and Google Pay sessions, the target renders but cart mutation APIs such as `applyNoteChange` and `applyMetafieldChange` return error results. ### Use cases * **Email and SMS marketing opt-in**: Collect buyer consent for email or SMS marketing before checkout completes. * **Gift notes**: Let buyers add a personalized gift message to their order. * **Cart messaging**: Show contextual messages based on cart contents, such as a free shipping threshold or a discount code. * **Reward points**: Fetch the buyer's reward points balance from your backend and display how many points the current order will earn. ![Checkout page showing order total, discount code field, and the purchase.checkout.actions.render-before target slot directly above the Pay now button.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/purchase.checkout.actions.render-before-Cax0Qz3i.png) *** ## Navigation target Use this target to render UI before the action buttons on each checkout section. The examples below demonstrate note and metafield writes, the two most common write operations at this target. ### Render before checkout actions target `purchase.checkout.actions.render-before` Renders before the action button on each checkout step, including information, shipping, payment, and review. Read access to cart contents, buyer identity, delivery details, and cost is available. Write operations are available through the [Note API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/apis/note) and [Metafields API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/apis/metafields). Use [cart instructions](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/apis/cart-instructions) to check which mutations are available before calling them. ### Support Components (55) APIs (24) ### Supported components * [Abbreviation](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/typography-and-content/abbreviation) * [Badge](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/feedback-and-status-indicators/badge) * [Banner](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/feedback-and-status-indicators/banner) * [Box](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/layout-and-structure/box) * [Button](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/actions/button) * [Checkbox](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/forms/checkbox) * [Chip](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/typography-and-content/chip) * [Choice list](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/forms/choice-list) * [Clickable](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/actions/clickable) * [Clickable chip](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/actions/clickable-chip) * [Clipboard item](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/actions/clipboard-item) * [Consent checkbox](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/forms/consent-checkbox) * [Consent phone field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/forms/consent-phone-field) * [Date field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/forms/date-field) * [Date picker](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/forms/date-picker) * [Details](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/typography-and-content/details) * [Divider](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/layout-and-structure/divider) * [Drop zone](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/forms/drop-zone) * [Email field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/forms/email-field) * [Form](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/forms/form) * [Grid](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/layout-and-structure/grid) * [Heading](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/typography-and-content/heading) * [Icon](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/media-and-visuals/icon) * [Image](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/media-and-visuals/image) * [Link](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/actions/link) * [Map](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/media-and-visuals/map) * [Modal](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/overlays/modal) * [Money field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/forms/money-field) * [Number field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/forms/number-field) * [Ordered list](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/typography-and-content/ordered-list) * [Paragraph](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/typography-and-content/paragraph) * [Password field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/forms/password-field) * [Payment icon](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/media-and-visuals/payment-icon) * [Phone field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/forms/phone-field) * [Popover](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/overlays/popover) * [Press button](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/actions/press-button) * [Product thumbnail](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/media-and-visuals/product-thumbnail) * [Progress](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/feedback-and-status-indicators/progress) * [Qr code](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/media-and-visuals/qr-code) * [Query container](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/layout-and-structure/query-container) * [Scroll box](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/layout-and-structure/scroll-box) * [Section](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/layout-and-structure/section) * [Select](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/forms/select) * [Sheet](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/overlays/sheet) * [Skeleton paragraph](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/typography-and-content/skeleton-paragraph) * [Spinner](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/feedback-and-status-indicators/spinner) * [Stack](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/layout-and-structure/stack) * [Switch](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/forms/switch) * [Text](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/typography-and-content/text) * [Text area](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/forms/text-area) * [Text field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/forms/text-field) * [Time](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/typography-and-content/time) * [Tooltip](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/overlays/tooltip) * [Unordered list](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/typography-and-content/unordered-list) * [Url field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/forms/url-field) ### Available APIs * [Addresses API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/checkout-apis/addresses-api) * [Analytics API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/platform-apis/analytics-api) * [Attributes API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/checkout-apis/attributes-api) * [Buyer Identity API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/checkout-apis/buyer-identity-api) * [Buyer Journey API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/checkout-apis/buyer-journey-api) * [Cart Instructions API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/checkout-apis/cart-instructions-api) * [Cart Lines API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/checkout-apis/cart-lines-api) * [Checkout Token API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/checkout-apis/checkout-token-api) * [Cost API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/checkout-apis/cost-api) * [Customer Privacy API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/checkout-apis/customer-privacy-api) * [Delivery API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/checkout-apis/delivery-api) * [Discounts API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/checkout-apis/discounts-api) * [Extension API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/platform-apis/extension-api) * [Gift Cards API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/checkout-apis/gift-cards-api) * [Localization API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/platform-apis/localization-api) * [Localized Fields API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/checkout-apis/localized-fields-api) * [Metafields API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/platform-apis/metafields-api) * [Note API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/checkout-apis/note-api) * [Payments API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/checkout-apis/payments-api) * [Session Token API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/platform-apis/session-token-api) * [Settings API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/platform-apis/settings-api) * [Shop API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/platform-apis/shop-api) * [Storage API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/platform-apis/storage-api) * [Storefront API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/platform-apis/storefront-api) Examples ### Examples * #### ##### Description Let buyers attach a gift message to their order with a checkbox before the action button. This example checks \`canUpdateNote\` through cart instructions, renders a checkbox, and applies a note change when the buyer opts in. ##### jsx ```jsx import '@shopify/ui-extensions/preact'; import {render} from 'preact'; export default function extension() { render(, document.body); } function Extension() { async function onCheckboxChange(event) { const isChecked = event.currentTarget.checked; if (!shopify.instructions.value.notes.canUpdateNote) { return; } const result = await shopify.applyNoteChange( isChecked ? {type: 'updateNote', note: 'This is a gift order'} : {type: 'removeNote'}, ); if (result.type === 'error') { event.currentTarget.checked = !isChecked; } } return ( ); } ``` * #### ##### Description Collect buyer consent for email marketing and store it as a cart metafield. This example checks \`canSetCartMetafields\` and \`canDeleteCartMetafield\` through cart instructions and uses \`MetafieldUpdateCartChange\` to write the opt-in status. ##### jsx ```jsx import '@shopify/ui-extensions/preact'; import {render} from 'preact'; export default function extension() { render(, document.body); } function Extension() { async function onCheckboxChange(event) { const isChecked = event.currentTarget.checked; const {metafields} = shopify.instructions.value; if (isChecked && !metafields.canSetCartMetafields) return; if (!isChecked && !metafields.canDeleteCartMetafield) return; const result = isChecked ? await shopify.applyMetafieldChange({ type: 'updateCartMetafield', metafield: { namespace: '$app:marketing', key: 'email_opt_in', value: 'true', type: 'single_line_text_field', }, }) : await shopify.applyMetafieldChange({ type: 'removeCartMetafield', namespace: '$app:marketing', key: 'email_opt_in', }); if (result.type === 'error') { event.currentTarget.checked = !isChecked; } } return ( ); } ``` *** ## Best practices * **Check note permissions before writing**: Use `shopify.instructions.value.notes.canUpdateNote` before calling [`applyNoteChange`](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/apis/note). When the instruction is `false`, the method returns an error result instead of applying the change. * **Check metafield write permissions**: Use `shopify.instructions.value.metafields.canSetCartMetafields` before calling [`applyMetafieldChange`](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/apis/metafields). When the instruction is `false`, the method returns an error result instead of applying the change. * **Revert UI state on failure**: Check the mutation's return value for `{type: 'error'}` and revert the UI element to its previous state. Leaving a checkbox checked after a failed mutation misleads buyers into thinking their input was saved. * **Keep extensions concise**: Multiple extensions at this target stack vertically before the action button. Keep each extension's output brief to avoid pushing the button below the visible area. * **Render conditionally to target a specific section**: This target renders before the action button on every checkout section. Use conditional logic based on checkout state to limit your content to a specific section. * **Use `buyerJourney.intercept()` to block navigation**: Rendering at this target doesn't intercept or block the buyer from advancing. To prevent navigation until a condition is met, use [`buyerJourney.intercept()`](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/checkout-apis/buyer-journey-api), which is available from any checkout extension target. ***