Learn About Storefront Reference Architecture and Page Designer

Learning Objectives

After completing this unit, you’ll be able to:

  • Get familiar with the new B2C Commerce Storefront Reference Architecture.
  • Build ecommerce experiences faster with Page Designer.
  • Learn about SFRA updates for Page Designer.

Salesforce Certification—the Big Picture

If you hold the Salesforce B2C Commerce Developer credential, keep in mind that you need to complete this module by the due date to maintain your certification. Another important part of maintaining your credential is ensuring that your Trailhead and Webassessor accounts are linked.

Interested in learning more about getting certified? Check out the Salesforce B2C Commerce Developer credential.

Salesforce introduced a ton of great feature enhancements over the past year. Let’s take a look at some of the more important ones.

Storefront Reference Architecture

The B2C Commerce Storefront Reference Architecture (SFRA) provides best practices in site design and customer experience with a mobile-first approach on model-view-controller (MVC) technical architecture. SFRA also provides improved extensibility, allowing merchants to build and customize their ecommerce storefronts using the development platform, open APIs, and a network of certified partners.

Storefront Reference Architecture was engineered through a data-driven design analysis using over 2,000 storefronts to identify optimal UX approaches. This modern architecture lets merchandisers and developers build mobile or desktop experiences faster than ever.

SFRA is much more than just a blueprint. It also includes developer-friendly tools and hundreds of out-of-the-box features such as homepage, onsite search, product detail, checkout flows, and more.

What About SiteGenesis?

The Salesforce B2C Commerce best-in-class SiteGenesis architecture is currently being used by over 2,700 B2C Commerce sites and is a proven foundation to some of the world’s leading brands. The future of SiteGenesis is strong. It will continue to be supported and receive maintenance and SiteGenesis customers will also continue to receive platform innovation through the B2C Commerce API layer. There is no plan to discontinue support.

However, the SFRA reference application represents B2C Commerce’s current recommended approach for implementing digital storefronts to ensure merchants are starting out with the latest and greatest blueprint for site design. Reference architectures are useful when building a new site or conducting a site redesign. If you’re implementing either of these, use the SFRA reference application as a starting point.

Get Started with SFRA

The SFRA reference application provides two sample sites.

  • RefArch
  • RefArchGlobal

SFRA also provides associated data and code to drive the sample ecommerce storefront.

For steps and detailed instructions to set up SFRA, see the Infocenter: Get Started with SFRA. After your environment is set up, you can run the SFRA reference application and explore how it is constructed.

SFRA Overview

Storefront Reference Architecture represents a new approach to building and customizing your storefront site. Salesforce B2C Commerce provides an app_storefront_base cartridge and a server module.

The base cartridge contains only the functionality common to most sites. You can layer functionality over the base cartridge with plug-in cartridges, LINK cartridges, and custom code cartridges. B2C Commerce provides plug-in cartridges that provide other features, such as gift registries, Apple Pay, product comparisons, and middleware capability. LINK partners, such as PayPal and Bazaarvoice, provide LINK cartridges for third-party integrations. You can create one or more custom cartridges to override portions of the base cartridge and customize the functionality and branding of your storefront site.

The app_storefront_base cartridge includes multiple models. These models use the B2C Commerce script API to retrieve data from the platform for a functional area of the application, such as orders. These models then construct a JSON object that you can use to render a template or return an AJAX response to an asynchronous call.

The server module provides objects that contain data from HTTP requests, responses, and session objects. The server module registers routes that map a URL to code that's executed when B2C Commerce detects the URL.

After you’re familiar with these concepts, you can explore customizing SFRA for your organization, brand, and products. Since SFRA is extensible, it can be customized without editing the app_storefront_base cartridge or other plug-ins. The extensible design also lets you more easily make security updates, bug fixes, and adopt new features. The app_storefront_base cartridge models and server module objects are guaranteed to be backward compatible between major releases.



Don’t rename the app_storefront_base cartridge or other provided plug-ins, and keep them up to date. By doing so, you ensure that you have the latest bug fixes and performance improvements.



Editing the app_storefront_base cartridge or server module voids the guarantee of backward compatibility and hinders feature and fix adoption. Instead, use B2C Commerce script methods to extend base cartridge functionality. The JSON objects created by the server module and the app_storefront_base models retain their structure and don't change properties between point releases.

See Also: Trailhead: Salesforce B2C Commerce for Developers

Build Ecommerce Experiences Faster with Page Designer

Page Designer empowers business teams to create beautiful and impactful commerce experiences—fast. With Page Designer, business users can design, schedule, and publish pages in an easy drag-and-drop interface, with reusable components built by developers using open web standards and a provided reference library. This reduces development and quality assurance time and greatly improves speed to market.

Page Designer is a B2C Commerce feature that supports standard development processes and tools for creating reusable page types and component types. Merchants can use a visual editor in Business Manager to design, schedule, and publish custom pages in the storefront by dragging the page and component types. Merchants can use the same page and component types to create a variety of pages independently, without going back to the developer for updates.

The typical Page Designer implementation process includes these steps.

  1. The ecommerce marketing department meets with the developer to discuss the pages, components, layouts, and assets required for the storefront.
  2. The developer creates the reusable page types and component types that support the ecommerce marketing director’s requirements.
  3. The developer uploads the custom cartridge that contains the page and component types and another custom cartridge that contains supporting UI artifacts for a site.
  4. The merchant uses the Page Designer visual editor in Business Manager to build storefront pages using the page and component types that the developer has implemented.

In this process, there is upfront work to define the business requirements, goals, and designs upfront. However once this is determined, the developer can build customized components in such a way to be modular and reusable without ongoing dependency for developer expertise.

The developer builds Page Designer pages and components using open web standards, framework components, and a reference solution kit, such as the Storefront Reference Architecture (SFRA). Using SFRA as a base reduces development dependencies and quality assurance time, and improves speed to market. SFRA comes with built-in Page Designer pages and prebuilt components such as headers, carousels, and product tiles. Or you can also create your own page and component types, and just pull code examples from SFRA.

See also: Trailhead: Salesforce B2C Commerce Page Designer for Developers

SFRA-Optimized Pages and Components for Page Designer (SFRA 4.2)

Get started quickly with Page Designer using the new pages and components included with Storefront Reference Architecture.

SFRA includes the following page types and component types.

  • Header
  • Main banner or hero image
  • Shop category
  • Product carousel—Catalog
  • Product carousel—Einstein
  • Product tile
  • Campaign banner
  • Look book
  • Photo tile
  • Static content with Shop link
  • Content mix blocks

How: For the latest version of SFRA, go to the SalesforceCommerceCloud/storefront-reference-architecture repository on GitHub.

For instructions to access the SFRA repository on GitHub, see: Trailhead: Tools & Resources for Salesforce B2C Commerce Developers

If you used the reference page types or component types from the GitHub page-designer-reference repository to create pages or components, make sure the formatting of those pages and components is as you intend after you upgrade SFRA. You might need to make some formatting or style adjustments.

The reference page types and component types from the page-designer-reference repository are intended to work together, as are the page types and component types included with SFRA. If you want to use pages and components from both reference sets together, you might need to make more formatting adjustments.


Keep learning for
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities