Dynamic Slots

Overview

Dynamic slots are placeholders within the checkout HTML that allow you to inject custom content at specific points in the checkout process. They enable you to extend or modify the checkout UI without altering the core template, making it easy to introduce additional functionality or design elements.

For more details and visual examples, see the Checkout Guide on HTML slots.

You can use dynamic slots to:

• Add custom components, messages, or banners (e.g., loyalty program notices, custom fields).
• Integrate third-party tools or scripts in designated areas.
• Tailor the checkout experience to your specific business needs.

This approach ensures that customizations are modular, maintainable, and compatible with future updates to the checkout.

Usage in Storefront Application

To customize the checkout using dynamic slots, you can target the slot by its name and inject your own component. A key advantage of this approach is that reactivity is still maintained. This means any data changes within your injected component will automatically update the corresponding parts of the checkout interface, ensuring a seamless and dynamic user experience.

For example, here’s how to create a custom component that displays all available delivery options:

html

Copy

You can now place this component into the desired slot area by referencing the slot name. All available slot names can be found in the Checkout Documentation.

In this example, we place the component directly below the shipping address using the slot_dynamic_area_shipping_address slot.

html

Copy

The component will appear directly under the shipping details as shown in the image below.