Identifying the difference between SFCC Legacy Site Genesis and Modern SFRA

Salesforce Commerce Cloud - Site Genesis vs. Storefront Reference Architecture

It can be difficult to tell the difference between legacy Site Genesis Salesforce Commerce Cloud eCommerce sites and modern Storefront Reference Architecture sites without access to code unless you know some very particular rendered HTML items to look for. Here I will detail a few key items to look for to assist in researching other Commerce Cloud sites.

Many developers and sales people, while doing research into new Salesforce Commerce Cloud sites, would like to know which version of the platform that site may be using. Typically the developer or sales person will not have access to the core code base, nor a contact to reach out to at the company. To help with this, I've put together some ways to tell from the generated HTML if a site is using legacy Site Genesis or the current Storefront Reference Architecture (SFRA).

Of course, this can be difficult if a site has rewritten templates and back end code extensively, but here are some basic signs to look for. For this you’ll need a knowledge of how to look/inspect the websites with Chrome’s Inspector Tool. Here’s a site that has a pretty decent walk through on how to use different parts of the inspector: https://www.templatemonster.com/help/use-google-chrome-web-inspector.html.

1) Check the Top Level div on a given page. The wrapper div (highest level on the page) is different by default for SFRA vs Site Genesis. Specifically, you can look for this just under the opening <body> tag on the page.
a. Site Genesis: <div id="wrapper" class="pt_storefront">

Site Genesis Page
b.   SFRA: <div class="page" data-action="Home-Show" data-querystring=""> SFRA Page
2)   In checkout, check for pipelines like COBilling and COShipping. To check for this, you’ll need to add an item to your cart and start the checkout process. Have the inspector window open, and you can watch the “network” tab to see calls to the endpoint pipelines. The most important difference here is SFRA will never call a COBilling or COShipping endpoint as those controllers do not exist in the codebase.
a.   Site Genesis:

Site Genesis Checkout
b. SFRA:

SFRA Checkout
3) If the company is using Page Designer – check landing pages for classes called “experience”. Not totally accurate, as those classes can be overwritten. Only SFRA sites can use Page Designer, it is not available for legacy Pipeline or Controller sites.
4) App.js will be broken down differently. This can be hard to tell as usually the javascript is minified and difficult to read. Definitely a last resort. Site Genesis uses a single, large app.js file. SFRA site typically will use webpack to bundle the javascript files for deployment.