一、應(yīng)用場(chǎng)景

商戶Tina運(yùn)營(yíng)著一家服飾在線商城，她希望系統(tǒng)可以讓訪客更直觀地了解商品的SKU規(guī)格，例如將服飾顏色作為SKU選項(xiàng)，訪客點(diǎn)擊不同的顏色選項(xiàng)展示對(duì)應(yīng)顏色的商品主圖，這樣可以更好地展現(xiàn)商品的特點(diǎn)，提高客戶的商品加購(gòu)率。

二、操作步驟

（1）點(diǎn)擊進(jìn)入內(nèi)容管理后臺(tái)——進(jìn)入產(chǎn)品的詳情編輯頁(yè)面，如下圖所示：

（2）進(jìn)入后有個(gè)產(chǎn)品規(guī)格設(shè)置，點(diǎn)擊添加規(guī)格項(xiàng)目，設(shè)置規(guī)格值及對(duì)應(yīng)的縮略圖，如下圖所示：

（3）去products系統(tǒng)頁(yè)面添加產(chǎn)品列表組件，選擇產(chǎn)品列表風(fēng)格第14個(gè)風(fēng)格，如下圖所示：

保存發(fā)布后，前臺(tái)頁(yè)面展示效果：實(shí)現(xiàn)點(diǎn)擊產(chǎn)品SKU規(guī)格縮略圖，顯示對(duì)應(yīng)產(chǎn)品規(guī)格圖。如下圖所示：