If you’re using Salesforce Commerce Cloud for your eCommerce site, then you would have heard about Storefront Reference Architecture (SFRA) by now. Salesforce Commerce was traditionally built on Demandware which later transformed to Site Genesis. However, with the limitations of Site Genesis Architecture, performance, scalability, and maintenance challenges, Salesforce put together a site blueprint with the latest and greatest mobile-first design architecture which is highly scalable and has large improvements to UX, page speed, and application performance and provides overall ease of features extensibility to better serve customer needs along with better application maintenance compared to the older Site Genesis.

What is SFRA and what are the key differences with SiteGenesis?

SFRA: Salesforce B2C Commerce launched the Storefront Reference Architecture (SFRA) in 2018 to provide a starting point for retailers to build state-of-the-art shopping experiences quicker and easier than before. It was built on mobile-first optimized UX which is much more efficient, robust, scalable, and modern compared to the older SiteGenesis model.

Site Genesis: Salesforce bought Demandware, which was originally built on Intershop. Demandware was an upstart launching the SAAS (software as a service) model for eCommerce. This is a predecessor to the SFRA and does not natively support mobile web experiences, is much slower in performance, and does not support code extensions.

Let's look at the 5 Digital Experience trends which are expected to dominate in 2021.  ||  Talk to our team on how we design the architecture of influence to encourage exploration and maximize conversion.

Summary of Architectural Improvements in SFRA

• Mobile-First design: The site has been developed with a mobile perspective first then working the way up and expanding the design to desktop with a fully responsive site.


• Enhanced Features: Multiple features are provided including:
  • Page Designer components to provide business teams the capability to design pages with no IT dependency. Business users can now easily get started on building pages by taking advantage of the new SFRA optimized modular design and components.
  • Enhanced wireframes and UX redesign which includes single page accordion-style checkout with collapsible summaries out-of-the-box.
  • Pixel perfect sites with an extensibility model to build unique brand experiences with a framework that enables fast, easy and customized websites.
  • An all-in-one cartridge that includes the following integrations out-of-box:
    • Apple Pay
    • In-store pickup
    • Gift Registry
    • Product compare
    • Wishlist
    • Site Map
    • GDPR Customer Data Download
• Ease of code customization and maintainability:  To help with upgradability and cleaner separation of custom code, Commerce Cloud recommends developers to customize the SFRA through overlay cartridges without making changes to base SFRA codebase. This provides an easier path to implement new features, bug fixes, and future upgrades as compared to Site Genesis where upgrades may have to be done manually and code extension is a challenge.


• Modern Faster Framework: Templates are written using frameworks like Bootstrap 4, jQuery helping enhanced page speeds and client-side page performance.


• Enhanced UI/UX, faster and better conversion: Based on the research and thousands of audits done by Salesforce to analyze how the UX affects site performance, SFRA base templates have been assembled with all the tweaks and best practices in place.


• Testability: SFRA comes with unit tests for much of the base functionalities as a means to improve testability
  • Controllers are tested using integration tests (mocha, chai, and request-promise)
  • Models are tested with unit tests (mocha, chai, sinon, and proxyquire)
  • Views are tested with functional tests (mocha, chai, and webdriver.io)

Customer Fit

SFRA Architectural Overview

There are 2 decorator patterns for SFRA. One with Navigation and one without making it very simple, convenient to extend, and easy to manage.

Architectural Comparison b/w Site Genesis and SFRA

SFRA follows the MVC (Model-View-Controller) architectural pattern that enables the addition of new features by extending models and controllers without duplicating the templates. All business logic has been removed from templates and centralized in the Controllers.

Site Genesis a single code component more like a monolithic architecture. It is a comparatively old software architecture wherein developers need to duplicate templates and modify the existing code to add new features to the application.

Technical Benefits of Storefront Reference Architecture (SFRA)

Administers Development of Modular, Maintainable, and Upgradeable Code

SFRA encourages developers to write less code as features can be extended from out-of-box components and easily configured instead of copying coding and modifying it.

Automatic Support for CI/CD (Continuous Integration, Continuous Deployment)

CI/CD tools are included for automated deployments and testing

Industry Standard Development Patterns

SFRA supports MVC and middleware pattern which is recommended by the Industry leading app-engines (express.js)

Data Models and Format (JSON)

SFRA supports extensible data models and data transfer in serialized JSON format which is the industry standard.

Amended Class Inheritance and Extensibility Model

SFRA base framework for models and controllers can be untouched with new classes developed as extensions hence avoiding duplication of code which was the norm in Site Genesis.

Easily available Developer Libraries to enhance Storefront Experiences

Popular libraries like Bootstrap, jQuery structure the layout, component, and user experience on Storefront.

Download our offering now and find out how you can launch a fully functional and feature rich Salesforce Commerce Cloud site in less than 12 weeks!  ||  Sign up today for the latest news about your Digital Transformation.

Migration process from Site Genesis to SFRA

Although it is technically possible to move from SiteGenesis to SFRA by combining both architectures and treading the cartridges separately, it is highly recommended to employ SFRA entirely to avoid site degradation. Converting the site in one architectural standard is the preferred manner for the following reasons:

• Provide a consistent experience across the entire site
• Avoid overhead in the development process by replacing functionalities one at a time which can cause integration challenges and make the code “buggy”
• Quicker test and QA certification process
• Avoid different coding formats, CSS styles in different areas of the site
• Save time and avoid inefficiencies of development
• Simplicity, unity, and ease of use by consumers and business users

Implementation Considerations for Site Genesis to SFRA migration

• The existing site and its data can be used for the SFRA version of the storefront. If both versions of the storefront (SiteGenesis-based and SFRA-based) are needed in the same environment during development, a temporary site can be made to handle this, but some data may need to be migrated from one site to the other to support feature implementation.


• Existing code and features from the current storefront may require review against the SFRA architecture. The best practice approach for SFRA is to extend rather than override or replace functionality, which was how things may have been handled in SiteGenesis based storefronts. This is to promote the future adoption of SFRA updates as they arrive.

Case Study with SFRA adoption by PUMA