> For the complete documentation index, see [llms.txt](https://developer.emporix.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.emporix.io/frontend/overview.md). # Overview When a customer arrives at the storefront, the homepage acts as the starting point for the shopping journey. At the top of the page, the customer sees a navigation bar with quick links to all the main areas, from browsing categories and viewing new collections to checking the account and cart. A search bar is always within reach, so the customer can find specific products instantly. As the customer scrolls down the page, the navigation bar remains visible but transitions to a more compact format to avoid disrupting the shopping experience. At the front, there is also a dynamic banner showing current promotions, new arrivals, or seasonal offers. Depending on tenant customization settings, these displays can also function as featured product sections. For example, a customer can quickly scan each item along with its image, name, and price. From there, the customer can either select an item to see more details or add it directly to the cart or wishlist. A customer can also find personalized recommendations on the homepage. These suggestions are based on previous browsing activity and interactions. It is an easy way to discover relevant items without searching. ### Navigation and browsing

Default product filtering with category filter and sorting

Products are organized in a hierarchical category structure that customers can browse through the main navigation menu. Customers can navigate through categories and subcategories, and use the breadcrumb trail at the top of the page to see the current location and navigate back to previous levels. The frontend also includes a search bar that allows customers to quickly find products by product name, item number, or keywords. #### Browsing by category and filtering By default, customers can filter by category and sort the product list — for example, by product name in ascending or descending order. When BatteryIncluded is configured as the active indexing provider, the storefront renders category pages from live catalog data indexed in BatteryIncluded. The main navigation menu dynamically reflects the current category structure, so developers do not need to build and maintain a separate menu from static data. On a category page, customers see the category name, product count, and description at the top, along with a breadcrumb trail for quick navigation back to parent levels. A sidebar lists the category hierarchy — including subcategories with product counts — so customers can drill down from broad categories into more specific ones. Selecting a subcategory updates the product list and active filters without leaving the page.

Category page with sidebar navigation, breadcrumbs, and facet filters

The same category navigation is available on product list and search results pages, helping customers move from a wide product listing or search query into a focused category view rather than scrolling through an unfiltered flat list. On product listing and search results pages, customers can narrow down the results using filters and sorting options. The available filtering and search experience depends on whether a search provider is configured for the tenant. When BatteryIncluded is configured as the active indexing provider, the storefront exposes advanced facet filtering on product listing pages. Customers can browse categories in a sidebar, apply multiple filters at once, such as brand, price range, and product highlights. They can also clear all active filters with one action. Filter options reflect the product attributes indexed in BatteryIncluded, including custom mixin fields configured through the Indexing Service.

Advanced product filtering with BatteryIncluded facets

{% hint style="info" %} To configure BatteryIncluded for the B2B Commerce Frontend, see the [BatteryIncluded Search Provider](/ce/system-management/search/batteryincluded.md) guide. It covers native Indexing Service setup, portal configuration (variables, searchable fields, synonyms, and facets), and how those settings appear in storefront search. For background on integration paths and indexing strategies, see also [Search](/ce/system-management/search.md) and [Indexing Service](/ce/system-management/search/indexing.md). Tenants can also integrate Algolia or other search engine providers. BatteryIncluded is the recommended native integration for facet-based product discovery in the B2B Commerce Frontend. {% endhint %} ### Product details page

Product details page with images, pricing, and specifications

When a customer selects a product, the customer is taken to the product details page, which displays multiple product images, comprehensive product information including title, item number, and promotion badges, as well as customer ratings and pricing details with VAT breakdown. The page shows availability status, shipping costs, and reservation options, along with trust indicators like warranty information and return policies. Customers can add products to the cart directly from the product page, specify quantities, and view detailed specifications, descriptions, and product highlights that explain the product's features and benefits. ### Product comparison From product listing and product details views, customers can add products to a comparison list and then open the comparison page to review specifications side-by-side. Rows with differences between compared products (for example, **Price**) are highlighted in bold so they are easier to spot.

Adding products to comparison from product listing

Product comparison view with side-by-side specifications

#### Ordering and checkout As customers add products, items appear in the shopping cart where selections can be reviewed before placing an order. Customers can update quantities, remove items, and review totals at any time.

Cart view

Customers can proceed to checkout either as registered users or as guests. Guest checkout allows customers to place orders without creating an account, while still generating an order record that the merchant can process in the management dashboard. During checkout, customers provide shipping and billing details, choose delivery and payment options, and review the final order summary. Promo or coupon codes can be applied during this step, with updated totals displayed immediately. For B2B scenarios, additional purchasing flows are available. Customers can request a quote directly from the cart, allowing merchants to review the request and respond with a negotiated offer. Some organizations may also use approval-based purchasing, where an order is submitted internally for approval before it is finalized. Once the order is confirmed, it becomes visible to both the customer and the merchant, marking the completion of the storefront journey. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://developer.emporix.io/frontend/overview.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.