Storefront Template

YaaS Storefront

The YaaS Storefront is a ready-to-use template, and can be set up as a fully transactional storefront within minutes, or you can use the template as a starting point to customize your own features and functionality. The storefront template is fully implemented with SAP Hybris commerce services and third-party services. It is also integrated with Builder modules for configuration and management of available functionality. The main attributes of the YaaS Storefront are the following:

  • Single-page application, written in AngularJS
  • Responsive, mobile-first design
  • Extensible architecture
  • Single and multi-tenant deployment modes
  • Multi-site and localization capabilities

The template’s source code is available at You can download, use, and contribute to it openly. To clone the storefront and run it locally, follow the instructions in the Set Up a Storefront guide, and subscribe to the packages described in the Commerce as a Service guide.

The YaaS Storefront is a standardized and dynamic offering that helps speed up project implementation and business innovation by providing many benefits, such as:

  • Its vanilla design and clean codebase makes it easy to extend and create customized customer experiences.
  • It offers basic, end-to-end commerce functionality out of the box. Some of the main features and functionalities are:
    • Customized homepage banners
    • Navigation based on category taxonomy
    • Product and price display
    • Cart with tax estimation and coupon redemption
    • Guest checkout, and customer accounts integrated with checkout
    • Plug-ins for payment and tax
  • YaaS ensures continuous delivery of new features, improvements, and fixes to the codebase that are freely available for use.
  • It offers full flexibility and scalability to accommodate any growth.

Live demo

To see a live example of the YaaS Storefront template, visit the demo store at the following URL:!/home To place a test order, use the following payment test data:

  • Credit card number: 4242424242424242
  • Input any future card expiration date, in the form: MM/YYYY
  • Input any three numbers in the CVC field, such as: 123
The demo storefront is for demo purposes only, and any orders that are placed are not fulfilled.

Features and functionality overview

The features and functionality available out-of-the-box in the YaaS Storefront template are described in the table below:

PageFeaturesIntegrated ServicesBuilder Module
Configuration and Management
  • Site logo display
  • Algolia search box
  • Link to a pop-up modal to create an account and sign in with email and password, or social media application
  • When signed in, a drop-down menu displays, with links to My account and Sign out
  • Site and language selector
  • One-click access to cart
  • Site
  • Algolia Search
  • Customer
  • Upload site logo in Site Settings
  • Configure the Algolia account details in Algolia Settings
  • Configure social media Application IDs, and set a password reset URL in Customer Settings.
  • Footer
  • Links to social sites
  • Copyright
  • Navigation
  • Three-level category taxonomy navigation
  • Categories
  • Create and activate parent and child categories in Categories
  • Homepage
  • Layout that displays one large and two small banner images
  • Site
  • Upload homepage banners per site in Site Content Settings
  • My Account page
  • Manage account details such as title, name, contact email, and password
  • Manage default and saved addresses in the address book
  • Order history list
  • Customers
  • Orders
  • Order Details page
  • Displays order history details for registered customers
  • Orders
  • Product Category and Search Result Listing pages
  • Breadcrumbs
  • Displays product image, name, and price
  • Infinite scroll
  • Product Details
  • Category
  • Activate and inactivate display of products and categories under Products and Categories
  • Product Details page
  • Displays product image, name, price attributes, and description
  • Link to pop-up modal which displays shipping information
  • Select quantity to add to the cart
  • Add to Cart button
  • Product Details
  • Add and manage product data in Products, link to categories, and add attribute values
  • Manage shipping rates in Shipping Settings
  • Cart
  • Estimated order total calculation
  • Shipping cost estimation
  • Tax estimation
  • Apply coupon
  • Displays items in the cart
  • Change quantity and remove items
  • Continue Shopping and Checkout buttons
  • Cart
  • Manage tax display in Tax Settings
    • Flat rate tax included in price does not display tax as a separate line item in order calculation
    • Flat rate tax excluded in price displays tax as a separate line item in order calculation
    • To enable tax estimations, configure Avalara Tax
  • Create redeemable coupon codes in Coupons to enable customers to apply discounts to orders
  • Checkout page
  • Customer details
  • Localized address forms
  • Pre-populated addresses with an option to select from the address book for registered customers
  • Delivery method options
  • Order preview for display of final order total
  • Payment details
  • Order summary
  • Place Order button
  • Cart
  • Cart calculation
  • Customer
  • Stripe
  • Checkout
  • Shipping
  • Configure payment provider in Payment Settings
  • Order Confirmation page
  • Order summary
  • Account creation for guest checkouts
  • Order
  • Add Social Application IDs in General settings to enable customers to create an account using social media login after checking out as a guest

  • Glossary

    YaaS StorefrontA configurable storefront template that can be further customized for your needs.
    accountAn account created by a customer in the storefront.
    account emailThe login email of a customer account.
    address bookPart of the customer account in which multiple addresses can be saved for use in checkout.
    completedAn order status stating that the order has been completed.
    confirmedAn order status stating that the order has been confirmed and is being processed by an order fulfillment worker.
    coupon codeA unique code used to apply a discount percentage or amount off an order.
    createdAn order status stating that the order has been successfully created in the system.
    delivery methodThe shipping method(s) and fee(s) available and applied to an order.
    estimated taxThe estimated amount of sales tax that will be applied to an order, based on the entered ZIP Code.
    guestA customer that places an order without being signed in to the storefront.
    order historyPart of the customer account in which previously placed orders can be viewed.
    order numberThe unique identifier of an order.
    order statusThe current state of the order workflow.
    order totalThe final payable or paid amount of an order.
    passwordThe login password of a customer account.
    shippedAn order status stating that the order has been processed and picked up by a shipping carrier for delivery to the customer.
    shippingThe shipping cost applied to an order.
    shipping addressThe address used for order delivery.
    subtotalThe summed price of all items added to a cart or in an order.

    • Send feedback

      If you find any information that is unclear or incorrect, please let us know so that we can improve the Dev Portal content.

    • Get Help

      Use our private help channel. Receive updates over email and contact our specialists directly.

    • hybris Experts

      If you need more information about this topic, visit hybris Experts to post your own question and interact with our community and experts.