# Overview
This page describes changes that should be made to the site for SiteGenesis storefronts. Custom modifications to your core cartridge outlined in this guide can be separated into four parts:
Templates
Client-side JavaScript
Controllers (SiteGenesis Controllers version)
Pipelines (SiteGenesis Pipelines version)
## Templates
### 1. cartridge/templates/default/components/header/htmlhead.isml
Paste the following code after the “Google verification feature” as it is shown on the screenshot below.

### 2. cartridge/templates/default/components/footer/footer_UI.isml
Paste code after the last line:

### 3. cartridge/templates/default/checkout/cart/cart.isml
Find the closing tag for the div with `cart-footer
` class (line 850). Paste code after the below:

### 4. cartridge/templates/default/product/components/options.isml
Add `data-affirm-name
` property to the `select
` component.

### 5. cartridge/templates/default/product/productcontent.isml
Paste after “pricing component”:

### 6. cartridge/templates/default/checkout/billing/paymentmethods.isml
Find the following code:

Replace it with the code below:

Insert the following tag after the comment tag "Custom processor":

### 7. cartridge/templates/default/checkout/summary/summary.isml
Paste the following code after the `COSummary-Submit
` form:

### 8. cartridge/templates/default/product/producttile.isml
Paste the code below after the `product swatches
` block:

### 9. cartridge/templates/default/product/producttopcontentPS.isml
Paste the following code after the div with `product-number
` class:

### 10. cartridge/templates/default/util/modules.isml
Paste the following after the content asset module import:

### 11. cartridge/templates/default/components/order/orderdetails.isml
Replace the div with `payment-type
` class and `isminicreditcard
` tag with the code below:

### 12. cartridge/templates/default/components/order/orderdetailsemail.isml
Replace lines above `isminicreditcard
` tag (lines 46-50) with the code below:

### 13. cartridge/templates/default/checkout/confirmation/confirmation.isml
Paste the following code after the close tag of the div with `confirmation message
` class to include tracking script template:

### 14. int_affirm_controllers/cartridge/templates/resources/affirm.properties
Find the property `affirm.controllers.cartridge
`. Set it as the name of your controllers cartridge (with script files `app.js
`, `guard.js
`), for example:
## Client-side JavaScript
### 1. cartridge/js/pages/product/variant.js
Update the `ajax.load
` within `updateContent
` method with the following snippet:

### 2. cartridge/js/pages/search.js
Within the `$('#man').load
` jQuery callback include the snippet below:

### 3. cartridge/js/pages/product/productSet.js
Update `on('click')
` of event action with `$productSetList
` with the extended code:
Important
To properly render “affirm-as-low” on PDP, PLP and Cart, at the end of handle functions that influence price on basket (ajax product price change, quantity based price change, pagination, search, add-on price change etc.) must call the `
affirm.ui.refresh
` function.
Make sure to rebuild client JS after making modifications.
## Controllers (SiteGenesis Controllers)
### 1. cartridge/controllers/COBilling.js
Reassign `applicablePaymentMethods
` within `initCreditCardList
` function with the following code:

In the same file, find `publicStart
` function and replace `applicablePaymentMethods
` assignment with the following:

Replace the `status
` assignment within `resetPaymentForms
` function with the following block of code:

### 2. cartridge/controllers/COPlaceOrder.js
Below the `saveCCResult
` variable and its conditional check, include `affirmController
` to get Affirm status with the snippet below:
### 3. cartridge/controllers/COSummary.js
Go to `submit
` function. Add the following at the beginning of the function:

## Pipelines (SiteGenesis Pipelines)
### 1. cartridge/pipelines/COBilling.xml
Find the start node `InitCreditCardList
` and add call node (Affirm-Init, int_affirm_pipelines) after second Assign node:

pipelines_1_COBilling_1_Affirm-Init
Find start node `ResetPaymentForms
` and add Pipelet nodes as shown below:

pipelines_1_COBilling_2_ResetPaymentForms
In the same pipeline create an additional branch:
a. Decision node – Decision Key: `!CurrentForms.billing.paymentMethods.selectedPaymentMethodID.value.equals('Affirm')
`
b. ClearFormElement Pipelet – FormElement: `CurrentForms.billing.paymentMethods.creditCard
`
c. ClearFormElement Pipelet – FormElement: `CurrentForms.billing.paymentMethods.bml
`
d. `RemoveBasketPaymentInstrument
` Pipelet – PaymentInstruments: `Basket.getPaymentInstruments(dw.order.PaymentInstrument.METHOD_CREDIT_CARD)
`
e. `RemoveBasketPaymentInstrument
` Pipelet – PaymentInstruments: `Basket.getPaymentInstruments( dw.order.PaymentInstrument.METHOD_BML)
`

pipelines_1_COBilling_4_ResetPaymentForms_additional_branch