店鋪裝修功能設(shè)計的目的在于為商家提供快速便捷的店鋪搭建工具，配合店鋪作為商家運營的發(fā)力點。除了基礎(chǔ)組件的設(shè)計外，營銷插件能夠為商家維系品牌、提升復購。那么在設(shè)計多商戶系統(tǒng)時，如何做好店鋪裝修功能設(shè)計，本篇文章定能給你帶來啟發(fā)，值得閱讀。

一、簡介

店鋪裝修是店鋪后臺的重要組成部分，店鋪管理員通過店鋪裝修功能，進行店鋪首頁、分類頁面、微頁面和底部導航進行裝修設(shè)計，本文檔主要介紹店鋪裝修的功能介紹和操作說明。

1.1 目的

軟件需求是軟件開發(fā)的依據(jù)，也是軟件工程各項活動的基礎(chǔ)。編寫本操作的目的就是將店鋪裝修的需求清晰準確地描述清楚，為運營人員和店鋪管理員的工作提供可靠的依據(jù)。

1.2 范圍

本文檔閱讀對象為項目經(jīng)理、市場人員、店鋪管理員、店鋪運營等崗位。

二、產(chǎn)品概述

2.1 總體功能架構(gòu)圖

三、操作說明

基礎(chǔ)組件

3.1.1 彈出廣告

頁面截圖：

彈出廣告

選擇鏈接

操作說明：

彈出廣告主要用于用戶訪問店鋪主頁時的廣告設(shè)置；設(shè)置內(nèi)容包含：彈出鏈接、彈出廣告和彈出形式；

1. 點擊彈出鏈接的【請選擇鏈接】，彈窗顯示選擇鏈接頁面，鏈接類型包含：商城頁面、商品、小游戲、自定義鏈接、其他小程序；
2. 點擊彈出廣告的【上傳】按鈕，可選擇店鋪已存在的圖片，圖片尺寸建議在362px*502px;
3. 彈出形式包含：不彈出、首次彈出和每次彈出；默認為不彈出；

3.1.2 文本

頁面截圖：

文本

風格選擇

操作說明：

文本主要用于設(shè)置功能模塊的標題欄內(nèi)容；

文本的設(shè)置內(nèi)容包含：模板樣式、文本名稱、鏈接地址、文字大小、文本顏色、背景顏色和頁面間距；

1. 點擊模板樣式的【選擇】，彈窗風格選擇頁面，可選擇文本的展示風格和形式；
2. 文本名稱用于設(shè)置文本內(nèi)容；
3. 點擊鏈接地址的【請選擇鏈接】，彈窗顯示選擇鏈接頁面，鏈接類型包含：商城頁面、商品、小游戲、自定義鏈接、其他小程序；
4. 字體大小用于設(shè)置文本名稱的展示字體大??；
5. 文本顏色用于設(shè)置文本名稱的展示字體顏色；
6. 背景顏色用于設(shè)置文本域的背景顏色信息；
7. 頁面間距用于設(shè)置文本域的寬度；

3.1.3 公告

頁面截圖：

操作說明：

公告主要用于維護店鋪主頁的店鋪公告內(nèi)容；

公告的設(shè)置內(nèi)容包含：模板樣式、公告內(nèi)容和鏈接地址、背景顏色和頁面間距；

1. 點擊模板樣式的【選擇】，彈窗風格選擇頁面，可選擇公告的展示風格和形式；
2. 公告的內(nèi)容和鏈接地址主要設(shè)置公告的內(nèi)容和跳轉(zhuǎn)鏈接；公告內(nèi)容和鏈接地址可設(shè)置多條；
3. 背景顏色用于設(shè)置公告域的背景顏色信息；
4. 頁面間距用于設(shè)置公告域的寬度；

3.1.4 圖文導航

頁面截圖：

圖片導航

文字導航

操作說明：

圖文導航主要用于設(shè)置店鋪導航（菜單）；

圖文導航的設(shè)置內(nèi)容包含：選擇模板、展示形式和圖文導航的內(nèi)容；

1. 選擇模板用于設(shè)置圖文導航的形式，圖文導航包含圖片導航和文字導航兩種，默認為圖片導航；
2. 展示內(nèi)容用于設(shè)置圖文導航的內(nèi)容數(shù)量，可選擇三個、四個或者五個，默認為四個；
3. 模板樣式為圖片導航時，圖文導航內(nèi)容包含：圖片、標題和鏈接地址；模板樣式為文字導航時，圖文導航內(nèi)容包含：標題和鏈接地址；

3.1.5 圖片廣告

頁面截圖：

單圖模式

輪播海報

橫向滑動

操作說明：

圖片廣告主要用于設(shè)置店鋪主頁的圖片廣告；

圖片廣告的類型包含：單圖模式、輪播海報和橫向滑動三種；默認類型為單圖模式；

1. 單圖模式設(shè)置內(nèi)容包含：圖片圓角（直角或者圓角）、圖片上傳（一張）、鏈接地址（一張）和頁面間距；
2. 輪播海報設(shè)置內(nèi)容包含：圖片圓角（直角或者圓角）、輪播切換（圓點或者直線）、圖片上傳（多張）、鏈接地址（多張）和頁面間距；
3. 橫向滑動設(shè)置內(nèi)容包含：圖片間隙、圖片圓角（直角或者圓角）、圖片上傳（多張）、鏈接地址（多張）和頁面間距；

3.1.6 商品搜索

頁面截圖：

樣式一

樣式二

操作說明：

商品搜索主要用于設(shè)置店鋪內(nèi)商品搜索功能；

模板的展示類型包含：樣式一和樣式二；默認類型為樣式一；

1. 樣式一設(shè)置內(nèi)容包含：文本名、文字顏色、背景顏色、框體顏色、文本位置（居左或者居中）和框體樣式（方形或者圓形）；
2. 樣式二設(shè)置內(nèi)容包含：文本名、圖片上傳（單張）、文字顏色、背景顏色、框體顏色、文本位置（居左或者居中）和框體樣式（方形或者圓形）；

3.1.7 富文本

頁面截圖：

操作說明：

1. 富文本主要用于設(shè)置店鋪主頁的文本編輯內(nèi)容；
2. 設(shè)置內(nèi)容為文本編輯器，可設(shè)置圖片或者文字；

3.1.8 魔方

頁面截圖：

操作說明：

1. 魔方主要用于設(shè)置店鋪主頁的熱門廣告；
2. 模板類型包含：1行2個、1行3個、1行4個、2左2右、1左2右、1上2下、1左3右；
3. 設(shè)置內(nèi)容：圖片上傳、鏈接地址、圖片間隔和背景顏色；

3.1.9 輔助線

頁面截圖：

操作說明：

1. 輔助線主要用于設(shè)置店鋪主頁的分割線；
2. 設(shè)置內(nèi)容包含：顏色、線條樣式（實線和虛線）、左右邊距和頁面間距；

3.1.10 輔助空白

頁面截圖：

操作說明：

1. 輔助空白主要用于用于店鋪主頁的區(qū)域分割或者占位；
2. 設(shè)置內(nèi)容包含：空白顏色、空白高度和左右邊距；

3.1.11 商品列表

頁面截圖：

風格一

風格二

操作說明：

1. 商品列表主要用于設(shè)置店鋪主頁的商品類別信息；
2. 設(shè)置內(nèi)容包含：模板樣式、數(shù)據(jù)來源、商品數(shù)量、角標、背景顏色和頁面間距；
3. 模板樣式包含方式一（一行一個）和方式二（一行兩個），默認方式一；數(shù)據(jù)來源包含：默認、商品分類和自定義三種，選擇商品分類，可選擇商品分類信息，選擇自定義，根據(jù)商品名稱選擇；

3.1.12 店鋪信息

頁面截圖：

操作說明：

1. 店鋪信息主要用于展示店鋪主頁的店鋪信息；
2. 店鋪信息包含：店鋪LOGO、店鋪名稱、綜合評分和粉絲數(shù)；可設(shè)置店鋪信息的文字顏色；

3.1.13 店鋪搜索

頁面截圖：

樣式一

店內(nèi)搜索主要用于設(shè)置店鋪內(nèi)搜索功能；

3.1.14 門店

頁面截圖：

操作說明：

1. 門店主要用于設(shè)置店鋪主要的門店信息展示；
2. 門店信息包含：門店LOGO、門店名稱、門店地址、營業(yè)時間和聯(lián)系電話；

3.1.15 商品分類

頁面截圖：

商品分類

展示類型

操作說明：

1. 商品分類用于設(shè)置商品分類頁面或者商品搜索頁面展示樣式；
2. 支持：一級分類樣式、二級分類樣式和三級分類樣式以及三種展示形式；

3.1.16 分類導航

頁面截圖：

操作說明：

1. 分類導航用于商品列表頁面設(shè)置商品分類導航信息；
2. 設(shè)置內(nèi)容包含：背景顏色、選中顏色、未選中顏色和主頁名稱；

3.1.17 浮動按鈕

頁面截圖：

操作說明：

1. 浮動按鈕用于設(shè)置店鋪內(nèi)部懸浮的圖標，如在線客服、聯(lián)系電話等等；
2. 設(shè)置內(nèi)容包含：上傳圖標（可多條）、鏈接地址（可多條）、按鈕位置（左上、右上、左下和右下，一般為右下）、上下偏移；

3.1.18 店鋪筆記

頁面截圖：

操作說明：

1. 店鋪筆記用于設(shè)置店鋪主頁或者其他頁面的店鋪文章展示；
2. 設(shè)置內(nèi)容包含：數(shù)據(jù)來源（自動或者手動）、顯示數(shù)、頂部標題、頂部標題顏色、頂部文本內(nèi)容、頂部文本顏色、亮點（是否顯示）、閱讀數(shù)（是否顯示）、更新時間（是否顯示）、背景顏色和頁面邊距；

營銷組件

3.2.1 批發(fā)

頁面截圖：

批發(fā)

商品選擇

操作說明：

批發(fā)主要用于設(shè)置批發(fā)營銷活動的入口信息；

批發(fā)營銷活動的設(shè)置內(nèi)容包含：商品來源、商品數(shù)量/手動選擇、選擇風格、背景顏色、滑動方式、頂部圖標、標題內(nèi)容、頁面間距；

1. 商品來源，默認系統(tǒng)設(shè)置，可手動選擇批發(fā)營銷活動入口的商品信息；
2. 商品數(shù)量/手動選擇，商品來源為系統(tǒng)默認，可設(shè)置商品數(shù)量；商品來源為手動選擇，可點擊【選擇】，彈窗顯示批發(fā)商品信息，手動選擇；
3. 選擇風格，批發(fā)營銷活動展示模板的選擇；
4. 背景顏色，批發(fā)營銷活動標題欄的背景顏色設(shè)計；
5. 滑動方式，批發(fā)營銷活動商品的展示形式，支持平滑和切屏滑動兩種；
6. 頂部圖標，批發(fā)營銷活動標題欄圖標設(shè)置；
7. 標題內(nèi)容，批發(fā)營銷活動標題欄標題設(shè)置；
8. 頁面間距，批發(fā)營銷活動與其他功能模塊間隔設(shè)計；

3.2.2 砍價

頁面截圖：

操作說明：

砍價主要用于設(shè)置砍價營銷活動的入口信息；

砍價營銷活動的設(shè)置內(nèi)容包含：商品來源、商品數(shù)量/手動選擇、選擇風格、背景顏色、滑動方式、頂部圖標、標題內(nèi)容、頁面間距；

1. 商品來源，默認系統(tǒng)設(shè)置，可手動選擇砍價營銷活動入口的商品信息；
2. 商品數(shù)量/手動選擇，商品來源為系統(tǒng)默認，可設(shè)置商品數(shù)量；商品來源為手動選擇，可點擊【選擇】，彈窗顯示砍價營銷活動商品信息，手動選擇；
3. 選擇風格，砍價營銷活動展示模板的選擇；
4. 背景顏色，砍價營銷活動標題欄的背景顏色設(shè)計；
5. 滑動方式，砍價營銷活動商品的展示形式，支持平滑和切屏滑動兩種；
6. 頂部圖標，砍價營銷活動標題欄圖標設(shè)置；
7. 標題內(nèi)容，砍價營銷活動標題欄標題設(shè)置；
8. 頁面間距，砍價營銷活動與其他功能模塊間隔設(shè)計；

3.2.3 團購

頁面截圖：

操作說明：

團購主要用于設(shè)置團購營銷活動的入口信息；

團購營銷活動的設(shè)置內(nèi)容包含：商品來源、商品數(shù)量/手動選擇、選擇風格、背景顏色、滑動方式、頂部圖標、標題內(nèi)容、頁面間距；

1. 商品來源，默認系統(tǒng)設(shè)置，可手動選擇團購營銷活動入口的商品信息；
2. 商品數(shù)量/手動選擇，商品來源為系統(tǒng)默認，可設(shè)置商品數(shù)量；商品來源為手動選擇，可點擊【選擇】，彈窗顯示團購營銷活動商品信息，手動選擇；
3. 選擇風格，團購營銷活動展示模板的選擇；
4. 背景顏色，團購營銷活動標題欄的背景顏色設(shè)計；
5. 滑動方式，團購營銷活動商品的展示形式，支持平滑和切屏滑動兩種；
6. 頂部圖標，團購營銷活動標題欄圖標設(shè)置；
7. 標題內(nèi)容，團購營銷活動標題欄標題設(shè)置；
8. 頁面間距，團購營銷活動與其他功能模塊間隔設(shè)計；

3.2.4 拼團

頁面截圖：

操作說明：

拼團主要用于設(shè)置拼團營銷活動的入口信息；

拼團營銷活動的設(shè)置內(nèi)容包含：商品來源、商品數(shù)量/手動選擇、選擇風格、背景顏色、滑動方式、頂部圖標、標題內(nèi)容、頁面間距；

1. 商品來源，默認系統(tǒng)設(shè)置，可手動選擇拼團營銷活動入口的商品信息；
2. 商品數(shù)量/手動選擇，商品來源為系統(tǒng)默認，可設(shè)置商品數(shù)量；商品來源為手動選擇，可點擊【選擇】，彈窗顯示拼團營銷活動商品信息，手動選擇；
3. 選擇風格，拼團營銷活動展示模板的選擇；
4. 背景顏色，拼團營銷活動標題欄的背景顏色設(shè)計；
5. 滑動方式，拼團營銷活動商品的展示形式，支持平滑和切屏滑動兩種；
6. 頂部圖標，拼團營銷活動標題欄圖標設(shè)置；
7. 標題內(nèi)容，拼團營銷活動標題欄標題設(shè)置；
8. 頁面間距，拼團營銷活動與其他功能模塊間隔設(shè)計；

3.2.5 預售

頁面截圖：

操作說明：

預售主要用于設(shè)置預售營銷活動的入口信息；

預售營銷活動的設(shè)置內(nèi)容包含：商品來源、商品數(shù)量/手動選擇、選擇風格、背景顏色、滑動方式、頂部圖標、標題內(nèi)容、頁面間距；

1. 商品來源，默認系統(tǒng)設(shè)置，可手動選擇預售營銷活動入口的商品信息；
2. 商品數(shù)量/手動選擇，商品來源為系統(tǒng)默認，可設(shè)置商品數(shù)量；商品來源為手動選擇，可點擊【選擇】，彈窗顯示預售營銷活動商品信息，手動選擇；
3. 選擇風格，預售營銷活動展示模板的選擇；
4. 背景顏色，預售營銷活動標題欄的背景顏色設(shè)計；
5. 滑動方式，預售營銷活動商品的展示形式，支持平滑和切屏滑動兩種；
6. 頂部圖標，預售營銷活動標題欄圖標設(shè)置；
7. 標題內(nèi)容，預售營銷活動標題欄標題設(shè)置；
8. 頁面間距，預售營銷活動與其他功能模塊間隔設(shè)計；

3.2.6 秒殺

頁面截圖：

操作說明：

秒殺主要用于設(shè)置秒殺營銷活動的入口信息；

秒殺營銷活動的設(shè)置內(nèi)容包含：商品來源、商品數(shù)量/手動選擇、選擇風格、背景顏色、滑動方式、頂部圖標、標題內(nèi)容、頁面間距；

1. 商品來源，默認系統(tǒng)設(shè)置，可手動選擇秒殺營銷活動入口的商品信息；
2. 商品數(shù)量/手動選擇，商品來源為系統(tǒng)默認，可設(shè)置商品數(shù)量；商品來源為手動選擇，可點擊【選擇】，彈窗顯示秒殺營銷活動商品信息，手動選擇；
3. 選擇風格，秒殺營銷活動展示模板的選擇；
4. 背景顏色，秒殺營銷活動標題欄的背景顏色設(shè)計；
5. 滑動方式，秒殺營銷活動商品的展示形式，支持平滑和切屏滑動兩種；
6. 頂部圖標，秒殺營銷活動標題欄圖標設(shè)置；
7. 標題內(nèi)容，秒殺營銷活動標題欄標題設(shè)置；
8. 頁面間距，秒殺營銷活動與其他功能模塊間隔設(shè)計；

3.2.7 店鋪優(yōu)惠劵

頁面截圖：

店鋪優(yōu)惠劵

店鋪優(yōu)惠劵主要用于設(shè)置店鋪優(yōu)惠劵的展示；

店鋪優(yōu)惠券的設(shè)置內(nèi)容包含：選擇風格、優(yōu)惠券來源、商品數(shù)量/手動選擇、頁面間距；

1. 選擇風格，點擊【選擇】彈窗顯示優(yōu)惠劵風格頁面，可設(shè)置優(yōu)惠劵展示風格；
2. 商品來源，默認系統(tǒng)設(shè)置，可手動選擇店鋪優(yōu)惠券信息；
3. 商品數(shù)量/手動選擇，商品來源為系統(tǒng)默認，可設(shè)置商品數(shù)量；商品來源為手動選擇，可點擊【選擇】，彈窗顯示店鋪優(yōu)惠券信息，手動選擇；
4. 頁面間距，店鋪優(yōu)惠劵與其他功能模塊間隔設(shè)計；

3.2.8 小程序直播

頁面截圖：

操作說明：

1. 小程序直播主要用于設(shè)置小程序直播功能的展示；
2. 小程序直播功能展示內(nèi)容包含：正在直播的標題和內(nèi)容，以及主播頭像、名稱商品數(shù)量；
3. 可設(shè)置小程序直播和其他功能模塊的間隔；

本文由 @小胖紙 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于 CC0 協(xié)議

該文觀點僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。