The Vue Storefront Essentials Course is now available! Learn More
Storefront Starter Features

Storefront Starter Features

Implemented Features

Storefront Starter Demo, provides an 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 Storefront Starter Demo?

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

  • Home Page
  • Product Listing Page
  • Product Detail Page
  • Cart
  • Checkout
  • My Account & User Authentication

General

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

Feature NameDetailSFUI 2 Components Used
HeaderDrives navigation across the storefront, includes company logo, access to categories browsing, search input and action buttons for open cart and login/access to my accountNavbarTop
FooterIncluding set of links supporting storefront navigation: How to buy, Help, Services, About, Social Media Links - Static data, no preconfigured for fetching elements from CMSFooter Basic Block
SearchUses by default eCommerce search, enabling search by SKU and search by textSearch with custom icon
Language & Currency SelectorEnables customer to change language and currency of the storefront

Homepage

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

Feature NameDetailSFUI 2 Components Used
Hero BannerLayout in hero section (Image, Primary button, Secondary button). Data fetched from CMSBanners-hero
Category CardsCategory cards view including image and category title - category names fetched from eCommerce backend. Static images not fetched from eCommerce backend.Category Card
Promo BannerLayout positioned below hero section (Image, Primary button). Data fetched from CMSHorizontal Display Vertical Display
Product SliderSet of product cards easy to navigate by swiping / using arrows - products fetched from CMS using its eCommerce backend integration.Basic Product Slider

Product Listing Page

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

Feature NameDetailSFUI 2 Components Used
BreadcrumbsBreadcrumb trail consisting on a set of links to parent pages appearing in hierarchical order when category filters are appliedBreadcrumbs
Filters SidepanelIncludes 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 GridIncludes responsive rows of product cards with the number of results presented above of it and pagination element at the bottom and scroll to top functionalityProduct Card, Pagination
Product CardIncludes: product image, product price, add to cart buttonProduct Card Vertical

Product Details Page

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

Feature NameDetailSFUI 2 Components Used
BreadcrumbsBreadcrumb trail consisting on a set of links to parent pages appearing in hierarchical order when category filters are appliedBreadcrumbs
Gallery of imagesCollection of images of the product that can be viewed and navigatedGallery
Product Information LayoutProduct name, Price, Add to Cart (several units) and static shipping information section
Product StockNumber of items available - stock information
Product ReviewsProduct reviews visualization fetched from eCommerce backend product informationReview
"Recommended with this product" SliderSet 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 VariantsSection for choosing among product variants (size)
Product DetailsProduct description fetched from eCommerce backend
Customer ReviewsProduct reviews visualization fetched from eCommerce backend product informationReview

Cart

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

Feature NameDetailSFUI 2 Components Used
Add / Remove unit from cartHorizontal product cards enabling the addition or removal product units and even the removal of the entire product from card - clear cart not coveredProduct Card Horizontal
Order Summary: Add / Remove promo codeForm enabling adding discount / promotion codes to the entire cart

Checkout

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

Feature NameDetailSFUI 2 Components Used
Checkout formIncluding Contact Information, Shipping Address & Shipping Details - Billing Address not included OOTB check your specific eCommerce backend docs to see how to enable itCheckout Address Form
Payment Method SelectionGrid including placeholder for payment methods availablePayment Method
Place Order and PaymentNot available OOTB - check your specific eCommerce backend docs to see how to enable it

User Authentication

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

Feature NameDetailSFUI 2 Components Used
Log in / Log OutLog in / Log Out screen
RegisterRegistration page with form for adding email address and password. Includes strong password validation

My Account

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

Feature NameDetailSFUI 2 Components Used
Settings: Personal Data, Shipping DetailsCustomer profile information can be added and edited by using forms
My Orders: Orders List and DetailsView of customer latest orders - including modal with order details