Designing an E‑commerce SaaS Shop Decoration System: Architecture, Template Protocol, and Designer Components

All major e‑commerce platforms provide shop‑decoration capabilities; a well‑designed decoration improves user experience, brand image, conversion rate, and retention, while opening the platform to third‑party developers and a marketplace creates revenue for SaaS providers, merchants, and developers.

The article outlines a step‑by‑step design from 0 to 1, covering overall design, template‑protocol design, and the three essential parts of the decoration designer.

Key design principles are usability, operational efficiency, and customizability. The system must generate pages for multiple endpoints (H5, mini‑programs) and expose open APIs and front‑end extension points for rapid customization.

Two technical approaches exist: server‑side template syntax (high customizability, higher cost) and front‑end template protocol (lower cost, unified deployment). The article adopts the front‑end protocol, leveraging MVVM frameworks (Vue, React, Angular) to drive rendering from a JSON data structure.

The template‑protocol core data structure includes page information, containers/layout, and component definitions. The hierarchy is simple: page → containers → items → component.

Example of a template‑protocol JSON:

{
  id: 'page_01',
  theme: {
    name: 'default',
    color: '#000000',
    assistColor: '#cccccc'
  },
  containers: [{
    id: 'container_01',
    gutter: 10,
    items: [{
      id: 'container_item_01',
      span: 24,
      background: '',
      component: {
        id: 's_header_01',
        name: 's-header',
        props: {
          color: '#999999',
          align: 'center',
          title: 'Hello World!'
        }
      }
    }, {
      id: 'container_item_02',
      span: 24,
      background: '',
      component: {
        id: 's_header_01',
        name: 's-image',
        props: {
          color: '#999999',
          src: ''
        }
      }
    }]
  }]
}

The decoration designer consists of three core components:

Component Selector – fetches available components from the server and supports drag‑and‑drop (e.g., Vue.Draggable, Dragula) using mouse events onmousedown, onmousemove, onmouseup.

Renderer – has runtime and design‑time modes. The design‑time renderer builds the page from the template protocol and allows editing. Example Vue renderer code:

<view class="s-renderer">
  <view class="container" v-for="(container, idx) in protocol.containers" :key="idx" :id="container.id">
    <view class="container-item" :span="24" :id="item.id" v-for="(item, itemIndex) in container.items" :key="itemIndex">
      <component :is="item.component.name" v-bind="item.component.props"></component>
    </view>
  </view>
</view>

Property Editor – generates a form from component props so that editing is WYSIWYG. Example of extending component props and rendering a form model:

// Extend component props
component: {
  id: 's_header_01',
  name: 's-header',
  props: {
    color: { name: '颜色', type: 'input', value: '#999999' },
    align: { name: '对齐方式', type: 'select', options: [], value: 'center' },
    title: { name: '标题', type: 'input', value: '这是输入框' }
  }
}

<form-model class="props-editor">
  <form-model-item v-for="(attr, key) in props" :key="key" :label="attr.name" :prop="key">
    <component :is="attr.type" v-bind="attr"></component>
  </form-model-item>
</form-model>

Cross‑platform support is achieved with frameworks such as Taro, Remax, and Uni‑app, which compile a unified syntax to multiple targets. Dynamic components are handled either at runtime (AMD‑style modules for H5) or at compile time (on‑demand bundling for mini‑programs).

Continuous evolution focuses on improving user experience (usability, usefulness, reliability), building an ecosystem (developer center, decoration market), and productization (supporting multiple industries, version management, component interaction, security, and performance).

In summary, the article presents a complete 0‑to‑1 guide for an e‑commerce SaaS shop‑decoration system, detailing overall architecture, template‑protocol design, and the three designer components, and outlines the next steps needed to evolve the product from a prototype to a commercial solution.