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

一、簡介

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

1.1 目的

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

1.2 范圍

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

二、產(chǎn)品概述

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

三、操作說明

基礎(chǔ)組件

3.1.1 彈出廣告

頁面截圖：

彈出廣告

選擇鏈接

操作說明：

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

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

3.1.2 文本

頁面截圖：

文本

風(fēng)格選擇

操作說明：

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

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

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

3.1.3 公告

頁面截圖：

操作說明：

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

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

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

3.1.4 圖文導(dǎo)航

頁面截圖：

圖片導(dǎo)航

文字導(dǎo)航

操作說明：

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

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

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

3.1.5 圖片廣告

頁面截圖：

單圖模式

輪播海報(bào)

橫向滑動(dòng)

操作說明：

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

圖片廣告的類型包含：單圖模式、輪播海報(bào)和橫向滑動(dòng)三種；默認(rèn)類型為單圖模式；

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

3.1.6 商品搜索

頁面截圖：

樣式一

樣式二

操作說明：

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

模板的展示類型包含：樣式一和樣式二；默認(rèn)類型為樣式一；

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個(gè)、1行3個(gè)、1行4個(gè)、2左2右、1左2右、1上2下、1左3右；
3. 設(shè)置內(nèi)容：圖片上傳、鏈接地址、圖片間隔和背景顏色；

3.1.9 輔助線

頁面截圖：

操作說明：

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

3.1.10 輔助空白

頁面截圖：

操作說明：

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

3.1.11 商品列表

頁面截圖：

風(fēng)格一

風(fēng)格二

操作說明：

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

3.1.12 店鋪信息

頁面截圖：

操作說明：

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

3.1.13 店鋪搜索

頁面截圖：

樣式一

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

3.1.14 門店

頁面截圖：

操作說明：

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

3.1.15 商品分類

頁面截圖：

商品分類

展示類型

操作說明：

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

3.1.16 分類導(dǎo)航

頁面截圖：

操作說明：

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

3.1.17 浮動(dòng)按鈕

頁面截圖：

操作說明：

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

3.1.18 店鋪筆記

頁面截圖：

操作說明：

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

營銷組件

3.2.1 批發(fā)

頁面截圖：

批發(fā)

商品選擇

操作說明：

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

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

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

3.2.2 砍價(jià)

頁面截圖：

操作說明：

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

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

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

3.2.3 團(tuán)購

頁面截圖：

操作說明：

團(tuán)購主要用于設(shè)置團(tuán)購營銷活動(dòng)的入口信息；

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

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

3.2.4 拼團(tuán)

頁面截圖：

操作說明：

拼團(tuán)主要用于設(shè)置拼團(tuán)營銷活動(dòng)的入口信息；

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

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

3.2.5 預(yù)售

頁面截圖：

操作說明：

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

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

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

3.2.6 秒殺

頁面截圖：

操作說明：

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

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

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

3.2.7 店鋪優(yōu)惠劵

頁面截圖：

店鋪優(yōu)惠劵

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

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

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

3.2.8 小程序直播

頁面截圖：

操作說明：

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

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

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

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