SHOPLINE作為一家領(lǐng)先的電子商務(wù)平臺，為用戶提供了豐富多樣的主題模板，同時也支持自定義設(shè)計，讓店鋪與眾不同，展現(xiàn)獨特的品牌風(fēng)格。本教程介紹了SHOPLINE店鋪設(shè)計的相關(guān)步驟，包括公告欄、頁頭、正文組件、頁腳、詳情頁等等方面。
一、準(zhǔn)備工作
在自定義設(shè)計主題之前，最好執(zhí)行以下任務(wù)，以便更順利地完成設(shè)計：
1、了解主題差異，查看SHOPLINE主題介紹。
2、了解上傳圖片的要求和最佳做法，查看圖片尺寸建議。
3、上傳至少一個商品，查看商品創(chuàng)建。
4、準(zhǔn)備好政策頁面內(nèi)容，查看添加店鋪政策。
5、創(chuàng)建產(chǎn)品分類，查看商品分類管理與設(shè)計。
準(zhǔn)備好后，可以開始設(shè)計店鋪，路徑：在 SHOPLINE admin 中，進入【在線商店】>【店鋪設(shè)計】。
二、添加公告欄
可以添加公告欄以突出顯示以下信息：
- 任何發(fā)貨延遲情況或不接受國際運輸?shù)膮^(qū)域；
- 任何新的或更新的政策頁面；
- 目前提供的任何推廣活動，例如促銷、新的禮品卡、會員權(quán)益等。
店鋪設(shè)計的公告欄：
1、在 SHOPLINE admin 中，點擊【在線商店】>【店鋪設(shè)計】>【設(shè)計】>【公告欄】。
2、在組件下方點擊【添加內(nèi)容】可添加公告。
3、在【正文】編寫公告欄文案，然后在【跳轉(zhuǎn)鏈接】處選擇對應(yīng)的產(chǎn)品頁或者詳情頁。
注意：
- 部分主題模板的公告欄在【頁頭】中配置；
- 不同主題模板可設(shè)置的內(nèi)容略有差異，可根據(jù)實際情況進行設(shè)置；
- 公告最多可以設(shè)置 12 條。
三、編輯頁頭
頁頭可以放置產(chǎn)品分類等內(nèi)容，引導(dǎo)客戶按照我們的規(guī)劃進行瀏覽，最終實現(xiàn)轉(zhuǎn)化的目的。
1、在 SHOPLINE admin 中，點擊【在線商店】>【店鋪設(shè)計】>【設(shè)計】>【頁頭】。
2、點擊組件下的【添加內(nèi)容】，可以在頁頭編輯以下內(nèi)容。
- 商店 Logo：上傳 Logo 圖片，支持電腦端和手機端的 Logo 寬度自定義；
- 菜單導(dǎo)航：頁頭的菜單導(dǎo)航默認(rèn)為 Main Menu 或 Header，如果設(shè)置了其他導(dǎo)航，可以點擊【更換】，鏈接之前設(shè)置好的菜單導(dǎo)航；
- 超級菜單：當(dāng)菜單有下級菜單時，可展示對應(yīng)分類圖片/商品圖片/自定義跳轉(zhuǎn)內(nèi)容，為買家提供更好的展示效果或內(nèi)容推薦；
- 頁頭固定在頂部：支持開啟或關(guān)閉；
- 展示其他頁頭工具：支持開啟或關(guān)閉。點擊【頁頭】組件，例如：搜索框入口、個人中心入口、購物車入口、語言選擇器、國家選擇器、貨幣選擇器、貨幣符號等。
注意：
- 頁頭將默認(rèn)應(yīng)用于所有頁面；
- 不同主題模板可設(shè)置的內(nèi)容略有差異，可根據(jù)實際情況進行設(shè)置。
四、編輯正文組件
1、在 SHOPLINE admin 中，點擊【在線商店】>【店鋪設(shè)計】>【設(shè)計】。
2、在左側(cè)欄，可以添加和編輯以下通用組件：
- 商品展示類：商品分類、精選商品、單個商品；
- 圖文展示類：圖文模塊、富文本、輪播圖、圖文列表、單圖、圖標(biāo)聲明；
- 視頻類：視頻圖文模塊、視頻輪播、視頻；
- 客戶運營類：聯(lián)系我們表單、郵箱訂閱；
- 信任組件：常見問題、地圖、評論模塊；
- 博客類：博客；
- 自定義類：自定義頁面；自定義HTML。
部分主題含有特色組件：
【特色輪播圖】：圖片區(qū)域和文本區(qū)域區(qū)分展示，主題包括 Expect、Control、Soo、Flexible、Charm。
【購物圖片】：一張圖片中展示多個商品，主題包括 Solid、Edges、Carfit、Cycle、Wink、Shine、Extent、Charm。
【時間線】：按時間線展示內(nèi)容，適用于介紹品牌歷史，主題包括 Extent、Feeling、Shine、Wink、Blouse、Solid。
【活動推廣】：展示系列活動和橫幅標(biāo)語，主題包括 Extent、Flexible、Blouse、Expect、Bloom、Deck、Edges、Soo、Metal、Cycle、Control、Carfit。
【多級篩選】：多維度標(biāo)簽篩選，適用于汽配等復(fù)雜型號產(chǎn)品的網(wǎng)站，主題包括 Cycle、Edges、Carfit。
注意：如在當(dāng)前主題中未能找到滿足需求的組件效果，或者想個性化設(shè)置文本、按鈕、背景、間距等，可以在應(yīng)用市場安裝使用【高階組件庫】。
五、編輯頁腳
頁腳可以放置政策頁面、郵箱訂閱、支付圖標(biāo)等內(nèi)容，提供網(wǎng)站相關(guān)信息的說明，提升用戶信任度。
1、在 SHOPLINE admin 中，點擊【在線商店】>【店鋪設(shè)計】>【設(shè)計】>【頁腳】。
2、點擊組件下的【添加內(nèi)容】，可以在頁腳編輯以下內(nèi)容：
- 快速導(dǎo)航：輸入導(dǎo)航標(biāo)題，會顯示在前臺中。點擊【更換】，鏈接之前設(shè)置好的菜單導(dǎo)航；
- 自定義內(nèi)容：支持輸入富文本。一般可以放置聯(lián)系方式、公司地址等；
- 圖片/LOGO：支持添加圖片并設(shè)置跳轉(zhuǎn)鏈接；
- 郵箱訂閱：支持自定義標(biāo)題、按鈕、輸入框文案；
- 展示其他頁腳工具：點擊【頁腳】組件，支持開啟或關(guān)閉工具展示。例如：社交媒體圖標(biāo)、語言選擇器、國家選擇器、貨幣選擇器、貨幣符號、支付渠道圖標(biāo)、版權(quán)信息、版權(quán)申明等。
注意：
- 頁腳將默認(rèn)應(yīng)用于所有頁面；
- 不同主題模板可設(shè)置的內(nèi)容略有差異，可根據(jù)實際情況進行設(shè)置。
六、編輯商品詳情頁
1、在 SHOPLINE admin 中，點擊【在線商店】>【店鋪設(shè)計】>【設(shè)計】，在頂部下拉選擇【商品詳情頁】。
2、可以在【商品詳情】組件中編輯以下內(nèi)容：
- 視頻：啟用視頻循環(huán)，自動播放視頻；
- 面包屑導(dǎo)航：是否顯示面包屑，面包屑布局；
- 備注：面包屑是在網(wǎng)頁中使用的一種次導(dǎo)航，它類似于一個”路徑”，例如“Home/Collection/Product”，能夠讓用戶清晰理解當(dāng)前頁面所處的位置，從而輔助用戶快速移動到他們希望移動到的某個位置；
- 商品圖：商品圖位置，商品圖大小，電腦端放大鏡，商品縮略圖位置；
- SKU：是否展示 SKU 編號，主圖展示 SKU 圖片，是否默認(rèn)選中 SKU。
OS 2.0 版本的主題還支持區(qū)塊拆分設(shè)置：標(biāo)題，摘要，價格，銷售信息，顯示庫存數(shù)量，SKU，多屬性選擇器，數(shù)量選擇器，購買按鈕，商品描述，分享，附加內(nèi)容，文本，自定義HTML。
注意：
只有 OS 2.0 及以上版本的主題模板支持設(shè)計【商品詳情】組件。
不同主題模板可設(shè)置的內(nèi)容略有差異，可根據(jù)實際情況進行設(shè)置。
七、編輯商品列表頁
在 SHOPLINE admin 中，點擊【在線商店】>【店鋪設(shè)計】>【設(shè)計】，在頂部下拉選擇【商品列表頁】。
2、可以在【商品列表】組件中編輯以下內(nèi)容：
- 分類：分類描述位置，子分類位置和列數(shù)，是否啟用無限滾動；
- 商品：商品數(shù)量，列數(shù)和行數(shù)，商品排序，商品摘要信息顯示，價格展示方式，是否展示原價；
- 商品圖：商品圖比例，商品圖填充方式，鼠標(biāo)懸停時顯示下一張圖，商品縮略圖位置。
注意：
- 只有 OS 2.0 及以上版本的主題支持設(shè)計【商品列表】組件；
- 不同主題模板可設(shè)置的內(nèi)容略有差異，可根據(jù)實際情況進行設(shè)置。
八、主題編輯器
當(dāng)前查看的模板的所有內(nèi)容會以樹形圖顯示在側(cè)邊欄中。
1、編輯組件
使用展開圖標(biāo) ? 來展開組件結(jié)點以查看其中的塊，還可以使用折疊圖標(biāo) ? 將其折疊來隱藏塊。點擊任何組件或塊來查看其設(shè)置，點擊“添加組件”可以增加組件。
2、移動組件
使用 ?? 圖標(biāo)來點擊并拖動組件或塊，然后將其拖放到其他可用位置。如果嘗試將組件或塊移動到不被允許的位置，則該分區(qū)或塊將被放回原始位置。
3、隱藏組件
使用眼睛圖標(biāo)隱藏任何組件或塊。
4、刪除組件
點擊進入組件或塊，刪除按鈕顯示在組件設(shè)置的底部。
九、主題設(shè)置
在基本搭建完網(wǎng)站的架構(gòu)后，可以進行網(wǎng)站布局和色彩搭配的調(diào)整，進一步裝修店鋪，使網(wǎng)站更符合品牌調(diào)性需求。
1、在 SHOPLINE admin 中，點擊【在線商店】>【店鋪設(shè)計】>【設(shè)計】>【主題設(shè)置】。
2、可以在主題設(shè)置中編輯以下內(nèi)容：
- 顏色：包括價格、按鈕、標(biāo)簽、彈窗等位置的背景和文字顏色；
- 字體：包括標(biāo)題、正文、頁頭等位置的文字字體和大??；
- 布局：包括頁面、組件、列表等位置的寬度和間距大??；
- 按鈕/多屬性選擇器/輸入框/內(nèi)容容器/媒體文件/下拉菜單和彈窗/抽屜：包括邊框和陰影等展示效果；
- 商品：優(yōu)惠標(biāo)簽和樣式；商品列表：快速加購/查看，商品圖比例，鼠標(biāo)懸停時顯示下一張圖片，商品標(biāo)題展示規(guī)則；商品詳情：顯示庫存數(shù)量，多屬性展示方式，數(shù)量選擇器，圖片放大，展示滑動箭頭，默認(rèn)選中 SKU，主圖展示 SKU 圖片，附加內(nèi)容；
- 分類：分類名展示樣式，分類圖比例；
- 購物車：打開購物車的方式；
- 結(jié)賬：包括結(jié)賬頁 Banner、Logo、內(nèi)容信息、訂單摘要等位置的圖片和樣式，結(jié)賬頁字體，結(jié)賬頁按鈕顏色；
- 社交媒體：開啟顯示社交媒體圖標(biāo)，放置社交媒體鏈接，實現(xiàn)點擊圖標(biāo)跳轉(zhuǎn)至目標(biāo)頁面；支持在商品詳情頁等頁面提供分享到社交媒體操作；
- 網(wǎng)站圖標(biāo)icon：上傳瀏覽器標(biāo)簽icon，尺寸 32*32 px。
注意：不同主題模板可設(shè)置的內(nèi)容略有差異，可根據(jù)實際情況進行設(shè)置。
十、發(fā)布主題
當(dāng)已經(jīng)完成了店鋪的設(shè)計，請點擊【保存】。
回到【店鋪設(shè)計】>【我的主題】界面，【當(dāng)前主題】是店鋪前臺所應(yīng)用的主題。
如果需要應(yīng)用其他設(shè)計好的主題，請下拉到【主題庫】，選擇想要發(fā)布的主題，點擊【操作】>【發(fā)布】即可。
