Alokai Storefront Features

Implemented Features

Alokai Storefront Demo, provides a starting point for developers and acts as an accelerator and a reference in their task of building a storefront.

But, what are those features that come OOTB in Alokai Storefront Demo?

Storefront Demo covers a whole user journey, from Homepage to Checkout, including eCommerce touchpoints detailed below:

Features in this section are available along the entire demo storefront navigation.

Feature Name	Detail	SFUI 2 Components Used
Header	Drives navigation across the storefront, includes company logo, access to categories browsing, search input and action buttons for open cart and login/access to my account	NavbarTop
Footer	Including set of links supporting storefront navigation: How to buy, Help, Services, About, Social Media Links - Static data, no preconfigured for fetching elements from CMS	Footer Basic Block
Search	Uses by default eCommerce search, enabling search by SKU and search by text	Search with custom icon
Language & Currency Selector	Enables customer to change language and currency of the storefront

Features in this section are available and used to build up the home page of the demo storefront.

Feature Name	Detail	SFUI 2 Components Used
Hero Banner	Layout in hero section (Image, Primary button, Secondary button). Data fetched from CMS	Banners-hero
Category Cards	Category cards view including image and category title - category names fetched from eCommerce backend. Static images not fetched from eCommerce backend.	Category Card
Promo Banner	Layout positioned below hero section (Image, Primary button). Data fetched from CMS	Horizontal Display Vertical Display
Product Slider	Set of product cards easy to navigate by swiping / using arrows - products fetched from CMS using its eCommerce backend integration.	Basic Product Slider

Features in this section are available and used to build up the Product Listing Page of the demo storefront.

Feature Name	Detail	SFUI 2 Components Used
Breadcrumbs	Breadcrumb trail consisting on a set of links to parent pages appearing in hierarchical order when category filters are applied	Breadcrumbs
Filters Sidepanel	Includes OOTB: Category, Sort by, Filters (Size, Color) and number of results available per each filter's value - each time a new filter is incorporated in the backend, a new section is created automatically.	Filters
Product Grid	Includes responsive rows of product cards with the number of results presented above of it and pagination element at the bottom and scroll to top functionality	Product Card, Pagination
Product Card	Includes: product image, product price, add to cart button	Product Card Vertical

Features in this section are available and used to build up the Product Details Page of the demo storefront.

Feature Name	Detail	SFUI 2 Components Used
Breadcrumbs	Breadcrumb trail consisting on a set of links to parent pages appearing in hierarchical order when category filters are applied	Breadcrumbs
Gallery of images	Collection of images of the product that can be viewed and navigated	Gallery
Product Information Layout	Product name, Price, Add to Cart (several units) and static shipping information section
Product Stock	Number of items available - stock information
Product Reviews	Product reviews visualization fetched from eCommerce backend product information	Review
"Recommended with this product" Slider	Set of product cards easy to navigate by swiping / using arrows - products are hardcoded (8 first products returned from eCommerce are shown)	Basic Product Slider
Product Variants	Section for choosing among product variants (size)
Product Details	Product description fetched from eCommerce backend
Customer Reviews	Product reviews visualization fetched from eCommerce backend product information	Review

Features in this section are available and used to build up the Cart page of the demo storefront.

Feature Name	Detail	SFUI 2 Components Used
Add / Remove unit from cart	Horizontal product cards enabling the addition or removal product units and even the removal of the entire product from card - clear cart not covered	Product Card Horizontal
Order Summary: Add / Remove promo code	Form enabling adding discount / promotion codes to the entire cart

Features in this section are available and used to build up the Checkout flow in the demo storefront.

Feature Name	Detail	SFUI 2 Components Used
Checkout form	Including Contact Information, Shipping Address & Shipping Details - Billing Address not included OOTB check your specific eCommerce backend docs to see how to enable it	Checkout Address Form
Payment Method Selection	Grid including placeholder for payment methods available	Payment Method
Place Order and Payment	Not available OOTB - check your specific eCommerce backend docs to see how to enable it

Features in this section are available and used to build up the Product Details Page of the demo storefront.

Feature Name	Detail	SFUI 2 Components Used
Log in / Log Out	Log in / Log Out screen
Register	Registration page with form for adding email address and password. Includes strong password validation

Features in this section are available and used to build up the Product Details Page of the demo storefront.

Feature Name	Detail	SFUI 2 Components Used
Settings: Personal Data, Shipping Details	Customer profile information can be added and edited by using forms
My Orders: Orders List and Details	View of customer latest orders - including modal with order details