# Extension points

> Every extension point a Shoplazza checkout extension can render into, on the checkout page and the thank-you page, with the slot name to pass to extend().

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:

```javascript
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](/docs/app/extensions/checkout/extension-reference#extend-function-and-html-template). Each area below also lists the native modules you can hide there with [deleteTarget](/docs/app/extensions/checkout/extension-reference#hiding-native-modules-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()`:

```javascript
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.