Design and Implementation of a Configurable System for Adding New Products at Shopee

In 2019 Shopee launched a merchant service app in a Southeast Asian market that offered digital goods such as prepaid phone credit, data packages, game cards, and utility bill payments. The app quickly grew to host hundreds of products, creating a major challenge: how to onboard new products quickly, at low cost, while handling diverse purchase flows and information (product, order, receipt, etc.).

The original product onboarding process required close coordination between admin, front‑end, and back‑end teams, leading to high communication overhead, mismatched schedules, and complex multi‑service modifications.

To address these issues, the Shopee Merchant Services team designed a visual, configurable onboarding solution. By abstracting the purchase flow into reusable business templates and moving most configuration tasks to the admin side, the responsibility for product onboarding shifted from developers to operations staff.

目录

1. 背景
2. 新增商品的演进之路
    2.1 商品的初代上架流程
    2.2 商品上架流程改造
3. 新增商品可配置系统
    3.1 如何设计配置化系统
    3.2 流程配置模块
    3.3 信息配置模块
    3.4 应用侧渲染流程
    3.5 可配置化系统——Flow
4. 总结

The evolution started with a manual, multi‑step onboarding flow that involved uploading product data via an admin portal, backend data preparation, and front‑end integration of purchase entry points. This approach suffered from unclear responsibilities, schedule conflicts, and heavy development effort.

The team then migrated to a configuration‑driven model. The new system decomposes the onboarding process into six independent configuration modules: entry, middle, billing information, order information, receipt information, and SMS information. These modules are grouped into two higher‑level categories—process configuration and information configuration.

Process configuration modules (entry and middle) define the actual purchase flow templates, while information configuration modules handle the data presented to users. For example, the receipt configuration module provides a three‑panel layout (left: field editing, center: preview, right: style editing) and supports a field pool to reuse common receipt fields across products.

On the client side, the rendering pipeline works as follows: the request passes through a gateway to a BFF service, which fetches the HTML receipt template from a CDN and the corresponding receipt data using the order ID. The data is injected into the template to produce an HTML string, which is then sent to a React Native WebView for preview and, via a bridge, to the device printer.

The configurable system is encapsulated in a unified “Flow” that links products to specific configuration flows. It also includes import/export capabilities for cross‑environment migration. Special‑case products that cannot be fully covered by templates are handled by adding custom entry points while still leveraging shared configuration modules.

After two iterations, the system reduced the need for front‑end/back‑end code during product onboarding, allowing product operators to add and edit products directly in the admin console. Early metrics show a 75% improvement in product launch efficiency during the development phase.

The team also established onboarding standards and built a pre‑check tool to validate product configurations, further streamlining the process.