Extension Point

Checkout UI Extension: Customizing the Checkout Page

Merchants can use the Checkout UI Extension to customize the appearance and behavior of the checkout page. There are three available customization methods:

• Hide specific modules: Use ExtensionTarget to hide predefined elements on the page.
• Add custom content: Insert personalized content at designated ExtensionPoint locations.
• Access and modify order information: Use the CheckoutAPI to retrieve order details and adjust checkout behaviors as needed.

Using Extension Points

Extension points allow you to insert custom content at specified locations on the checkout page.

Example: Adding Content Above the Navigation Bar

import { extend } from 'shoplazza-extension-ui';

extend({
  extensionPoint: 'Checkout::Navigate::RenderBefore',
  component: "<h1>Hello, Shoplazza!</h1>"
});

 

Available extension points include: