--- title: Page layouts description: >- How checkout steps are organized and presented to buyers across one-page and three-page checkout layouts. api_version: 2026-07-rc source_url: html: >- https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/page-layouts md: >- https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/page-layouts.md api_name: checkout-ui-extensions --- # Page layouts Page layouts determine how checkout steps are organized and presented to buyers. Each layout affects how and when extensions render, and how the [Buyer Journey API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/checkout-apis/buyer-journey-api) reports the current step. Shopify checkout supports two merchant-configurable layouts: [three-page](#three-page-checkout) and [one-page](#one-page-checkout). Accelerated checkout flows, such as Shop Pay, use the one-page layout. When buyer data is pre-filled, sections collapse into [rollups](#rollups). See [Shop Pay](#shop-pay) for the merchant opt-in control that's unique to that flow. ![Two checkout layouts shown side by side, with a multi-step checkout on the left showing shipping method selection and an accelerated Shop checkout on the right.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/page.layouts.overview-d-48Zinv.png) *** ## Where targets render across layouts Header, footer, order summary, and navigation targets always render regardless of layout. Section-specific targets, such as contact information or shipping, render one step at a time in three-page checkout and all at once in one-page checkout. When buyer data is pre-filled, sections may collapse into rollups. See [Rollups](#rollups) for how this affects extensions. The following table shows where each target category renders and how it behaves in each layout: | Target category | Three-page behavior | One-page behavior | | - | - | - | | [Header](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/header) and [footer](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/footer) | Every page | Single page | | [Order summary](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary) | Every page | Single page | | [Block](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/block) | Page containing the merchant-configured placement | All placements visible at once | | [Information](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/information) | Information page only | Single page | | [Shipping](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping) | Shipping page only | Single page | | [Payment](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/payment) | Payment page only | Single page | | [Navigation](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/navigation) | Every page, before the step's action buttons | Single page, before the action buttons | | [Local pickup](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/local-pickup) | Shipping page, when applicable | Single page, when applicable | | [Pickup points](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/pickup-points) | Shipping page, when applicable | Single page, when applicable | *** ## Three-page checkout Three-page checkout separates checkout into distinct pages for information, shipping, and payment. Buyers progress through each page sequentially. Extensions that target a specific section, such as contact information or shipping, render only on the page that contains that section. Block targets render wherever the merchant places them using the [checkout and accounts editor](https://shopify.dev/docs/apps/build/checkout/test-checkout-ui-extensions#test-the-extension-in-the-checkout-editor). The [Buyer Journey API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/checkout-apis/buyer-journey-api) returns `information`, `shipping`, or `payment` as the handle value depending on which page the buyer is on. *** ## One-page checkout One-page checkout displays all checkout steps (information, shipping, and payment) on a single scrollable page alongside the order summary. Merchants can enable this layout in the [Shopify admin](https://help.shopify.com/en/manual/checkout-settings/customize-checkout-configurations/one-page-checkout). Because all sections are visible at the same time, all section-specific extensions mount simultaneously. Block targets at every placement location are visible from page load. The [Buyer Journey API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/checkout-apis/buyer-journey-api) returns a single `checkout` handle for the entire page. *** ## Rollups When buyer data is pre-filled, checkout collapses sections into rollups. This applies to one-page checkout and accelerated flows (such as Shop Pay), but not to three-page checkout. Any authenticated or pre-filled identity can trigger rollups, including Shop Pay, customer accounts, Apple Pay, Google Pay, and others. When a section collapses into a rollup, its native UI (for example, the contact form or shipping address form) is replaced by a collapsed summary. [Static](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets#static-extension-targets) extensions targeting that section still mount, but render inside the rollup rather than in their usual position. [Block](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets#block-extension-targets) extensions from collapsed sections are relocated toward the bottom of the page, after the rollup summaries. Merchants can set an extension to automatically expand its rollup by enabling **Automatically expand sections to show app** in the [checkout and accounts editor](https://shopify.dev/docs/apps/build/checkout/test-checkout-ui-extensions#test-the-extension-in-the-checkout-editor). Rollups also expand automatically when an extension inside them is actively [blocking checkout progress](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/configuration#block-progress). *** ## Shop Pay Shop Pay is the only accelerated checkout flow where merchants control which extensions render. Merchants enable each extension individually through **Include app in Shop Pay** in the [checkout and accounts editor](https://shopify.dev/docs/apps/build/checkout/test-checkout-ui-extensions#shop-pay). Extensions that aren't enabled don't render during Shop Pay checkout. Shop Pay uses the one-page layout with its own authentication flow and shell UI. The buyer's Shop Pay identity provides the pre-filled data that triggers section [rollups](#rollups). The [Buyer Journey API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/target-apis/checkout-apis/buyer-journey-api) returns a `checkout` handle, which is the same value used for one-page checkout. *** ## Agentic storefront checkouts Agentic storefront checkouts display through Checkout Kit, which controls whether certain UI elements and extensions render. Not all checkout blocks are supported in agentic storefront checkouts. For a full list of limitations, refer to [agentic storefront requirements](https://help.shopify.com/en/manual/online-sales-channels/agentic-storefronts/requirements#checkout-blocks-in-agentic-storefront-checkouts). *** ## Testing extensions across layouts For instructions on testing your extension in each layout, refer to the [testing checkout UI extensions](https://shopify.dev/docs/apps/build/checkout/test-checkout-ui-extensions) guide. That page covers setup for three-page checkout, one-page checkout, and Shop Pay. ***