每個頁面的裝修操作都是壹模壹樣的。這裏我們以“店鋪主頁”的裝修為例來說明。
頁面裝飾應遵循的原則:
首先添加布局——然後在布局中添加模塊——然後設置模塊的內容——最後發布***5個鏈接。
1,版面介紹名詞解釋
布局:是指將頁面分成不同結構的條塊,頁面的所有裝飾內容都必須放在布局中;每個頁面可以有多種布局。
目前系統提供12種布局供選擇組合。
特殊說明:
每個頁面的頂部會有壹個橫幅布局(不需要刪除或移動),放置在這個布局中的模塊會自動顯示在商店的所有頁面上。
建議這種布局只放置店招、店內導航、主促銷活動橫幅;如果您只想顯示當前頁面上的內容,請在添加模塊之前手動添加新布局。不要使用默認布局。
2.添加布局
2.1可用布局列表點擊裝飾頁面左上角的添加布局按鈕,打開如下選擇器:
壹個* * *有12種布局可供選擇。
2.2使用說明
點擊添加後,布局會顯示在頁面底部,必要時需要手動上移。
添加的可視頁面顯示“橫幅布局(990)”:
當鼠標移動到布局區域時,會出現布局的名稱、大小和操作,如上圖所示:
名詞解釋
Banner (990):是布局的名稱,表示該布局是寬度為990px的橫幅布局。
紅叉:表示刪除布局的操作。刪除布局時,其內容也將被刪除,並且無法恢復。所以操作要謹慎。
綠色箭頭:表示布局可以上下移動。
通過重復上述操作,我們可以根據設計目的在當前網頁中添加多種不同格式的布局,比如在某個頁面中添加七種布局,如下圖所示:
註意事項:
布局添加後,顯示為虛線框,虛線框的每壹行都是壹個獨立的布局。上圖選擇的是左右布局,常用於分類放在左邊,推薦商品放在右邊。
可以根據自己的設計思路選擇使用1或者更多的布局;建議使用的布局數量不要超過10。
3.模板介紹
選擇了布局,就相當於給裝修定了輪廓和框架,然後我們會把內容放進框架裏。
名詞解釋
功能模塊:提供壹些特殊效果的系統功能稱為功能模塊。
目前,該系統有五大類***15功能模塊。
可用模塊列表
在任壹布局的左下角,都有壹個名為“添加模塊”的操作按鈕,會彈出如下圖:
從上圖可以看到模塊的目錄和名稱。
上圖是“商店基本模塊”,這個目錄下有四個功能模塊:
商品分頁顯示:如果妳有M個商品,每頁設置20個,就會有M/20分頁。直接點擊頁碼,在相應頁面查看商品列表;每個頁面的商品都可以按照銷量、價格、好評排序。
默認情況下,SKU按照從晚到早的順序進行排序,您可以通過更改模板來調整默認排序。
商品類別:該模塊用於顯示商店中的商品類別。
店內搜索:該模塊為店內搜索框,您可以根據設計要求將其放置在合適的位置。
店內搜索結果:顧名思義,是用來顯示搜索結果的。該模塊默認預置在“店內搜索結果頁面”中。除非有特殊要求,否則請勿刪除。
第二個目錄如下所示:
從上圖可以看出,這個目錄下有兩個模塊:
銷售排名:用於顯示商店中商品的銷售列表。默認為前10。
產品推薦:這個模塊使用頻率最高,比如“暢銷”、“店長推薦”、“重點推薦”等等。
品牌組:僅適用於第三方賣家。商家可以在該模塊的“設置”中通過SKU ID輸入參與品牌團購的商品。
第三個目錄是“門店營銷”模塊,如下圖所示:
從上圖可以看出,目錄* * *有四個模塊:
自定義內容區:又稱“HTML編輯器”,也是裝修店最常用的模塊之壹。目前自定義內容可以上傳圖片,寫代碼。如果妳對dreamweaver,html,CSS DIV有所了解,使用這個模塊可以讓妳的裝修更加耀眼。
導航:很好理解,就是輸入壹個關鍵詞,配置壹個鏈接網址就可以了。
Renning carousel:通過編輯需要輪播的html剪輯和背景色,實現html剪輯的輪播效果!
接下來看第四個目錄“公司相關”。截圖如下:
從上圖可以看出,該目錄包含三個模塊:
店鋪簡介:展示品牌介紹內容的模塊。
商店公告:顯示商店公告信息的模塊。
商店招牌模塊:顯示商店招牌內容的模塊。
接下來看第五個目錄“公司相關”。截圖如下:
從上圖可以看出,該目錄包含1個模塊。
匹配詳情:顯示匹配購買中匹配的產品,在“設置”中輸入匹配id,放入匹配信息。
裝修時可以根據設計添加上述15模塊中的任意壹個或多個,同壹個模塊可以在壹個頁面上多次使用。
4.添加模塊
4.1.添加“頁面展示商品”模塊。4.1.1增加操作流程。
選擇要添加的模塊的布局,例如:
點擊添加模塊按鈕,依次找到目標模塊,然後點擊放置。
放置模塊後,可以修改模塊並改進內容,如下所示:
4.1.2設置
點擊模塊的設置,會彈出如下操作面板:
如上圖,默認選擇皮膚操作。
4.1.3皮膚
名詞解釋
皮膚:用於美化模塊的邊框和外圍,詳細功能。
描述:
皮膚選擇:系統預置了2套皮膚,可以快速選擇使用。
標題欄:用於設置模塊標題區域內皮膚的操作。
內容區:用於設置模塊內容區內皮膚的操作。
底部欄:用於設置模塊最低區域的皮膚操作。
4.1.4模板
每個模塊系統都預置了1或以上的模板,通過改變模板可以即時改變模塊的顯示外觀:
描述:
模板* * *分為最近使用、我的創建和系統模板,分別具有以下含義:
最近使用:最近使用的模板放在裏面,不用找就能快速選中。
我的創作:妳創作的模板放在裏面。
系統模板:官方或第三方開發者提供的模板。
4.1.5標簽
名詞解釋
Tab:是指添加超鏈接的功能,與模塊標題並排顯示。選項卡的用法如下:
使用說明:
如上圖輸入“超鏈接文本”和“網址”,然後點擊添加添加更多,最後點擊批量更新,最後記得點擊保存。頁面發布後,可以看到效果,然後點擊刷新就可以看到效果了。
4.2添加"商品類別"模塊
4.2.1添加操作流程
選擇要添加模塊的布局,然後單擊“添加模塊”按鈕:
選擇“商品類別”模塊,點擊“放置”:
放置後的顯示如下:
點擊模塊名稱後面的設置,改善模塊內容,改變顯示效果。
設置
單擊設置顯示以下內容:
默認情況下會選擇皮膚。
皮膚
同4.1.3運算。
模板
與4.1.4相同
4.2.5選項卡
與4.1.5相同
4.3增加“店內搜索”模塊
4.3.1添加操作流程
選擇要添加模塊的布局,然後單擊左下角的添加模塊。例子如下:
點擊添加模塊後,在彈出的操作面板中找到“店內搜索”模塊,點擊上傳:
放置後的默認顯示如下:
從上圖可以看出,該模塊位於“商品分頁顯示”下。
名詞解釋
拖動並移動模板:將鼠標移動到模塊上,然後按左鍵。在不釋放左鍵的情況下,同時移動鼠標將模塊移動到新的位置,例如上下交換位置。
此時用鼠標選中“店內搜索模塊”,按下左鍵,向上拖動鼠標。移動到目標位置時,松開鼠標左鍵,模板可以移動到頂部(同理,也可以下移,跨布局等。),如下:
釋放鼠標:
您可以上下移動模塊。當然,模塊的移動不限於布局,還可以在布局之間來回移動。
單擊模塊名稱後面的設置來修改內容。
設置
如上圖所示,默認選擇皮膚。
配置
名詞解釋
配置默認關鍵字:您可以設置壹個搜索詞,該詞將默認顯示在搜索框中。
配置熱門推薦詞:可以設置3個推薦詞,方便用戶直接搜索,無需手動輸入。
價格篩選:打開後,用戶可以按照N元且僅M元搜索妳的店內商品。
皮膚
操作同4.1.3。
模板
操作同4.1.4。
目前系統預置了兩個模板,截圖如下:
4.3.6選項卡
操作同4.1.5。
4.4增加“店內搜索結果”模塊
4.4.1添加操作流程
“店內搜索結果”模塊默認預置在“店內搜索結果”頁面。如無特殊需要,請勿刪除。
系統預置該模塊顯示位置的截圖如下:
點擊頁面裝飾顯示如下:
當用戶單擊搜索按鈕並顯示該模塊的搜索結果時,如果刪除該模塊,將不會顯示搜索結果。請謹慎操作,不要在沒有確認的情況下刪除或移動該模塊。
當然也可以設置模塊,比如點擊上圖中模塊名稱後面的設置。
設置
默認顯示如下:
如上圖,默認選擇皮膚。
皮膚
操作同4.1.3。
模板
操作同4.1.4。
4.4.5選項卡
操作同4.1.5。
4.5添加"銷售排名"模塊
4.5.1添加操作流程
選擇要添加的銷售排名模塊的布局,例如:
點擊添加模塊,在打開的操作面板中找到“銷售排名”模塊,點擊放置。
放置該模塊後,默認顯示效果如下:
單擊設置以配置模塊內容。
設置
單擊設置打開操作面板。默認是“皮膚”。
皮膚
操作同4.1.3。
模板
操作同4.1.4。
選項卡
操作同4.1.5。
4.6添加"商品推薦"模塊
4.6.1添加操作流程
選擇要添加模塊的布局,例如:
然後點擊添加模塊,在彈出的操作面板中找到“產品推薦”模塊,點擊上傳:
放置該模塊後,默認顯示效果如下:
點擊模塊名稱後面的設置,補充內容。
設置
默認情況下,單擊設置打開配置。
配置
點擊設置,打開如下操作面板:
名詞解釋
ID錄入:通過錄入壹批商品的SKU來推薦商品的操作。
篩選錄入:指通過1、2、3分類批量錄入商品SKU來推薦商品的操作。
1) ID條目:
如何看待商品的SKU?請參考附錄1:如何查看商品SKU。
2)篩選輸入商品:
輸入產品後點擊保存,產品推薦完成。商品展示如下:
這時,我們可以點擊模塊名稱後面的設置來改變皮膚。
皮膚
依次點擊模塊名稱後面的設置,在打開的操作面板中選擇皮膚進行皮膚設置。
操作同4.1.3。
模板
依次點擊模塊名稱後的設置,在打開的操作面板中選擇模板進行模板設置。
操作同4.1.4。
該模塊是裝修店鋪時使用最多的模塊之壹,目前模板數量也比較多。截圖如下:
選項卡
依次點擊模塊名稱後的設置,在打開的操作面板中選擇選項卡設置皮膚。
操作同4.1.5。
4.7添加“導航”模塊
4.7.1添加操作流程
選擇要添加的導航模塊的布局,例如,選擇橫幅作為導航模塊:
點擊添加模板按鈕,打開添加模塊操作面板,找到“導航”模塊,點擊放置:
放置後,默認顯示如下。單擊名稱後面的設置以改進導航模塊內容:
設置
點擊設置按鈕,彈出如下操作面板:
默認情況下打開配置操作。
配置
名詞解釋
導航名稱:指要超鏈接的文本。
鏈接地址:指點擊文字後打開的網站。
添加後點擊保存,查看效果。
皮膚
操作同4.1.3。
模板
操作同4.1.4。
4.7.6選項卡
操作同4.1.5。
4.8添加“自定義內容區域”模塊
4.8.1添加操作流程
選擇將用於添加模塊的布局,單擊布局左下角的Add Template按鈕,在打開的模塊選擇面板中找到“自定義內容區域”,然後單擊Place。
放置後,將顯示如下。點按“設置”以改善內容:
設置
點擊設置,默認打開配置內容區,俗稱“HTML編輯器”。
配置
自定義內容區的功能簡介。自定義內容支持使用:
1) HTML代碼(只支持body標簽中的代碼,不支持body)。
2)部分CSS代碼:效果壹般的CSS代碼也可以。
3)腳本代碼:常見的javaccript代碼。
4)系統內置的js庫js代碼。
如果妳寫css代碼,請補充。用戶放在CSS代碼前面,以避免與系統默認樣式沖突。
皮膚
操作同4.1.3。
模板
操作同4.1.4。
因為輪播模塊可以用來做banner、導航、活動入口、重點推薦等很多功能,所以這個模塊的模板按照用途和目的地分為幾類,截圖如下:
可以根據具體使用目的靈活組合。
選項卡
操作同4.1.5。
4.9添加“輪播地圖”模塊
4.9.1添加操作流程
選擇布局添加輪播模板,通常使用輪播制作banner、第壹張圖片等。,所以壹般選擇位於頁面中上位置的布局:
單擊添加模塊按鈕找到輪播模塊,然後單擊放置:
模塊放置後,默認顯示效果如下。單擊“設置”修改內容:
設置
點擊設置按鈕,打開操作面板,默認選擇配置操作。
配置
描述:
1)單擊並選擇圖像以上傳轉盤顯示。
2)標題:輸入每張圖片的標題。
3)鏈接:輸入每張圖片鏈接的URL,註意必須是JD.COM的URL。
操作完成後點擊保存,最多可以設置8張輪播圖片。
4.9.4皮膚
操作同4.1.3。
模板
操作同4.1.4。
4.9.6選項卡
操作同4.1.5。
4.10添加“店鋪簡介”模塊
4.10.1添加操作流程
選擇要添加的商店漸變模塊的布局,然後點擊左下角的添加模塊按鈕。默認情況下,該模塊預置在“商店檔案頁面”中。除非有特殊需要,否則請勿刪除或移動。
點擊設置,管理美化模塊。
4.10.2設置
說明:該模塊的簡介在供應商後臺-我的店鋪-店鋪裝修設置-品牌簡介:
4.10.3皮膚
操作同4.1.3。
4.10.4模板
操作同4.1.4。
4.10.5標簽
操作同4.1.5。
4.11添加“店鋪公告”模塊。
4.11.1添加操作流程
店鋪公告模塊默認預置在店鋪首頁左下角。如無特殊需要,請勿刪除。
4.11.2設置
該模塊內容在“供應商後臺”-我的店鋪-公告海報管理-公告管理中維護。
點擊本模塊的設置,直接定位皮膚操作。
4.11.3皮膚
操作同4.1.3。
4.11.4模板
操作同4.1.4。
4.11.5標簽
操作同4.1.5。
4.12增加“店鋪招牌”模塊。
4.12.1添加操作流程
默認情況下,商店招聘模塊位於每個頁面的頂部。除非有特殊要求,否則請勿刪除此模塊。該模塊的內容在“供應商後臺”-我的店鋪-店鋪管理-店鋪基本信息中維護。
4.12.2設置
單擊以修改操作。
4.12.3皮膚
操作同4.1.3。
4.12.4模板
操作同4.1.4。
4.12.5標簽
操作同4.1.5。
5.頁面設置
頁面設置包括背景設置和分享設置。
5.1背景設置
當每壹個頁面被修飾後,瀏覽器窗口的左上角有壹個按鈕叫做頁面設置。點按它以查看背景設置。
描述:
背景顏色:您可以選擇或輸入背景顏色的顏色值。
背景寬度:用於定義背景顏色和背景圖像的寬度;數值的單位是像素,留空表示全屏。
背景圖片:請上傳大小限制為300K的圖片。
利用“背景圖片”結合“自定義內容區”模塊可以產生“全屏橫幅”等效果。
5.2共享設置
為店鋪添加分享浮動欄,可以選擇在頁面左側還是右側顯示,同時可以設置默認分享詞;支持將商店分享到新浪微博、騰訊微博、人人網、辛凱、豆瓣等第三方網站。
分享的話,如果留空,程序會自動讀取壹段文字。建議手動寫壹份,保存。
描述:
分享詞:建議輸入140字符,因為如果要和微博等網站分享,超出部分會被對方網站自動截掉。
可能會影響微博內容的完整性。