Are you developing an eCommerce website on Salesforce Commerce Cloud? You may be wondering how to get the most out of the website architecture. Using Salesforce Commerce SFRA (Store Front Reference Architecture), you can streamline the development process to suit devices of every kind – and ensure that your mobile commerce game is on point.

Back in 2017, it was advisable to have a mobile commerce website or mobile shopping application, as mCommerce was 59% of global eCommerce market share. In 2022, it controls 73% of the global eCommerce market. That means that a mobile-optimized online retail store isn’t optional any more. It’s essential.

In the last six months, 79% of mobile users used their mobile devices to make a purchase online. Mobile-optimized eCommerce sites target users of both tablets and smartphones, but tablets’ share of online shopping has dropped from 20.5% in 2018 to 14.8% in 2022. Fortunately, when you’re using Salesforce Commerce SFRA, you don’t have to choose between the two kinds of devices, as it acts as a blueprint for device-responsive website design.

Preparing for mCommerce

While many businesses prefer a downloadable mobile shopping app, if you’re just getting started, we recommend a responsive website first. It’s faster and more cost-effective than developing a mobile app but allows you to access customers using any device.

Responsive design is not always easy. Since you’re designing for different sizes, you need to account for the limited space available on each device, especially smaller devices like smartphones. Another issue is that mobile devices and mCommerce best practices are constantly evolving, meaning that your storefront needs to regularly evolve as well to suit the market. When they’re browsing your mCommerce site, your customers expect a personalized experience, especially during product recommendations, payment and checkout.

Salesforce Commerce SFRA offers a comprehensive blueprint for mobile-first responsive eCommerce website design.

Why should you use Salesforce Commerce SFRA?

Salesforce Commerce Store Front Reference Architecture (SFRA) is a user experience framework that provides the best-practice architecture for mobile storefronts. It makes it easier to develop, deploy and update your eCommerce website, as it provides API-led connectivity to power headless commerce for the Salesforce Commerce Cloud front end.

(Also read: “Simplifying Headless Commerce With Salesforce Composable Storefront“)

SFRA has a large library of plug-and-play core capabilities needed by every eCommerce site, such as product detail pages, shopping cart, checkout page, etc. Using them, you can build a custom storefront that works for your brand. What’s more, since updates are easy and fast, it’s possible to launch a storefront design, test, and pivot quickly. This ensures that shoppers on your mobile eCommerce site get a stronger on-site customer experience.

You gain flexibility and scalability from SFRA, since the layers of services are decoupled. By connecting the digital platform and the storefront through an API layer, your brand can integrate with third-party service providers and progressively iterate the storefront design.

Since SFRA uses “conventional Model-View-Controller (MVC) architecture and sits outside of the platform API layer”, it becomes easier to maintain storefronts using the SFRA customization model.

Salesforce Commerce SFRA enables faster rollout of efficient, customized, responsive eCommerce websites that make mCommerce easier. Website launch happens in a shorter span, resulting in lower associated costs as well. It implements industry-standard developer tools, allowing for faster time-to-value. Since developers can use preconfigured storefront layouts and templates, development and innovation become faster.

Another major advantage is that functionality and features are modular. That means that the features can be added individually, when they’re released or when you need them. Integrations are separate from the core code base, meaning that developers can customize their code outside the code base before integration into the storefront.

SFRA’s special features, including a persistent search bar, instant checkout and seamless payment options, help brands realize an increase in conversion rates. Since the framework highlights only the most significant customer-related shopping actions, it reduces noise in the storefront design. These features of SFRA have helped brands realize an increase in conversion rates.

The evolution of responsive design architecture with SFCC

When you started working on your SFCC eCommerce website, you may have come across SiteGenesis – the original reference architecture used for Salesforce Commerce Cloud. As you may remember, Demandware was acquired by Salesforce in 2016 and renamed Salesforce Commerce Cloud (SFCC). Demandware was one of the early players in the SaaS eCommerce platform space.

Demandware was built on Intershop and used SiteGenesis as storefront architecture. Since it’s older technology now, SiteGenesis was replaced by MFRA, and its successor, SFRA. SiteGenesis has worked well for SFCC eCommerce websites, but the benefits of SFRA over SiteGenesis are obvious especially when it comes to mobile-responsive websites.

The major difference between SFRA and SiteGenesis is that SiteGenesis does not natively support mobile web experiences. On the other hand, SFRA explicitly focuses on the mobile experience.

SFRA is also more cost-effective, with a lower total cost of ownership thanks to its more extensible development environment. It’s easier to make updates on an eCommerce website developed using SFRA, since it uses an MVC modular code architecture as against SiteGenesis’ older functionalities and aging codebases. This makes “iterative changes easier and simplifies the upgrade and customization process – without duplication of templates”.

Development and performance of SFRA are improved over SiteGenesis, since it offers a number of configurable components, reducing developers’ requirement to write more code.

How do you upgrade to SFCC SFRA?

Unlike SiteGenesis, which is no longer actively supported or updated by the SFCC team, several SFRA version updates are rolled out each year on a standard release cycle. As such, a site built using SFRA need not be rebuilt to continue supporting the updates.

You can get started on building an engaging, personalized and exciting customer experience on your online storefront using SFCC SFRA. But how easy is it to get started?

If you’re already using SFCC for your eCommerce site, data migration to the new storefront reference architecture is seamless. On the other hand, legacy data migration from other platforms is a process to be completed. SFRA migration allows you to integrate all the latest features and stay on par with or ahead of your competitors.

Certified Store Front Reference Architecture consultants can help you with the migration to SFRA. After site design consultation, your consultant helps you with data migration as required, directing you on the right path and accelerating the migration.

If your SFCC-powered eCommerce website architecture is outdated, your website customer experience – especially on mobile devices – could suffer. Support the growing demand for mCommerce. With modern storefront architecture, you can create optimized, responsive front end design without impacting the back end eCommerce codebase. Are you ready to make the move to SFRA? Talk to our team to learn more.

Salesforce Commerce Cloud (Demandware) Partner Agency – Ziffity