Skip to main content
A slot is a named position in the checkout where a custom component can be placed. This catalog lists the 89 slots of the default template, grouped by the page or step they belong to. The grocery and sales templates share most of them. How to read the table:
  • Default content is what the template renders there when no component is assigned. Your component receives it as children: render {children} to keep it and add around it, or leave it out to replace it (see Children component).
  • When it renders: always means on every load of that page; otherwise the condition or device that makes it appear.
  • Props are passed to your component on top of children. “children only” means the slot passes nothing else; read the checkout state with the SDK hooks instead.
One component per slot: a store’s components are matched by slot id, so two components cannot share a slot. Use Highlight all slots or Inspect slots in Studio to see these ids on the live preview.

​
Dynamic slots

Some ids are patterns. The checkout emits one slot per value, so new payment methods or custom steps get a slot without a catalog update.

​
Global

Rendered on every page: header, footer, the two-column layout and the summaries.
  • header: Same slot ID renders in two different locations simultaneously. A custom component registered here appears in BOTH the cart page and all checkout detail pages.
  • checkout_header_full_page: Void slot. Not rendered in full-page display mode.
  • checkout_summaries: The slot always renders. Its default content only appears once a step is complete, but a custom component injected here is always mounted.
  • checkout_sidebar_totalizer: Desktop-only. A component placed here does not render below lg. The default content is the store’s full price table, so render {children} unless you intend to replace the totals. Device constraint is inherited from the parent container, which is hidden below lg.
  • checkout_sidebar_checkout_button: Void slot. No default content.
  • step_navigation: Slot itself has no conditional, the parent nav element carries the a mobile-only class when showNavigation is false.
  • step_navigation_total_label: Default child has ‘sm:hidden’, only visible below sm breakpoint. The slot itself always renders.
  • contact_summary: Only rendered when the step has a summary.
  • contact_summary_modal: Wraps the contact-details edit form as children, inject a custom component to render content around the form (legal/compliance notice, an extra field, a banner) without replacing it. No context props: reach customer/locale/session via useCheckoutSession(), the same hook the form uses. Only the contact-details form is wrapped; the email-only and user-identified modal states are not.
  • shipping_summary: Only rendered when the step has a summary, like contact_summary.
  • footer: Void slot, default child of footer_sidebar.
  • footer_sidebar: Inner default div conditionally uses a below-desktop-only class based on hasSidebarFooter and hasFullWidth. Slot itself always renders.

​
Cart page

The cart page: items, totals, coupon, delivery method and the proceed-to-checkout actions.
  • cart_empty: Early return, when this slot renders, the rest of the cart page does not.
  • cart_header_full_page: Void slot.
  • cart_delivery_method_selector: Drawing delivery / pickup on the cart as a two-option selector, or restyling the link, without reimplementing the switch. Same contract as shipping_delivery_method_selector. deliveryMethodOptions holds the methods the store has on among delivery and pick_up (never custom), each { value, label, icon, disabled, loading }: disabled while a switch runs or the method cannot take the cart (no store quoted for pickup; delivery still being checked at the shopper’s address, which also sets loading). defaultValue is the method the cart is on. onChange(value) runs the native switch for the whole cart, the one the step’s selector runs; with autoSelectNearestPickupPoint off, choosing pick_up opens the store selector instead. isPending is true while the switch runs. A failed switch puts defaultValue back and the host shows the error message. The slot stays mounted when the native link is hidden (children is then empty), so a component can show the held-back option. It is a flex item of the title row, after the title: next to it from 1024px, wrapping below it under that.
  • cart_item: Rendered once per item in the cart items via renderItem callback.
  • cart_item_addons: Rendered inside cart_item default content, once per item. Context props arrive at the TOP LEVEL of the component signature, not inside props. Availability signal is item.available === false, not isUnavailable. Prices are in cents, divide by 100 for display.
  • cart_item_details: Rendered inside cart_item default content, once per item, BETWEEN the product title and the unit-price block. Empty by default, good place for per-item badges/tags. Context props arrive at the TOP LEVEL of the component signature, not inside props. Prices are in cents, divide by 100 for display.
  • cart_coupon_form: Shared slot ID, same component renders in three locations simultaneously: mobile area, desktop sidebar, and cart modal.
  • cart_totalizer: Slot always renders. Default child has a below-desktop-only class, hides on large screens. A custom override does NOT inherit this CSS.
  • cart_mobile_summary: Override or wrap the whole mobile cart footer (coupon + totalizer) as a single region. Slot itself always renders, the child slots keep their own responsive gating (cart_coupon_form a mobile-only class, cart_totalizer child a below-desktop-only class). A custom override replaces the whole region and does NOT inherit those CSS classes.
  • cart_sidebar_totalizer: Reachable on mobile through the summary modal, so it is a valid choice for a component that must appear on phones. On desktop both contexts are live at once, so one record produces two instances, design for that or pick a single-context slot. The default content is the store’s price table, so render {children} unless you intend to replace the totals. Shared slot ID. Not desktop-only: the modal context carries it below lg. The desktop duplication is the sidebar instance plus the modal instance rendering together.
  • cart_sidebar_checkout_button: Receives the paymentsExpressComponent prop, a ready-made express checkout element.
  • cart_express_wrapper: Shared slot ID. On the cart page it sits in the below-desktop navigation. Renders only when express checkout is configured.
  • cart_address_card_wrapper: Rendered inside the cart list.
  • cart_digital_banner: The default content styles with the theme’s secondary palette and can be restyled via the —digital-banner-bg and —digital-banner-text-color tokens.
  • cart_items_package_list_item: Replace or restyle an entire package card, or hide selected packages by returning nothing for them. Wraps the package card, so a custom component that renders nothing removes that package from the list. Mounts once per package.
  • cart_items_package_list_item_header: Rendered inside the cart list.
  • items_gallery_modal_content: Rendered inside the cart list.
  • items_gallery_item_content: Same three-file shared context as items_gallery_modal_content.

​
Shipping step

Choosing delivery or pickup, the quotes, packages and pickup points.
  • contact_email_form: Replacing the email form of the identification step with a custom one, e.g. a different layout, extra copy or a consent checkbox, or a different validation rule, while keeping the host identification flow. onSubmit(email) runs the same identification as the native Apply button (auto-pickup, identified-user modal, redirect to the shipping step when the session needs it) without validating the format: validate in the component first, with isValidEmail(email) to reuse the native rule. It trims the value and does nothing for an empty email or the one already on the session. isSubmitting is true while the request runs; server errors are shown by the host as messages. getEmailSuggestions(email) returns { hasSuggestions, suggestion } for common domain typos, as the native form uses. email is the email already on the session (empty here, since the slot only mounts before identification). The heading stays outside the slot. The email form inside the email edit modal is not wrapped.
  • shipping_address_autocomplete: Replacing or decorating the first address input of the shipping step, including a fully custom autocomplete that keeps the native request, loading, error and postal-code behavior in its own layout. onSubmit(address) runs the same request as the native UI: the auto-pickup action when the store has autoSelectPickup, UPDATE_SHIPPING_ADDRESSES otherwise, with country and address type filled in. It does not resolve a Places id: search with useAddress().searchPredictions / predictions and call useAddress().selectPrediction(id) before submitting. An address without postalCode, in a country that requires one, is not sent; isAskingPostalCode turns true and pendingAddress holds that address (also when the platform rejects it for a missing postal code). The default children switch to the postal-code field by themselves; a component that replaces them renders its own field while isAskingPostalCode is true, submits onSubmit({ …pendingAddress, postalCode }), and calls onEditAddress() to go back to the search. useAddress().lookupByPostalCode(postalCode, country) fills in city and state like the native field does. isLoading covers both the prediction search and the submit. Failed submits are reported as messages by the host. On stores without autoSelectPickup an address submitted with a postal code unmounts the slot while the request runs and the page shows the shipping skeleton; a failure mounts it again with fresh local state.
  • shipping_title: Appears in two files with different conditions. Both must be true for the slot to render in its respective context.
  • shipping_list_packages: Rendered up to three times, once for each package type (delivery, pick_up and digital) the cart has. Digital packages are never produced by platform parsing; they only exist when a custom function sets package type ‘digital’, and the default content is an info banner (immediate delivery by email) plus an items gallery (no address, no shipping options).
  • shipping_package_shipping_options_item: Changing how one option looks or behaves without reimplementing the whole list. The same custom component renders for every option, so branch on option and return children for the ones you leave alone. onSelect() is the native selection (which opens the time-slot modal when the quote has timeSlots); to commit a slot yourself, dispatch UPDATE_SHIPPING_PACKAGES with { id: option.id, items: selectedPackage.items, addressId: selectedPackage.addressId, selectedTimeSlotId }.
  • shipping_package_unavailable_item: Shared, same ID appears in shipping unavailable list and cart page unavailable list.
  • shipping_package_items_gallery: Customizing how a package’s items are previewed, per package (e.g. different treatment for pickup vs delivery, or for a given package number). One instance per package. shipping is the ShippingPackage the row stands for (type tells pickup from delivery). onDetailsClick() opens the package details modal. children is the native row, so returning it keeps the default.
  • shipping_pickup_receiver_form: Changing the fields asked of whoever collects the order (extra fields, masks, copy) without touching the rest of the pickup card. One instance per pickup package. receiver is { firstName, lastName } as saved; onSaveReceiver({ firstName, lastName }) writes it as the pickup address’s receiverName (UPDATE_SHIPPING_ADDRESSES). inputs are the native fields’ props (their onBlur saves), for augmenting rather than replacing. The checkbox above stays native: unchecking it resets the receiver to the shopper.
  • shipping_address_card: Rendered in both the pickup and the delivery sections.

​
Address step

The address form shown when the shopper’s address is missing or incomplete.
  • address_page: stepNavigation prop is an object with { props: StepNavigationProps, Component: (navigationProps) => JSX.Element }, allows custom component to render navigation primitives.
  • shipping_address_details_form: Always renders when address_page renders. Nested inside address_page slot default content.

​
Payment step

Payment options, their contents, installments and the place-order button.
  • payment_method_options: Slot is unconditional. The options are dimmed when gift cards pay the whole order, but the slot itself always renders.
  • payment_option_gift_card: Always rendered, outside the payment method tabs.
  • checkout_totalizer: Slot always renders in payment step. Default child has a mobile-only class. A custom override does NOT inherit this CSS class.
  • checkout_mobile_summary: Override or wrap the whole mobile payment-step summary footer as a single region. Checkout analog of cart_mobile_summary. Slot itself always renders; the default child div is a mobile-only class so the totalizer only shows below md. A custom override replaces the whole region and does NOT inherit that CSS class.
  • payment_option_credit_card: NEVER place a CTA or confirm button here, component does not exist in DOM until user clicks the credit card tab.
  • payment_option_paypal: Both PayPal payment methods render this slot.
  • payment_option_apple_pay: Self-closing slot. The Apple Pay button itself is rendered separately when Apple Pay is selected.
  • payment_option_google_pay: Self-closing slot.
  • payment_option_click_to_pay: Self-closing slot.
  • payment_option_boleto_parcelado_koin: Authorization is off-site: the order finishes with a redirect to Koin’s hosted checkout, so anything rendered here is pre-redirect content only.

​
Order confirmation

The page shown after the order is placed.
  • order_details: order_totalizer is nested inside this slot’s default content.
  • order_totalizer: Nested inside order_details default content.

​
Modals and on-action

Mounted when the shopper opens a modal or triggers an action, not on page load.
  • modal_user_identified: The slot has no condition of its own; it shows whenever the modal is open.
  • modal_new_address_form: Replacing the new address form of the delivery address modal with a custom one, e.g. to add a field, while keeping the host save, loading and error handling. Same props as modal_edit_address_form, with mode new and address as the optional prefill. On success the host runs its onSuccess or closes the modal. See modal_edit_address_form for the onSubmit contract.
  • modal_edit_address_form: Replacing the change address form of the delivery address modal with a custom one, e.g. to add a field, while keeping the host save, loading and error handling. mode is ‘new’ or ‘edit’; address is the address being edited, or the prefill for a new one. onSubmit(address) runs the host’s save (UPDATE_SHIPPING_ADDRESSES) without validating: validate in the component first, or use addressForm (the host’s useAddressForm return, with validate() and getValues()) to reuse the native rules. In edit mode the values are written over the address being edited, so its id is kept. isSubmitting is true while the save runs; on success the host closes the modal (or, in new mode, runs its onSuccess), on failure it shows an error message. onBack returns to the address list, onClose closes the modal. The save only persists address fields and drops unknown keys, so an extra field has to be stored by the component itself before calling onSubmit.
  • modal_complete_address_form: Replacing the complete the address form with a custom one, e.g. to ask for an extra field or change the no number rule, while keeping the host save, loading and error handling. onSubmit(values) writes the values over the address being completed, so its id and the fields the modal doesn’t show are kept, and runs the host’s save (UPDATE_SHIPPING_ADDRESSES) without validating: validate in the component first. withoutNumberValue is the value the host persists for an address with no number (‘S/N’); send it as number to reproduce the native checkbox. isSubmitting is true while the save runs; on success the host closes the modal, on failure it shows an error message. onChange closes this modal and opens the delivery address selection modal, onClose closes it. The save only persists address fields and drops unknown keys, so an extra field has to be stored by the component itself before calling onSubmit.
  • modal_shipping_address: Replacing the address capture step of the shipping simulation modal. Call onSubmit(address) with a resolved address containing postalCode to advance to modal_shipping_options. Second step of a two-step modal, paired with modal_shipping_options. onSubmit runs the address update action; the host switches to the options step on success and feeds error back on failure.
  • modal_shipping_options: Replacing the quote selection step of the shipping simulation modal. Call onBackToAddress() to send the user back to the address form (modal_shipping_address). First step of a two-step modal, paired with modal_shipping_address. Only modal-local state is passed as props, the quotes (session.shipping.availableQuotes), the address (session.shipping.addresses) and the locale for price formatting come from useCheckoutSession(); the saving state comes from usePendingActions() as pendingActions.includes(‘UPDATE_SHIPPING_PACKAGES’). onBackToAddress clears the selected quote and flips the host state to the address step; onSave persists the selected quote and closes the modal.
  • modal_shipping_unavailable_summary: Replacing the one-line summary of the items that cannot be shipped, e.g. to add a remove or pickup action inline. items are the unavailable cart items. onClick opens their detail view. expanded is undefined when the row leads to another view and a boolean when it is a disclosure; the default row picks its chevron from it.