If you are familiar with Commerce Cloud and are already involved in the development of storefront sites, you may have heard about SFRA many times, even if you use SFRA in your daily life.
For those new to Commerce Cloud, this blog is for you. Travel with us to learn more about SFRA.
The storefront reference architecture demonstrates the best steps/practices needed to develop and customize a storefront site. It’s a starting point for developing storefronts.
First of all, what is a storefront?
Typically, a storefront means the front side of the store facing the street. When it comes to e-commerce, think of the website as the storefront because it virtually takes us to the store.
To build a storefront that meets the needs of our customers, we use SFRA which is considered the best method for building storefronts in e-commerce.
How SFRA implements the site. / SFRA implementation in the site
Let’s understand the architecture of SFRA:
SFRA architecture is cartridge-based i.e. everything is a cartridge, a typical cartridge slack will have these layers:
Why should one shift to SFRA?
- SFRA uses a JavaScript controller and model to render the page.
Example: When searching for a product, the controller processes the user’s request, creates a view model which retrieves the data from SFCC in JSON, and passes the information to render the page.
- As SFRA has discrete cartridges, it is easier to maintain and update contents regardless of each cartridge.
- Mobile First Design: Normally, all storefronts are built for desktops and come with additional code for mobile. But now, 85-90% of the e-commerce market is on the mobile itself. So if mobile is the current trend, it doesn’t make sense to think of the desktop first. Mobile first design for a smaller screen first and then works its way. This is one of the best practices for adaptive design in e-commerce.
- SFRA uses bootstrap UI library, which is an open-source toolkit for developing with HTML, and CSS.
- The link partner is also one which makes SFRA unique, with its robust, rich qualities that merchants can use. A few of the most used famous link cartridges are PayPal, Cybersource, etc.
- Consent tracking in SFRA: You can use SFRA to implement consent tracking on the storefront. Merchants can track personal information about buyers and improve their shopping experience.
All of these unique features make one’s interest shift towards SFRA.
For people who are in the e-Commerce industry like merchants without technical knowledge the above architecture and terminology might be completely new and a bit confusing. So let’s take a real-life example and compare it with the above.
Building a house on own vs Buying a house constructed by a builder
Let’s think that person X is interested in buying a home. So first he thinks of building it on his own.
But these are the challenges one faces when building on own:
1. Search for the engineer, and get the blueprint done.
2. Monitor the house daily, and check the quality of the material such as cement, iron, and sand.
3. Pay the worker a daily salary.
4. If the engineer leaves in between then, the work gets halted and many more things will be left uncompleted.
Building your own house is like building your own eCommerce website in a traditional way like building from scratch, hosting, storing data, and all.
Then his friend suggested that he instead buy a home built by a reputable builder who is a pioneer in the industry.
Next, X and his friend met the Builder (SFRA). The Builder (SFRA) says that the community house has the same design at first, but can be modified according to customizations (such as custom cartridges). The architecture describes it as follows:
Conclusion:
The outstanding features provided by SFRA make it unique in the market. As SFRA comes with the basic storefront with add-on features like cart, and PDP (product detail page) it is beneficial for merchants to easily set up the storefront and the best practices followed to make them achieve the features required by the customers. Once the merchant gets the SFRA the storefront and underlying code base are owned by him.
Do you have a project in mind? Get in touch with us, and we can start talking about how we can help your business grow.
