部落格元件|SHOP Builder

4. EC + SC.png

透過 SHOP Builder 新增或編輯進階分頁時,您可以增加「部落格」元件,將您既有的部落格文章顯示在進階分頁內,還能調整部落格圖文在進階分頁內的排版比例、新增「閱讀內文」按鈕等等,提升您的文章觸及率,輕鬆導入網路流量。

⚠️ 開始前請注意:

  • SHOP Builder 目前僅支援 Ultra Chic、Kingsman、Varm、Philia 版型使用。
  • 使用 SHOP Builder 建立分頁後,若切換其他店面版型,該分頁仍然可以顯示,但無法編輯且可能發生跑版情形,在確認發佈分頁前請多加留意。

本文將介紹:

 

一、新增部落格元件

步驟一

前往「SHOPLINE 後台 > 網店設計 > 網店分頁」,選擇您想增加部落格元件的進階分頁,點按「編輯」;或點按「進階分頁」建立新分頁。

若您想了解如何建立進階分頁,請參考:此篇文章

1.png

 

步驟二

點按「元件」按鈕。

2.png

 

步驟三

點按「內容 > 部落格」元件。

3.png

 

步驟四

左側編輯欄「數量」選單下拉,可以設定您想顯示的部落格文章數量。

若您想了解如何新增部落格文章,請參考:此篇文章

*注意:

部落格文章預設依新增順序先後排列,暫不支援其他排列方式。

____.png

 

步驟五

「標題」欄位可以自訂您的部落格元件標題,標題將呈現在圖中箭頭處,下方「標題對齊」按鈕可調整標題位置。

__.png

 

步驟六

「切換樣式」用來調整您的部落格文章呈現樣式,共有水平陳列、垂直陳列 2 種。

  • 水平陳列
    1. 電腦版:依文章新增順序由左至右排列,若顯示數量超過 4 篇則會以輪播方式呈現。
    2. 手機版:因版面有限,依文章新增順序一行一篇,以輪播方式呈現。

____.png

  • 垂直陳列
    1. 電腦版:依文章新增順序由上至下排列。
    2. 手機版:因版面有限,依文章新增順序一行一篇,以輪播方式呈現。

____.png

 

步驟七

「圖片比例」分成電腦、手機兩個欄位,您可以自訂部落格文章圖片呈現比例。

____.png

 

步驟八

「文章對齊」欄位可以自訂部落格文章標題、簡介、按鈕等資訊對齊位置。

*注意:

此功能不會改變部落格文章圖片對齊位置。

____.png

 

步驟九

開啟「顯示文章按鈕」,每篇部落格文章下方會出現「閱讀內文」按鈕,顧客可以點按進入查看全文。

開啟「顯示列表按鈕」,則會在部落格元件底部出現「查看更多」按鈕,顧客可以點按進入您的商店部落格,查看所有已發佈的部落格文章。

____.png

 

步驟十

若您設定顯示的部落格文章數量超過 4 篇,您可以自訂部落格文章輪播的「滑動樣式」,樣式共分為「按鈕」、「圓點」、「滑動條」3 種。

  • 滑動樣式示意圖:按鈕

__.png

  • 滑動樣式示意圖:圓點

__.png

  • 滑動樣式示意圖:滑動條

___.png

 

步驟十一

「元件間距」功能可以讓您自訂進階分頁中的各元件間距。

____.png

 

步驟十二

確認完成上述設定後,請點按右上角「發佈」按鈕,讓顧客在商店前台可查看此分頁所有新增的內容。

__.png

 

二、注意事項

  • 如果您想在右側預覽畫面查看功能套用效果,請先點按左側編輯欄底下的「儲存」。
  • 部落格文章顯示數量上限為 12 篇。

 

 

 

延伸閱讀

 

 

 

 

 

 

 

 

 

還有其他問題?提交請求

評論