當前位置:旅游攻略大全網 - 别墅装修 - 京東商城店鋪頁面怎麽裝修

京東商城店鋪頁面怎麽裝修

每壹個店鋪標配的4個頁面都可以分別進行裝修,在沒有裝修之前系統在每個頁面默認了壹些常規內容,對於這些內容妳可以刪除、和修改。

每個頁面的裝修操作完全壹樣,這裏我們以“店鋪首頁”的裝修為例進行講解。

頁面裝修要遵循的原則:

先添加布局-然後在布局裏添加模塊-然後設置模塊的內容-最後發布***5個環節。

1、 布局介紹名詞解釋

布局:是指將頁面劃分為不同結構的條格,頁面的所有裝修內容必須放置到布局內;每壹個頁面可以有多個布局。

目前系統提供了12個布局供選擇和組合使用。

特別說明:

每壹個頁面的最頂部會有壹個通欄布局(沒有刪除、移動操作)該布局裏面放置的模塊會自動強制顯示在店鋪所有頁面。

建議在該布局內僅放置店鋪招牌、店內導航和主推活動的banner等內容;如果只想將內容顯示在當前頁面,請手動添加新的布局後再添加模塊,請勿使用該默認布局。

2、添加布局

2.1可用的布局列表在裝修頁面點擊頂部左上角的添加布局按鈕,打開如下選擇器:

壹***有12個布局供選擇。

2.2使用說明

點擊添加後,該布局將顯示在頁面的最底部,如果必要需手動向上移動。

添加後的可視化頁面顯示“通欄布局(990)”:

當鼠標移動到布局區域內的時候會出現布局的名字、尺寸和操作,如上圖:

名詞解釋

通欄(990):是該布局名稱,同時指出該布局為寬度990px的通欄布局

紅叉:表示刪除該布局的操作,布局被刪除時它所包含的內容也會壹並被刪除且無法恢復,操作需謹慎。

綠色箭頭:表示布局可用的上下移動操作

重復以上操作我們可以根據設計目的向當前網頁添加多個不同版式的布局,比如在某個頁面添加了7個布局,顯示如下:

註意事項:

布局添加後顯示為壹個虛線框,每壹行虛線框都是壹個獨立的布局。上圖中選中的是左右布局,常用來左側放置分類,右側放置推薦商品。

妳可以根據自己的設計思路,選擇使用1個或者多個布局;布局的使用數量建議不要超過10個。

3、模板介紹

選擇了布局就等於是為裝修設定好了大綱和框架,接下來我們就要往框架裏放置內容。

名詞解釋

功能模塊:提供某些特效內容的系統功能稱為功能模塊。

目前系統已有5個目錄分類***15個功能模塊。

可用的“模塊”列表

在任意壹個布局的左下角有壹個為名為添加模塊的操作按鈕,點擊會彈出如下:

由上圖可以看出模塊的所屬目錄和名稱。

上圖為“店鋪基礎模塊”,該目錄下***有4個功能模塊:

分頁顯示商品:如果您有M個商品,設置每頁顯示20個,那麽就會有M/20個分頁,直接點擊頁碼即可查看對應頁面的商品列表;每壹個頁面上的商品可以按照銷量價格好評數進行排序。

默認是按照SKU的上架時間從晚到早排序的,您可以通過更換模版來調整默認排序。

商品類目:該模塊用來顯示店鋪內的商品分類。

店內搜索:該模塊是店鋪內搜索框,您可以根據設計要求將該模塊放置在合適的位置。

店內搜索結果:顧名思義用來顯示搜索結果的,該模塊默認在“店鋪內搜索結果頁面”預置了,如無特殊要求請不要刪除。

第二個目錄顯示如下:

由上圖可見該目錄下有2個模塊:

銷售排行:用來顯示店鋪內商品的銷售榜單,默認是前10個。

商品推薦:這個模塊使用的頻率最高,諸如“熱賣”“店長推薦”“重點推薦”等等均可以使用這個模塊來實現。

品牌團:僅適用於第三方賣家。商家可在該模塊的“設置”裏通過SKU ID錄入參加了品牌團購的商品。

第三個目錄為“店鋪營銷”模塊,顯示如下:

由上圖可看到該目錄***有4個模塊:

自定義內容區:大家又稱為“HTML編輯器”,也是裝修店鋪使用頻率最高的模塊之壹,目前自定義內容可以上傳圖片、寫代碼等。如果您懂壹些dreamweaver、html、CSS DIV的話,使用這個模塊可以讓您裝修出更炫的效果。

導航:比較好理解,即為輸入壹個關鍵詞 並配置壹個鏈接網址即可。

雷寧輪播圖:通過編輯需要輪播的html片段以及背景顏色,實現html片段的輪播效果!

接下來看第四個目錄“公司相關”,截圖如下:

由上圖可以看出該目錄包含3個模塊:

店鋪簡介:即顯示品牌介紹內容的模塊。

店鋪公告:即顯示店鋪內公告信息的模塊。

店招模塊:即顯示店鋪招牌內容的模塊。

接下來看第五個目錄“公司相關”,截圖如下:

由上圖可以看出該目錄包含1個模塊

搭配詳情:展示用戶在搭配購裏面的商品搭配,在“設置”裏輸入搭配id可置入搭配信息。

在裝修的時候根據設計可以添加以上15個模塊中的任意壹個或者多個,同壹個模塊在壹個頁面上是可以多次被使用的。

4、添加模塊

4.1、添加“分頁顯示商品”模塊4.1.1添加的操作流程

選中要添加模塊的布局,比如:

點擊添加模塊按鈕,依次找到目標模塊後點擊置入,

模塊置入完畢後,可對模塊進行修飾和內容完善,操作如下:

4.1.2設置

點擊模塊的設置,會彈出如下操作面板:

如上圖,默認選中的是皮膚操作。

4.1.3皮膚

名詞解釋

皮膚:用來美化該模塊的邊框和周邊,詳細功能

說明:

皮膚選擇:系統預置了2套皮膚,可以快速選擇使用

標題欄:用來設置模塊標題區域範圍內皮膚的操作

內容區:用來設置模塊內容區域範圍內皮膚的操作

底部欄:用來設置模塊最底下區域範圍內皮膚的操作

4.1.4模板

每壹個模塊系統都預置了1個或多個模版,通過更換模版可以使模塊顯示樣子瞬間變化:

說明:

模版***分為“最近使用”“我的創建”和“系統模版”,分別含義如下:

最近使用:裏面放置的是妳最近使用過的模版,可以快速選擇無須尋找

我的創建:裏面放置的是妳自己創建的模版

系統模版:官方或第三方開發者提供模版

4.1.5選項卡

名詞解釋

選項卡:是指和模塊標題並列顯示的可添加超鏈接的功能。選項卡的使用如下:

使用說明:

輸入“超鏈接文本” 和“網址”如上圖中的,然後點擊增加,可以添加多個,最後點擊批量更新,最後記得點擊保存哦,待頁面發布後可看到效果,點擊刷新可即可看到效果哦。

4.2添加“商品類目”模塊

4.2.1添加的操作流程

選中要添加該模塊的布局,點擊添加模塊按鈕:

選中“商品類目”模塊,點擊置入:

置入後顯示如下:

點擊模塊名稱後面的設置可進行該模塊的內容完善和顯示效果更換等。

4.2.2設置

點擊設置後顯示如下:

默認選中的是皮膚。

4.2.3皮膚

同4.1.3操作

4.2.4模板

同4.1.4

4.2.5選項卡

同4.1.5

4.3添加“店內搜索”模塊

4.3.1 添加的操作流程

選中要添加該模塊的布局,然後點擊左下角的添加模塊,舉例如下:

點擊添加模塊後,彈出的操作面板中找到“店內搜索”模塊,並點擊置入:

置入後默認顯示如下:

如上圖可見,該模塊位於“分頁顯示商品”的下面。

名詞解釋

模版的拖拉移動:鼠標移動到模塊上,並按下左鍵,不松開左鍵同時移動鼠標可將模塊移動到壹個新的位置,比如上下交換位置等。

這時,用鼠標選中“店內搜索模塊”,按下左鍵向上拖拉鼠標,待移動到目標位置時松開鼠標左鍵,即可將該模版移動到上面(同理也可以往下移動、跨布局移動等),如下:

松開鼠標:

即可完成模塊的上下移動,當然模塊的移動不局限於布局內,也可以在布局間來回移動哦。

點擊該模塊名稱後面的設置,可進行內容修改。

4.3.2設置

如上圖所示默認選中皮膚。

4.3.3 配置

名詞解釋

配置默認關鍵詞:妳可以設定壹個搜索詞,設定後該詞會搜索框裏默認顯示出來。

配置熱薦詞:妳可以設定3個推薦詞,方便用戶直接搜索而無須手動輸入。

價格篩選:開啟後可以讓用戶按照N元只M元之間來搜索妳的店內商品。

4.3.4 皮膚

操作同4.1.3

4.3.5 模版

操作同4.1.4

目前系統預置有2個模版,截圖如下:

4.3.6選項卡

操作同4.1.5

4.4添加“店內搜索結果”模塊

4.4.1添加的操作流程

“店內搜索結果”模塊默認預置在“店內搜索結果”頁面裏,如無特殊需求請勿刪除。

系統預置該模塊的顯示位置截圖如下:

點擊頁面裝修顯示如下:

當用戶點擊搜索按鈕後,用該模塊顯示搜索結果的,如果刪除了該模塊,將無法顯示搜索結果,請慎重操作,在沒有把握的前提下請勿刪除和移動該模塊。

當然該模塊也可以設置,如在上圖中點擊模塊名稱後面的設置。

4.4.2設置

默認顯示如下:

如上圖,默認選中了“皮膚”。

4.4.3皮膚

操作同4.1.3

4.4.4模板

操作同4.1.4

4.4.5選項卡

操作同4.1.5

4.5添加“銷售排行”模塊

4.5.1添加的操作流程

選中將要添加銷售排行模塊的布局,比如:

點擊添加模塊,在打開的操作面板中找到“銷售排行”模塊,並點擊置入,

置入該模塊後默認顯示效果如下:

點擊設置可進行模塊內容配置。

4.5.2設置

點擊設置打開操作面板默認是“皮膚”。

4.5.3皮膚

操作同4.1.3

4.5.4模板

操作同4.1.4

4.5.5選項卡

操作同4.1.5

4.6添加“商品推薦”模塊

4.6.1添加的操作流程

選中要添加該模塊的布局,比如:

然後點擊添加模塊,在彈出的操作面板中找到“商品推薦”模塊並點擊置入:

置入該模塊後默認顯示效果如下:

點擊模塊名稱後面的設置可以補充內容。

4.6.2設置

點擊設置後默認打開的是配置。

4.6.3配置

點擊設置後會打開如下操作面板:

名詞解釋

ID錄入:是指通過錄入壹批商品的SKU,來實現推薦商品的操作。

篩選錄入:是指通過1、2、3級分類來批量錄入商品SKU,實現推薦商品的操作。

1) ID錄入:

如何查看商品的SKU?請參考附件壹:商品SKU的查看方式。

2) 篩選錄入商品:

商品錄入後點擊保存,則商品推薦就操作完畢了。商品顯示如下:

這個時候我們可以點擊,該模塊名稱後面的設置來更換皮膚哦。

4.6.4皮膚

依次點擊模塊名稱後面的設置,在打開的操作面板中選擇皮膚,即可進行皮膚設置。

操作同4.1.3

4.6.5模板

依次點擊模塊名稱後面的設置,在打開的操作面板中選擇模版,即可進行模版設置。

操作同4.1.4

該模塊是裝修店鋪時用到最多的模塊之壹,模版數量目前也比較多,截圖如下:

4.6.6選項卡

依次點擊模塊名稱後面的設置,在打開的操作面板中選擇選項卡,即可進行皮膚設置。

操作同4.1.5

4.7添加“導航”模塊

4.7.1添加的操作流程

選中將要添加導航模塊的布局,比如選擇壹個通欄來做導航模塊:

點擊添加模版按鈕,打開添加模塊操作面板,找到“導航”模塊並點擊置入:

置入完畢後默認顯示如下圖,可點擊名稱後面的設置來完善導航模塊內容:

4.7.2設置

點擊設置按鈕後會彈出如下操作面板:

默認打開配置操作。

4.7.3配置

名詞解釋

導航名稱:是指待超鏈接的文字

鏈接地址:是指點擊文字後打開的網址

添加完畢後點擊保存即可看到效果。

4.7.4皮膚

操作同4.1.3

4.7.5模板

操作同4.1.4

4.7.6選項卡

操作同4.1.5

4.8添加“自定義內容區”模塊

4.8.1添加的操作流程

選中將要用來添加該模塊的布局,並點擊該布局左下角的添加模版按鈕,在打開的模塊選擇面板中找到“自定義內容區”並點擊置入,

置入完畢後顯示如下,可點擊設置來完善內容:

4.8.2設置

點擊設置默認打開配置內容區域,通俗稱呼為“HTML編輯器”。

4.8.3配置

自定義內容區功能簡述,自定義內容支持使用:

1) HTML代碼(僅支持body標簽內的代碼,不含body)

2) 部分CSS代碼:常用效果的CSS代碼也可以

3) Script代碼:常見的javaccript代碼

4) 系統內置的js庫js代碼

如果妳寫入了CSS代碼,那麽為了避免和系統css沖突請在妳的CSS代碼前面添加.user等標識,以避免和系統默認樣式沖突。

4.8.4皮膚

操作同4.1.3

4.8.5模板

操作同4.1.4

因為輪播圖模塊可以用來做banner、導航、活動入口、重點推薦等諸多功能,所以該模塊的模版按照用途去向分為幾個小類,截圖如下:

妳可根據具體的使用目的靈活組合使用。

4.8.6選項卡

操作同4.1.5

4.9添加“輪播圖”模塊

4.9.1添加的操作流程

選中要添加輪播圖模版的布局,通常用輪播圖來做banner、首圖等所以壹般選擇位於頁面中上位置的布局:

點擊添加模塊按鈕,找到輪播圖模塊並點擊置入:

模塊置入後默認顯示效果如下圖,可點擊設置進行修改內容:

4.9.2設置

點擊設置按鈕,打開操作面板,默認會選中配置操作。

4.9.3配置

說明:

1) 點擊選擇圖片上傳輪播顯示圖。

2) 標題:輸入每壹張圖片的標題。

3) 鏈接:輸入每壹張圖片的鏈接到的網址,註意必須是京東網址。

操作完畢後點擊保存,妳最多可以設置8張輪播圖哦。

4.9.4皮膚

操作同4.1.3

4.9.5模板

操作同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。

采用“背景圖片”結合“自定義內容區”模塊可以制作出諸如“全屏banner”之類的效果。

5.2分享設置

為店鋪增加分享浮動條,可以選擇顯示在頁面的左側還是右側,同時可以設定默認分享詞;支持分享店鋪到新浪微博,騰訊微博,人人網,開心,豆瓣等其他第三方網站。

分享詞,留空則程序自動讀取壹段文字,建議手動撰寫文案後保存。

說明:

分享詞:建議輸入140字符內,因為要分享到微博等網站,超出部分將被對方網站自動截斷。

可能會影響微博內容的完整性。