Salesforce B2C Commerce 24.7 > Developing Your Site > SFRA > Customize SFRA

Customize Templates

The system searches the cartridge path for the first template that matches the specified name and location. To override a template, create a custom cartridge. In the custom cartridge, include a template with the same name as the template you want to override.

The location of your template in your cartridge must match the location of the original template in the original cartridge. Finally, add your custom cartridge to the cartridge path, placing your cartridge to the left of the original cartridge.

Decorator Templates in SFRA

There are only two decorator templates:

page.isml: Contains navigation information
checkout.isml: Doesn't contain navigation information. Removing navigation information has been shown to improve the percentage of cart abandonment.

These templates are located in app_storefront_base/cartridge/templates/default/common/layout/.

Note: All of the pt_..._VARS and pt_..._UI templates that existed in previous versions of SiteGenesis were removed.

The navigation for a page is set through the new decorator templates. Client-side scripts and CSS files are set for each template using the assets.addJs and assets.addCss functions for each template. The top of every page template contains code similar to the following:

<isdecorate template="common/layout/page">
    <isscript>
        var assets = require('~/cartridge/scripts/assets.js');
        assets.addCss('/css/cart.css');
    </isscript>

You can put *.css files and *.js files with the same names and in the same locations as indicated in the original template. This strategy overrides any like-named *.css files and *.js files in any cartridge to the right of the current cartridge on the cartridge path.

Overriding CSS and Client-Side JavaScript for a Page

You can override CSS and client-side JavaScript for a specific template. For example, if the template declares the following assets:

<isdecorate template="common/layout/page">

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

You can create a productDetail.js and detail.css and place them in the same location as indicated in the template. The platform uses the first template with the correct name and location that it finds on the cartridge path.

When creating the CSS file you want to customize, create a file with the same name and location as the file you 're customizing. In your file, import the original file.

Example: Customizing Detail.Scss.

@import "base/product/detail";

.description-and-detail {
    margin-top: 2em;

    .details {

        @include media-breakpoint-up(sm) {
            margin-bottom: 2em;
        }
    }
}

Best Practices with ISML

Usually, business logic isn't included in app_storefront_base templates. Any logic in the templates is specific to rendering. The app_storefront_base cartridge demonstrates recommended strategies for using ISML:

iscache: Set by default to 24 hours. We recommend changing this value in the controller.
isset: Only used to set a variable used by isinclude. Don't use complex expressions in the isset.
isscript: Only used to add client-side JavaScript/CSS to the page using the asset module.
ismodule: Only used for content assets.
iscontent: Change this value in the controller.
iscookie: Change this value in the controller.
isredirect: Change this value in the controller.
isstatus: Change this value in the controller.
isobject: Used to wrap products for analytics and the Storefront Toolkit.