Template Integration

All changes below are already included in int_kleep_sfra. If you’ve overridden these templates in your custom brand cartridge, you can remove the Kleep versions from int_kleep_sfra/cartridge/templates/default.

Kleep Button (PDP + Product Tracking)

Add to both:

app_custom_brand/.../experience/components/dynamic/product/productDetails.isml
app_custom_brand/.../product/productDetails.isml

<iscomment> CUSTOM KLEEP </iscomment>
<isinclude template="product/components/kleepButton" />

Place right before:

<!-- Attributes and Quantity -->
<isinclude template="product/components/mainAttributes" />

You can duplicate the <isinclude> tag anywhere in the PDP — all buttons share a single iframe/modal.

Checkout Tracking

Add to your checkout template:

<iscomment> CUSTOM KLEEP </iscomment>
<isinclude template="common/kleepTracking" />

Place right after:

<!-- Step 3: Payment and Billing-->
<isinclude template="checkout/billing/billing" />

Confirmation Tracking

Add to app_custom_brand/.../checkout/confirmation/confirmation.isml:

<iscomment> CUSTOM KLEEP </iscomment>
<isinclude template="checkout/confirmation/kleepCheckoutCompletedTracking" />

Place right after:

<isscript>
var assets = require('*/cartridge/scripts/assets.js');
assets.addCss('/css/checkout/checkout.css');
assets.addJs('/js/checkoutRegistration.js');
</isscript>

Welcome

CMS

Mobile

Dashboard

Data

Privacy

Template Integration

Kleep Button (PDP + Product Tracking)

Checkout Tracking

Confirmation Tracking

​Kleep Button (PDP + Product Tracking)

​Checkout Tracking

​Confirmation Tracking

Kleep Button (PDP + Product Tracking)

Checkout Tracking

Confirmation Tracking