Storefront template

Our goal was to develop a modern and efficient SAP composable storefront template and starter project. We aimed to include new views, optimize performance, provide components that are easy to customize and upgrade, and implement a Storybook library for better component management.

Picture presents a simple browser mockup showing website containing hero section with text "Style Sportlight" and button "GET MORE" AND four category tiles - shorts. jackets, watch, all categories.
Table of contents

Storefront template

We are your CX Nearshoring Partner Thanks to our exceptional experience we delivered over 120 nearshoring projects in Germany, Switzerland, BeNeLux, UK and North America working with the most prominent brands.

Business benefits

More Customization Control

Unlike standard templates, our solution allows complete customization of the storefront. This flexibility means businesses can tailor every aspect of their online presence.

Unlike standard templates, our solution allows complete customization of the storefront. This flexibility means businesses can tailor every aspect of their online presence.

Improved Customer Experience

We use the latest web design trends to create a visually appealing and easy-to-use interface. This makes the site more attractive, consistent across the whole site and accessible for all users.

We use the latest web design trends to create a visually appealing and easy-to-use interface. This makes the site more attractive, consistent across the whole site and accessible for all users.of their maintenance soon. This means no further updates, critical security patches, or official support from SAP.

Efficient Development and Maintenance

By leveraging Storybook, our template provides a library of reusable components. This setup simplifies the development process, saves time, and ensures consistency across the application, making it easier to maintain and update over time.

By leveraging Storybook, our template provides a library of reusable components. This setup simplifies the development process, saves time, and ensures consistency across the application, making it easier to maintain and update over time.

Ready-Made Essential Pages

Our template includes key pages like categories, FAQ, contact, and privacy policy, unavailable in SAP demo templates. This accelerates setup and enhances user experience by providing organized information and compliance from launch.

Our template includes key pages like categories, FAQ, contact, and privacy policy, unavailable in SAP demo templates. This accelerates setup and enhances user experience by providing organized information and compliance from launch.

Performance Optimization

Our ongoing focus on image optimization and lazy loading techniques significantly boosts site performance. Faster load times can reduce bounce rates and improve search engine rankings, leading to more visitors and better user retention.

Our ongoing focus on image optimization and lazy loading techniques significantly boosts site performance. Faster load times can reduce bounce rates and improve search engine rankings, leading to more visitors and better user retention.

Future-Proofing

By adopting a composable architecture, businesses can future-proof their e-commerce platforms. They can easily adapt to new trends and technologies, ensuring long-term viability and competitiveness.

Provides full range of features to 
help service providers go to market quickly with a solution that meets the unique needs of financial services industries.

Modern UI

Our custom SAP Composable storefront template features a modern design that follows current web trends, making it visually attractive and easy to use. It includes improved navigation and customizable headers to enhance user experience, making it a great option for businesses looking to improve their online store.

Product item view
A man in a blue tshirt, below him label "star ss pacitif blue/clearwater M", below label "No review yet", below "28,31 pounds", below few more variants of the tshirt, below "blue rounded button with white label "Add to Cart"
The image shows a product listing for a DC brand T-shirt. The shirt is the "Star SS athletic red/dark denim" in size Large (L). The SKU for the item is 300605311. It is priced at £28.31 and has a 4-star rating. The main image features a man wearing the red T-shirt with the DC logo. Below the main image, there are smaller thumbnails of the same shirt in different colors. The bottom part of the image has an "ADD TO CART" button.

We've created custom product view component on the Product Listing Page, now featuring added SKU property (and can be easly enhanced with other product properties). Additionally, we've introduced a custom variant component ensuring a seamless and personalized shopping experience for your customers.

Product display page
The image shows a product page for a women's helmet. The helmet is the "TSG Lotus Graphic Designs Wms Butterfly" in size LXL. It is priced at £67.96 and currently has no reviews. The product ID is 300062456. The main image on the left features the black helmet with a graphic design on the front. On the right, there are options to select the quantity and add the item to the cart. Below the "Add To Cart" button, there is an option to sign in to add the item to a wish list.
The image shows a product page for a women's helmet. The helmet is the "TSG Lotus Graphic Designs Wms Butterfly" in size LXL. The product ID is 300062456. The helmet is on sale for £10.00, down from a regular price of £67.96. The lowest price in the last 30 days was £20.00. The main image on the left features a black helmet with a graphic design on the front. On the right, there are options to select the quantity and add the item to the cart. Below these options, there are choices for shipping or free in-store pickup. Users can sign in to add the item to a wish list. Product details and features are listed at the bottom of the page.

We've relocated the product title from the breadcrumb to the right section and updated the breadcrumb styles for a cleaner look. Additionally, we've modernized the size picker with tiles instead of a dropdown, added an upsell carousel below the main product details, and moved the product information section to the right for better layout and usability.

Main navigation
The image displays a navigation menu featuring categories like BRANDS, STREETWEAR, SNOW, ACCESSORIES, and YOUTH. Below these categories, there is a comprehensive list of brand names organized into columns, including well-known brands such as adidas Originals, Billabong, Carhartt, Nike, Quiksilver, Vans, and many others.
The image displays a navigation menu featuring categories like BRANDS, STREETWEAR, SNOW, ACCESSORIES, and YOUTH. Below these categories, there is a comprehensive list of brand names organized into columns, including well-known brands such as adidas Originals, Billabong, Carhartt, Nike, Quiksilver, Vans, and many others.

We've revamped the main navigation component using Bootstrap, ensuring it now functions smoothly. Previously, the menu expanded only when hovering over an arrow; now, it also expands when you hover over the category name for easier navigation.

Category tiles
The first section shows a smiling woman with the text "SHOP WOMEN" at the bottom.   The second section shows a man with a neutral expression and the text "SHOP MEN" at the bottom. The third section shows a happy teenager wearing sunglasses and headphones, with the text "SHOP TEENS" at the bottom. The fourth section displays the Oakley logo with the text "SHOP BRANDS" at the bottom.
This image is a collection of four individual pictures, each representing a different product category. The first picture shows a person walking on a beach wearing a light blue shirt with white shorts, and it has the word "SHORTS" written across it. The second picture features a person standing outdoors in a mountainous area wearing a green jacket, with the word "JACKETS" written on it. The third picture is a close-up of a person in a white shirt, adjusting a watch on their wrist, with the word "WATCH" written across it. The fourth picture displays a variety of clothing items, including a plaid scarf, leather shoes, a belt, and a sweater, with the words "ALL CATEGORIES" written over it.

We designed a custom category tile that allows easy customization of text and background images, unlike the default static pictures. Additionally, we've added a hover animation and created an 'All Categories' tile that redirects users to a custom Categories Page for better navigation.

Custom components

Our template is designed for growth. Unlike pre-made Spartacus components that have limited styling options, our template lets you control every detail of your online store. With custom components, you have the power to tweak how everything looks, works, and behaves.

Hero carousel
The image shows two people dressed in winter sports gear, including helmets and goggles, against a snowy mountainous backdrop. One person is raising their hand holding a red object, possibly a phone. The text on the image reads, "UNVEILING OUR NEW ARRIVALS" and "Style Spotlight" with a button below labeled "GET NOW." The scene suggests a focus on new winter sportswear arrivals.

We developed a responsive, animated hero carousel using Bootstrap that allows for easy editing of texts, button, and images. This feature, which is not included in the default SAP library, enhances the visual appeal and flexibility of your storefront's main banner.

Promo banner
The image features a fashion advertisement. On the left side, there is text in white against a black background that reads: "SEARCHING FOR YOUR SIGNATURE STYLE? Discover an exquisite collection of fashion-forward pieces meticulously curated to speak to your unique individuality." Below the text, there is a button labeled "GET MORE." On the right side, there is a close-up of a woman wearing a black oversized T-shirt, with her head partially out of the frame. The background is a plain, light gray color.

We created a fully customizable component for displaying the latest promotions, allowing you to easily change the text, button, and image. This feature, not included in the SAP library, provides flexibility to keep your promotions current and engaging.

Mini cart
The image shows a shopping cart summary from an online store. There are two items listed: Helmet Women TSG Lotus Graphic Designs wms Butterfly LXL priced at £67.96 with a quantity of 1. Star SS athletic red/dark denim L priced at £28.31 with a quantity of 1. The subtotal for both items is £86.65. There are options to "Clear cart" and "View cart" at the bottom of the summary.

We developed an expandable, animated mini cart component that displays the subtotal and items added to the cart, a feature not included in the default SAP library. This enhancement provides a more dynamic and convenient shopping experience for users.

Store benefits
Three icons describing services provided by a store. The first icon is a delivery truck with the text 'Free Shipping: Enjoy the convenience of free shipping on all orders, saving you money while enhancing your shopping experience.' The second icon is a package with arrows indicating return with the text 'Easy Return Policy: Shop with confidence knowing that returning items is hassle-free, making your shopping experience stress-free and enjoyable.' The third icon is a person wearing a headset with the text '24/7 Service: Get assistance anytime, day or night, ensuring your questions are promptly answered and issues swiftly resolved

We added a dedicated section on the homepage to highlight the benefits of shopping at your store, such as shipping details, customer service, and product quality. This feature, which is not included in the SAP library, helps build trust and informs customers about the advantages of choosing your store.

Additional pages

In addition to default pages, our Storefront Template includes essential pages such as categories page, contact us, faq, privacy policy - providing users with organized content and simplified navigation to find relevant information quickly.

Categories page
Fashion categories displayed with images and product types: jeans, hoodies, shoes, t-shirts, cardigans, jackets & coats, nightwear, and skirts. Each category features a person modeling the clothing item

Our template includes custom pages like a categories page, which the default SAP template doesn't have. This makes it easier for users to navigate the site and find products in specific categories, rather than getting lost in a generic layout.

FAQ page
Frequently Asked Question section with questions: What is your return policy? Do you offer free shipping? How can I track my order? What sizes do you carry? The answer to the return policy is displayed, stating you can return any item within 30 days of purchase as long as it is in its original condition and packaging, with a receipt or proof of purchase

We created a custom FAQ page featuring popular accordion components that contain the most common questions and answers. This essential page, which is missing in the default SAP template, helps users quickly find the information they need.

Contact
Contact us form with fields for Name, Email, Subject, and Message, along with a person holding a smartphone and using a laptop on the left side.

We added a contact page to our template, which includes a contact form with proper data validation. This form can be submitted to relevant management systems, ensuring efficient handling of customer inquiries.

Storybook

Leveraging Storybook, the project includes a comprehensive library of reusable components, allowing for efficient development and consistent UI across the application. Developers can easily browse, test, and reuse components within the project.

Documentation in Storybook
Storybook interface displaying a promo banner. The left panel shows various components like Product Details and Homepage. The main area shows a promo banner with the text 'SEARCHING FOR YOUR SIGNATURE STYLE?' next to an image of a person in a black shirt

We integrated Storybook into our template, fundamentally transforming the development approach. This integration offers numerous benefits, including improved component isolation and an enhanced developer experience. Additionally, Storybook provides effective documentation, making it easier for developers to understand and use components efficiently.

Component examples
Hero carousel
Promotion banner
Social media section

120+ brands trusted us

UFA Ltd.

B2B Transformation in 12 Weeks. Tailored SAP Commerce with seamless integration.

Coca-Cola Hellenic Botteling Company

Fast-track Trade Management. Standard SAP functionalities in 25 weeks.

Porsche

SAP CRM Development, SAP CRM IC Implementation.

Wella

SAP Service Cloud Implementation for Efficient Complaint Management.

Pfleiderer

SAP Commerce Implementation and Integration with SAP ERP for B2B Online Store.

image/svg+xml

Unilever

SAP CRM TPM Prototype Implementation.

Continental

SAP CRM System Service Contract and Usage Base Billing Implementation.

image/svg+xml

Nestlé

SAP CRM TPM Implementation
Global Upgrade.

P&G

SAP CRM TPM Implementation. Comprehensive SAP ECC integration and system optimization.

Your Queries, Our Responses

Frequently
asked questions

In what business areas can NSP support us?

Retail execution management

Create a consistently positive customer experience in your store

Promotion management

Increase revenue and market share - optimize the utilization of tools, strategies, and resources to promote a product

Promotion optimization

Automate and streamline the planning, evaluation, and execution

Pricing strategies

Determine and implement the most effective pricing strategy

Field service management

Digitalize field service and optimize operations

Return and complaint management

Minimize costs and understand customer needs

What technologies are in your portfolio?
  • SAP Commerce Cloud (B2B, B2C)
  • SAP Sales / Service Cloud
  • SAP Marketing
  • SAP Business Technology Platform (BTP) Development
  • SAP Business Process Automation
  • SAP S/4Hana
  • SAP ERP
  • SAP CRM
What is the delivery model and what benefits does it offer?

The delivery model involves 4 key points, it is focused on effective communication, continuous improvement, and clear roles and responsibilities.

  • Team Preparation – named and fixed resources dedicated to the project
  • Knowledge Transfer & Alignment – onboarding, getting to know each other, common calendar, common knowledge
  • Service Delivery – SLA, daily standups routine, JIRA ticketing, priorities
  • Retrospective – every 3 weeks joint improvement session
Can I work with you if I’m not a big brand?

Many of SAP products are targeted to medium and large companies, however we do not restrict ourselves with company size and we always treat seriously and professionally any cooperation proposals.

How can I get an estimation of service implementation?

Most projects are estimated individually. Please contact us to request an estimate for one of our ready-to-go packages, or to schedule an assessment phase. The assessment phase includes a workshop to evaluate the development stage and define the project scope, followed by planning sessions for time and cost estimation, and ends with a solution presentation workshop.

How the implementation process looks like ?

Assessment Phase

  • Workshop – to assess development stage
  • Scope Definition
  • Time estimation
  • Cost estimation
  • Solution presentation workshops

Delivery

  • Introduce teams and establish communication channels
  • Discuss project goals, requirements, and timelines
  • Requirements Development

Testing

  • Prepare Test scenarios and Test Cases
  • User Acceptance Tests

Go-Live

  • Move solution from development to other tenants in the landscape
  • Support during deployment to Production

Post-Go-Live

  • Prepare and handover documentation
  • Optional post-go-live support as an additional service
Can I request a proof of concept?

Yes, to request a proof of concept of our services simply fill out the contact form available on our website. Once you've submitted the form, we will schedule an assessment phase where workshops will be conducted, and the functional requirements of the PoC will be discussed.

How can I contact NSP?
  • Make a call: +48 604 279 798
  • Send an email: contact@nsp.biz.pl
  • Contact via LinkedIn with CEO Bartosz Szumiel

Need advice?
Talk to our experts

Our team of experts is here to help. Schedule a consultation today and let's discuss how we can elevate your business to new heights.