Extension points
An extension point is a fixed slot on the checkout page or the thank-you page. Pass its name in the extensionPoint field of extend() and your HTML is rendered at that slot:
import { extend } from 'shoplazza-extension-ui';
extend({
extensionPoint: 'Checkout::StepSubmit::RenderBefore',
component: '<p>Free returns within 30 days.</p>',
});
The same extension point can be extended more than once; content is appended in call order rather than replaced. For the full extend signature and the HTML template mechanism, see the extend function. Each area below also lists the native modules you can hide there with deleteTarget, so that your own content replaces the built-in one instead of sitting next to it.
Checkout page
These extension points render on the checkout page itself. Which of them exist on screen depends on the store: the pickup slots need in-store pickup turned on, and the step-specific slots only appear in the two-step and three-step layouts.
Page frame
| Extension point | Description |
|---|---|
Checkout::RenderBefore | Before the page |
Checkout::RenderAfter | After the page |
Checkout::Head::RenderAfter | After the store logo in the header |
Checkout::Advertise::RenderBefore | Before the advertisement slot |
Checkout::MainHeader::RenderAfter | After the header of the main column |
Checkout::Main::RenderBefore | Before the address column |
Checkout::Main::RenderAfter | After the address column |
Checkout::FooterTop::RenderAfter | After the top of the footer |
Checkout::CheckoutFooter::RenderBefore | Before the footer |
Checkout::CheckoutFooter::RenderAfter | After the footer |
Native modules you can hide here: header, loginOrLogout.
Step breadcrumb
| Extension point | Description |
|---|---|
Checkout::Navigate::RenderBefore | Before the step breadcrumb |
Checkout::Navigate::RenderAfter | After the step breadcrumb |
Native modules you can hide here: navigate.
Filled-in information card
| Extension point | Description |
|---|---|
Checkout::FilledInformation::RenderAfter | After the filled-in information card |
Native modules you can hide here: addressCard.
Contact information
| Extension point | Description |
|---|---|
Checkout::ContactInformation::RenderBefore | Before the contact information module |
Checkout::ContactInformation::RenderAfter | After the contact information module |
Checkout::ContactInformationHeader::RenderAfter | After the contact information title |
Checkout::BlockContactInformation::RenderAfter | After the contact fields; this slot is hidden whenever the contact information is hidden |
Checkout::ContactEmail::RenderAfter | After the email input |
Checkout::ContactPhone::RenderAfter | After the phone input |
Checkout::EmailOrPhone::RenderAfter | After the combined email-or-phone input |
Native modules you can hide here: contactInformation, contactInformationHeader, contactEmail, contactPhone, emailOrPhone, contactSubscribe.
Shipping address
| Extension point | Description |
|---|---|
Checkout::ShippingAddress::RenderAfter | After the shipping address module |
Checkout::ShippingAddressHeader::RenderAfter | After the shipping address title |
Checkout::ShippingAddressForm::RenderBefore | Before the shipping address form |
Checkout::ShippingAddressForm::RenderAfter | After the shipping address form |
Native modules you can hide here: shippingAddress, shippingAddressHeader, shippingAddressBook, securityIdentifier.
Billing address
| Extension point | Description |
|---|---|
Checkout::BillingAddress::RenderBefore | Before the billing address module |
Checkout::BillingAddress::RenderAfter | After the billing address module |
Native modules you can hide here: billingAddress.
Delivery method
| Extension point | Description |
|---|---|
Checkout::DeliveryMethod::RenderBefore | Before the delivery method module |
Checkout::DeliveryMethod::RenderAfter | After the delivery method module |
Checkout::DeliveryMethodHeader::RenderAfter | After the delivery method title |
Native modules you can hide here: deliveryMethod, deliveryMethodHeader.
Shipping lines
| Extension point | Description |
|---|---|
Checkout::ShippingList::RenderAfter | After the shipping line module |
Checkout::ShippingLinesTitle::RenderBefore | Before the shipping line list title |
Checkout::ShippingLinesTitle::RenderAfter | After the shipping line list title |
Checkout::ShippingLines::RenderAfter | After the shipping line list |
Native modules you can hide here: shippingList, shippingLinesTitle.
Pickup information
| Extension point | Description |
|---|---|
Checkout::PickupInformation::RenderBefore | Before the pickup information module, which is shown once the buyer switches to pickup |
Checkout::PickupInformation::RenderAfter | After the pickup information module, which is shown once the buyer switches to pickup |
Checkout::PickupInformationHeader::RenderAfter | After the pickup information title |
Native modules you can hide here: pickupInformation, pickupInformationHeader.
Pickup locations
| Extension point | Description |
|---|---|
Checkout::PickupAddress::RenderBefore | Before the pickup location list |
Checkout::PickupAddress::RenderAfter | After the pickup location list |
Checkout::PickupAddressHeader::RenderAfter | After the pickup location list title |
Native modules you can hide here: pickupAddress, pickupAddressHeader.
Payment
| Extension point | Description |
|---|---|
Checkout::SectionPayment::RenderBefore | Before the payment section |
Checkout::SectionPayment::RenderAfter | After the payment section |
Checkout::PaymentHeader::RenderBefore | Before the payment method title |
Checkout::PaymentHeader::RenderAfter | After the payment method title |
Checkout::Payment::RenderAfter | After the payment method list |
Native modules you can hide here: paymentHeader, payPalExpress.
Submit buttons
| Extension point | Description |
|---|---|
Checkout::StepSubmit::RenderBefore | Before the submit button |
Checkout::StepSubmit::RenderAfter | After the submit button |
Checkout::InfoSubmit::RenderBefore | Before the submit button of the information step |
Checkout::InfoSubmit::RenderAfter | After the submit button of the information step |
Checkout::ShippingSubmit::RenderBefore | Before the submit button of the shipping step |
Checkout::ShippingSubmit::RenderAfter | After the submit button of the shipping step |
Checkout::PaymentSubmit::RenderBefore | Before the submit button of the payment step |
Checkout::PaymentSubmit::RenderAfter | After the submit button of the payment step |
Native modules you can hide here: infoSubmit, shippingSubmit, paymentSubmit, returnBtn.
Order note
| Extension point | Description |
|---|---|
Checkout::SpecialInstruction::RenderBefore | Before the order note module |
Checkout::SpecialInstruction::RenderAfter | After the order note module |
Native modules you can hide here: specialInstruction.
Order summary
| Extension point | Description |
|---|---|
Checkout::Summary::RenderBefore | Before the product column |
Checkout::Summary::RenderAfter | After the product column |
Checkout::OrderSummaryHeader::RenderBefore | Before the order summary title |
Checkout::OrderSummaryHeader::RenderAfter | After the order summary title |
Checkout::OrderSummary::RenderAfter | After the order summary |
Native modules you can hide here: orderSummary, orderSummaryHeader.
Line item list
| Extension point | Description |
|---|---|
Checkout::ProductList::RenderBefore | Before the line item list module |
Checkout::ProductList::RenderAfter | After the line item list module |
Native modules you can hide here: productList, ProductListCover, productListSkuProperties.
Discount codes and gift cards
| Extension point | Description |
|---|---|
Checkout::Reductions::RenderBefore | Before the discount code and gift card module |
Checkout::Reductions::RenderAfter | After the discount code and gift card module |
Checkout::GiftCardTag::RenderAfter | After the discount code and gift card tags |
Native modules you can hide here: reductions, giftCardTag, mobileCoupon.
Price breakdown
| Extension point | Description |
|---|---|
Checkout::PriceList::RenderBefore | Before the price breakdown module |
Checkout::PriceList::RenderAfter | After the price breakdown module |
Checkout::PriceListSubTotal::RenderAfter | After the subtotal |
Checkout::PriceListShippingTotal::RenderAfter | After the shipping cost |
Checkout::PriceListTaxTotal::RenderAfter | After the tax |
Checkout::PriceListShippingTaxTotal::RenderAfter | After the shipping tax |
Checkout::PriceListGiftCard::RenderAfter | After the gift card deduction |
Checkout::TotalPrice::RenderAfter | After the total |
Native modules you can hide here: priceList, priceListSubTotal, priceListShippingTotal, priceListTaxTotal, priceListShippingTaxTotal, priceListGiftCard, totalPrice.
Thank-you page
These extension points render on the thank-you page, the page the buyer lands on after the order is placed. CheckoutAPI is mounted there too, but only part of it returns data — the buyer is no longer editing the order.
| Extension point | Description |
|---|---|
Checkout::ThankyouHeader::RenderBefore | Before the thank-you page header |
Checkout::ThankyouHeader::RenderAfter | After the thank-you page header |
Checkout::ThankyouContent::RenderBefore | Before the thank-you page content |
Checkout::ThankyouContent::RenderAfter | After the thank-you page content |
Checkout::ResultContentInfo::RenderBefore | Before the order result block |
Checkout::ResultContentInfo::RenderAfter | After the order result block |
Checkout::ResultFooter::RenderBefore | Before the thank-you page footer |
Checkout::ResultFooter::RenderAfter | After the thank-you page footer |
Native modules you can hide here: thankyouHeader, thankyouContent, thankyouFooter, thankyouShippingInfo, thankyouFailOrderStatus, thankyouPageGiftCardAddress, thankyouPagePickupAddress.
Dynamic extension points
A dynamic extension point renders once per row — one per line item, per shipping line, per price line or per dialog — so its name carries the id of that row. The names below are templates: replace {id} with the id of the data you are targeting.
| Extension point | Description |
|---|---|
Checkout::Product-{id}::RenderAfter | After a line item, where {id} is the line item id |
Checkout::ProductTitle-{id}::RenderAfter | After a line item title, where {id} is the line item id |
Checkout::ProductOption-{id}::RenderAfter | After the variant options of a line item, where {id} is the line item id |
Checkout::ProductProperty-{id}::RenderAfter | After the custom properties of a line item, where {id} is the line item id |
Checkout::ProductApplication-{id}::RenderAfter | After the discounts applied to a line item, where {id} is the line item id |
Checkout::ShippingLine-{id}::RenderAfter | After one shipping line in the list, where {id} is the shipping line id |
Checkout::PriceListItemTitle-{id}::Replace | Replaces the title of one price breakdown line, where {id} is the price line id |
Checkout::Dialog-{id}::RenderAfter | The body of an interception dialog, where {id} is the pointId your registerBuyerJourneyIntercept callback returned |
Checkout::DialogFooter-{id}::RenderAfter | The footer of an interception dialog, where {id} is the pointId your registerBuyerJourneyIntercept callback returned |
Checkout::DialogTrueBtn-{id}::Render | The confirm button of an interception dialog, where {id} is the pointId your registerBuyerJourneyIntercept callback returned |
Checkout::DialogFalseBtn-{id}::Render | The cancel button of an interception dialog, where {id} is the pointId your registerBuyerJourneyIntercept callback returned |
Build the real point name with CheckoutAPI.extension.generateRealDynamicPoint():
const [lineItem] = window.CheckoutAPI.summary.getProductList();
const point = window.CheckoutAPI.extension.generateRealDynamicPoint(
'Checkout::Product-{id}::RenderAfter',
lineItem.id,
);
// point === 'Checkout::Product-6c7c018e-bcc6-4896-9b75-238438178cc8::RenderAfter'
extend({
extensionPoint: point,
component: '<p>Ships separately.</p>',
});
It does the same thing as replacing {id} in the template with the data id. Where each id comes from: a line item id is the id of an entry returned by CheckoutAPI.summary.getProductList(), a shipping line id is the id of an entry returned by CheckoutAPI.order.getShippingLines(), and a dialog id is the pointId your registerBuyerJourneyIntercept callback returned. Line item ids change whenever a line is removed and added back, so read them again each time instead of caching them.
Logic extension point
| Extension point | Description |
|---|---|
Checkout::LogicContainer::RenderAfter | A container that renders no visible content |
Checkout::LogicContainer::RenderAfter is the slot for an extension that has no UI of its own. Extend it when you only need to run code on the checkout page — reading CheckoutAPI, registering listeners, calling your own backend — and do not want your content to take up space anywhere in the layout.