Salesforce Storefront Reference Architecture (SFRA) for Salesforce B2C Commerce Cloud


  • Simpler to launch
  • Pre-configured default templates
  • Also, quickly adopt technologies like Apple Pay–providing shoppers with an awesome experience.
  • SFRA customization model makes it easy for developers to build, maintain, and update storefront.
  • Leverage existing JavaScript controllers development model along with a new MVC architecture approach for customization.
  • Leverage UX best practices, data driven design, and use of the popular Bootstrap mobile UI framework to optimize the shopping experience across mobile devices
  • Greater extensibility and adaptability for future upgrades.

Summary of Architectural Improvements

Who Is The SFRA Intended For:

The new Salesforce Storefront Reference Architecture has these two primary audiences in mind:

  • Merchants who are beginning new site implementations with Commerce Cloud or who are adding a new brand as a new storefront in their current Salesforce CC.
  • Merchants who are making a major overhaul of their existing storefront.

Who is the Storefront Reference Architecture for?

Adoption options and scenarios available to customers today

  • Merchants do not have to reimplement their digital platform to take advantage of the Salesforce Storefront Reference Architecture. All the pre-existing data, merchant rules, etc., built in Commerce Cloud Digital will remain unaffected.
  • Merchants can use the existing SiteGenesis architecture and the new Salesforce Storefront Reference Architecture across different brands or regions at the same time. For example, one brand or region could run on the Salesforce Storefront Reference Architecture, and another brand or region could run on SiteGenesis.

Reference Architecture


Available Reference Architectures

Reference Architectures Available Today to Commerce Cloud Customers

Understanding the SFRA Design Process

Mobile-First design best practices adopted to implement storefront features

SFRA: A Brand-New Reference Architecture Informed by Shopper Insights
  • Developed the mobile experience first and then incrementally expanded use-case support for tablet and desktop view ports.
  • Leveraged data-driven insight, heat mapping and shopper journey analysis from the B2C Commerce community of over 2,000 mobile sites.
  • The end-result is a lighter codebase that emphasizes customer experience best practices across each view-port – instead of focusing on functional parity

Understanding the SiteGenesis Mobile Design Process

Desktop to Mobile support achieved by extending the reference architecture

SiteGenesis: Evolved to Support Responsive Design (vs. being developed Mobile First)
  • Not a best practice – but the quickest way to achieve Time to Market for our customers
  • Involves layering Additional UX Code (Styles and javascript) to create tablet/mobile experiences
  • Each experience incrementally increases complexity and maintainability of the storefront
  • Responsive support was delivered – but did so by introducing new maintenance responsibilities
  • This coupled with the architecture and development model incrementally increases TCO

Comparing Business Value Generated by SiteGenesis and SFRA

SFRA consistently generates more business value in each category

Storefront Reference Architecture

Maintainability and Extensibility

Improved extensibility and inheritance model encouraging modular code and smaller changes

Customer Experience

Mobile first design best practices influenced by data-driven insights, heat mapping and shopper journey analysis

Continuous Integration

Improved support for continuous integration and automated testing – including unit, integration and functional tests.

Total Cost of Ownership

Collectively, the mobile-first approach and architectural improvements are designed to reduce TCO compared to SiteGenesis



Maintainability and Extensibility

Legacy inheritance model functional but encourages code duplication; more challenging to maintain as codebase ages

Customer Experience

Desktop to responsive design includes more features per form factor to maintain within the storefront codebase

Continuous Integration

Includes support for continuous integration but lacks the examples that ship with SFRA or the command line tooling.

Total Cost of Ownership

Although, it is an effective option for the customers but SiteGenesis will have a higher TCO compared to SFRA to maintain in the future.

Feature Comparison

SiteGenesis vs. Storefront Reference Architecture

Feature Parity with SiteGenesis

  • Homepage: Product tiles, content slots, product recommendations, email signup, store locator, header and footer, product quick-view.
  • Product Detail Page: Basic products, products with variants, size chart, product sets, product bundles. Bonus products, promotions, Einstein product recommendations, Einstein predictive sort, in-store inventory views, variation groups, quick view.
  • Cart: Persistent cart, Einstein product recommendations, bonus products, coupons, mini-cart
  • Checkout: Cart page, receipt page, shipping, billing, form handling, multiple shipping options, pick-up-in-store, registered and unregistered checkout, confirmation emails, one touch payment options
  • Search and Search Results: Search results, search suggestions, search refinements, Einstein predictive sort, category landing pages, search-as-you-type, search not found, show more, international linguistic support
  • My Account: Login, Edit Profile, password recovery, order history, social login, remember me functionality

Wishlists and Gift Registry

  • Customer Service: About us, Contact us, security and privacy, customer help
  • General Site Management Features: Responsive design, Localization, error pages, breadcrumbs, navigation, header/footer

Technical Comparison

SiteGenesis vs. Storefront Reference Architecture

Feature Parity with SiteGenesis

  • Full Platform Functionality: Underpinning the storefront is a multi-tenant cloud platform for innovation enabling a continuous delivery of new features and enhancements
  • Open Commerce API’s (OCAPI): A full set of APIs wrap the platform and expose core commerce functionality such as cart, checkout, and search as well as data objects such as product or catalog, through the REST API layer.
  • JavaScript Controllers: Enables developers to build custom business logic with a common language that ensures productivity.
  • LINK technology Partner Program: Leverage best-of-breed 3rd party integrations

    o Many storefront LINK cartridges are in the process of being integrated

  • My Account: Login, Edit Profile, password recovery, order history, social login, remember me functionality

SFRA Technical Advantages

  • Model View Controller Architecture (MVC): Developers are empowered to write better organized, more maintainable code with a less complexities and dependencies
  • Efficient Storefront Maintenance & Updates: A modular separation of core reference features, merchant customization and integration cartridges makes implementing new features and maintenance a breeze.
  • Bootstrap Mobile Framework: The most popular HTML, CSS and JS framework for developing responsive, mobile-first sites. Bootstrap’s open source toolkit makes front-end development easier.
  • Extensibility: Build “pixel perfect sites” with an extensibility model that allows developers to build unique brand experiences with open architectures and frameworks that enable fast, easy customization.
  • Mobile Wireframes: Annotated documentation that provides a guide for mobile page schematics and associated storefront best practices.

Architectural Comparison

SiteGenesis vs. Storefront Reference Architecture

Royal Cyber:

For more information on our Salesforce services, please check the below URL:

Comments are closed.