Marketplace Storefront

Edit on GitHub

Marketplace Storefront is a web application designed for the marketplace business model. Based on the regular Storefront, it supports all Spryker Commerce OS features. Marketplace functionality lets buyers browse for products and view and purchase them across different merchants.

In most sections of the Marketplace Storefront, customers can see who the seller of a product or offer is.

Catalog and Search pages

On the Catalog and Search pages, the left-side navigation menu contains the Merchant filter. Customers can select one or more merchants from which to view products or offers.

Catalog and Search pages

If searching by merchant name in the search field, products and offers of the relevant merchant are displayed in the search suggestions and search results.

Product Details pages

On the Product Details page, the Sold by section contains the marketplace products and the offers from other merchants for that product. Each entry has a price and a link to the respective merchant’s profile page.

Product Details page

In the Sold by section, when a customer opens a Product Details page, the product is pre-selected, and they can switch to any other offer. In the list, the pre-selected marketplace product always appears first, followed by offers in ascending order of price. If the product is not available, but there are offers for it, the cheapest offer is pre-selected.

Sorting of the Sold by section is configurable on a project level.

The product price on top of the Product Details page is taken from the selected merchant’s product or offer. When a customer selects a product or offer in the Sold by section, the page refreshes, showing the selected merchant’s price.

Cart page

On the Cart page, a merchant reference is displayed for each product. The merchant names are clickable and lead to the merchant profile pages.

In the Quick Add to Cart section, a customer can find and add marketplace products and product offers of a specific merchant by entering a product name or SKU in the search field and selecting the needed product. If there are several merchants selling the selected product, a drop-down with such merchants appears. Then, the customer selects a preferable merchant, enters quantity, and adds the item to the cart.

Cart page

Shopping lists page

When a customer creates, opens, or edits a shopping list, they can use the Quick add to shopping list section to search marketplace products and product offers and add them to the shopping list. To search for a specific product, the customer enters an SKU or product name in the search field of the section.

products-and-offers-in-quick-add-to-shipping-list-page

Quick Order page

On the Quick Order page, in the Merchants drop-down, customers can select a particular merchant to buy marketplace products and product offers. In this case, when they type in a product name or SKU, a product or offer from only a selected merchant is found. Alternatively, a customer can select the All Merchants option to buy from all merchants. If a customer changes the merchant for already selected marketplace products or product offers, some fields may change—for example, Price. If a customer selects all merchants, then the marketplace products and product offers of all merchants are found.

products-and-offers-on-quick-order-page

Checkout

At the Shipment checkout step, a merchant reference is displayed for each item. The merchant names are clickable and lead to the merchant profile pages.

If a customer is ordering products from multiple merchants, the products are going to be shipped from multiple locations, so the shipments are automatically grouped by merchants.

Shipment step

At the Summary checkout step, merchant reference is displayed for each product. The merchant names are clickable and lead to the merchant profile pages. If a customer orders products from multiple merchants, the products are automatically grouped by merchants, which also represents the order’s shipments.

Summary step

Order Details pages

On the Order Details page, a merchant reference is displayed for each product. Merchant names are clickable and lead to merchant profile pages. If a customer orders products from multiple merchants, the products are grouped by merchants, which also represents the order’s shipments.

Order Details page

If a customer clicks Reorder all, the items are added to their current cart with merchant references from the order.

Marketplace returns

On the Create Return page, products are grouped by merchants. Merchant names are clickable and lead to the merchant profile pages. A customer can return products from one merchant at a time. After creating a return for the products of one merchant, they can create a return for the products of another merchant from the same order.

Create Return page

The Return Details page follows the same behavior.

Marketplace wishlists

When a customer adds a product to a wishlist, the product is added with the merchant relation selected in the Sold by section.

On the page of the wishlist, a merchant relation is displayed for each product. Merchant names are clickable and lead to the merchant profile pages.

Wishlist page

If, after a product was added to a wishlist, a merchant becomes inactive, the merchant reference is no longer displayed for the product and the customer can’t add it to cart. If the merchant becomes active again, the relation is displayed, and the customer can add the product to cart.

If a product in a wishlist is out of stock, an alternative product can be displayed. A merchant reference is displayed for the alternative product. Currently, merchant offers are not supported by alternative products, so only marketplace products can be displayed there.

Marketplace shopping lists

When a customer adds a product to a shopping list, the product is added with the merchant relation selected in the Sold by section.

gif

Merchant profiles

A merchant profile is a page where all the information about a merchant is located. From all the pages where a Merchant is mentioned, customers can access the merchant profile by selecting the merchant name.

On the Merchant Profile page, customers can find the following merchant-specific information:

  • Logo
  • Banner
  • Contact details and address
  • Estimated delivery time
  • Regular and special opening hours
  • Terms and conditions
  • Cancellation policy
  • Imprint
  • Data privacy statement

Customers can access only the profile pages of active merchants.

For an example, see the Spryker merchant profile in our Marketplace Demo Shop.

Merchant Portal