店面級別設定|SHOP Builder

4. EC + SC.png

SHOPLINE SHOP Builder 支援編輯店面級別的相關設定!您可以自訂網店各區塊的顏色、字體,還可以調整商品列表相關的設定,讓您設計網頁可以兼顧風格及使用者體驗。

本文將介紹:

⚠️ 開始前請注意:

  • SHOP Builder 目前僅支援 Ultra ChicKingsman、Varm、Philia 版型使用。
  • 使用 SHOP Builder 建立分頁後,若切換其他店面版型,該分頁仍然可以顯示,但無法編輯且可能發生跑版情形,在確認發佈分頁前請多加留意。
  • 店面級別設定的調整會影響整間商店的所有頁面,並非特定分頁。pastedGraphic.png

 

 一、前往「店面級別設定」

前往「SHOPLINE 後台 > 網店設計 > 網店分頁 」 ,點按「進階分頁」按鈕。CN 0.1.png

點按左側欄的「店面級別設定」按鈕。Storefront_Revamp_CN_2.png

二、選擇/切換主題

左側欄往下拉可看到目前選擇的主題。若想更換主題,請點按「前往設計」按鈕。Storefront_Revamp_CN_3.png

您將被導回後台的「網店設計 > 設計」頁面,在這裡可以選擇想切換的主題。Storefront_Revamp_CN_4.png

切換新主題可能會有以下兩種情況:

1. 若新主題支援 SHOP Builder

  • SHOP Builder 中,字體、顏色等既有數值維持不變。
  • 前台店面套用新主題,既有設定也維持不變。
  • 目前支援 SHOP Builder 的主題為 Kingsman、Ultra Chic 及 Varm,未來將陸續開放更多主題支援 SHOP Builder

2. 若新主題不支援 SHOP Builder

  • SHOP Builder 中,字體、顏色等既有數值維持不變,但此時無法再進入 SHOP Builder
  • 前台店面套用新主題,各設定回復預設值。
  • 若又切換回原本的主題,您原先於 SHOP Builder 儲存的既有設定將清空,回復預設值。

*注意:若已經使用 SHOP Builder,建議您維持使用支援 SHOP Builder 的主題,以免失去已經設定完畢的各項數值。

套用新主題後,請再依照「一、前往「店面級別設定的步驟回到 SHOP Builder 繼續設定。

 

三、調整店面級別設定

店面級別設定可以調整「色彩」、「文字」、「手機」、「商品」、「其他」共 5 大項。 Storefront_Revamp_CN_5.png

1. 色彩

前往「店面級別設定 > 色彩」,您可以針對進階分頁的不同區塊自訂適合的顏色。各區塊的預設顏色為您原本設定的顏色。
*注意:選定色彩後須點按左側欄下方的「儲存」按鈕,變更才會顯示於右側預覽畫面。
Storefront_Revamp_CN_6.png

A. 頁面

可以設定頁面背景、文字(文字類元件)、超連結的顏色。Storefront_Revamp_CN_7.png

B. 公告欄

可以設定上方公告欄的背景、文字顏色。Storefront_Revamp_CN_8.png


C. 頁首

可以設定頁首的背景、文字、圖標顏色。Storefront_Revamp_CN_9.png

D. 主要按鈕

可調整主要按鈕、按鈕文字的顏色。Storefront_Revamp_CN_10.png

E. 立即購買按鈕

可以調整商品頁面中立即購買按鈕、按鈕文字的顏色。有關立即購買功能的詳細介紹,請參考立即購買功能|進階設計設定Storefront_Revamp_CN_11.png

F. 頁尾

可以調整頁尾的背景、文字、圖標顏色。Storefront_Revamp_CN_12.png

 

G. 版權聲明

可以調整版權聲明的背景、文字顏色。Storefront_Revamp_CN_13.png

 

H. 商品促銷標籤

*注意:此功能目前僅支援 Ultra Chic 版型,您只有在套用 Ultra Chic 版型時能使用此功能。

可以調整商品促銷標籤的背景、文字顏色。1.png

 

2. 文字

前往「店面級別設定 > 文字」,您可以針對文字類元件的文字進行調整,選擇字體或調整大小。字體預設為原先您設定的字體。

*注意:調整文字後須點按左側欄下方的「儲存」按鈕,變更才會顯示於右側預覽畫面。Storefront_Revamp_CN_14.png

A. 標題

調整標題的字體及大小。點按「變更」可以選擇字體,點按「重新設置」則可以變回預設字體。在「字體大小」欄位可選擇標題的字體大小(大/中/小)。Storefront_Revamp_CN_15.png


B. 內容

調整副標題、內文的字體及大小。點按「變更」可以選擇字體,點按「重新設置」則可以變回預設字體。在「字體大小」欄位可選擇副標題的字體大小(大/中/小)。Storefront_Revamp_CN_16.png

*注意:

  • 目前暫無支援包含多種語言的標題/內文使用兩種以上的字體(若您的標題有英文及中文,您僅能使用一種字體)。
  • 若所選擇的字體不支援消費者瀏覽語系,則消費者端將看到該語系的預設字體。以下為常用語系的預設字體:
    • 繁體中文:Noto sans TC
    • 簡體中文:Noto sans SC
    • 英文/德文/法文/馬來文:Noto sans 
    • 泰語:Noto sans TH
    • 越南語:Noto sans VN
    • 日語:Noto sans JP
  • 以下為各語系支援的字體列表:
    繁中支援字體 New.png
  • 中文字體 M PLUS Rounded 1c 為一種日文漢字。雖然您可以在輸入中文字元時選擇它,但可能存在部分無法相應的漢字字元。因此,在使用 M PLUS Rounded 1c 時,沒有對應的漢字字元將以預設字體顯示。

 

3. 手機

前往「店面級別設定 > 手機」,您可調整您的商店目錄在手機上呈現的畫面。
*注意:調整完手機相關設定後須點按左側欄下方的「儲存」按鈕,變更才會顯示於右側預覽畫面。pastedGraphic.png


A. 手機目錄子目錄不展開

開啟「手機目錄子目錄不展開」開關後,在手機版選單中的「網店目錄」將不會預設展開子目錄;若關閉此開關,手機版選單中的「網店目錄」會預設展開所有子目錄。pastedGraphic_1.png


手機版畫面如下:pastedGraphic_2.png


B. 手機隱藏商品分類

開啟「手機隱藏商品分類」開關後,在手機版選單中的「網店目錄」將不會出現商品分類;若關閉此開關,手機版選單中將出現「分類」區塊,展示您商店後台所設定的商品分類。pastedGraphic_3.png


手機版畫面如下:pastedGraphic_4.png

 

4. 商品

前往「店面級別設定 > 商品」,您可調整您網店商品的相關設定。pastedGraphic_1.png

*注意:

  • 調整完商品相關設定後須點按左側欄下方的「儲存」按鈕,變更才會顯示於右側預覽畫面。
  • 每個設定項目皆有以標籤形式註記該開關會影響前台的哪些層面。如子分類不展開會影響商品列表頁、手機目錄。
    pastedGraphic.png

 

A. 子分類不展開

您可以調整網店目錄/分類的格式。開啟「子分類不展開」開關,您網店的商品分類將收合子分類,若關閉此開關,商品分類將自動展開子分類。pastedGraphic_2.png


B.
自動剪裁商品圖

您可選擇是否裁切商品圖,開啟「自動剪裁商品圖」開關,系統將自動將所有商品圖剪裁為統一大小,若關閉此開關,則圖商品圖將以原圖檔比例呈現。pastedGraphic_3.png

 

C. 規格選項圖片顯示樣式

*注意:

  • 此功能目前僅支援 Ultra Chic 版型,您只有在套用 Ultra Chic 版型時能使用此功能。
  • 若您有開啟 layout engine,您需自行更新 liquid,此功能的效果才會在前台生成。

若您有多規格商品,您可以選擇商品列表頁中的商品規格圖的形狀,目前有方形、圓形 2 種可供選擇。您還可以選擇規格圖的大小(小、中、大)。pastedGraphic_4.png


D.
商品列表顯示規格選項圖片

若您有多規格商品,開啟「商品列表顯示規格選項圖片」開關後,多規格商品下將顯示您設定的規格圖片。pastedGraphic_5.png


規格圖片可選擇您設定的「第一組規格」或「第二組規格」。例如:第一組規格為「顏色」,第二組規格為「尺寸」,選擇顯示「第一組規格」時,商品下方的規格圖片將顯示不同顏色的商品。設定商品規格的詳細流程,請參閱商品規格與款式|商品
pastedGraphic_6.png

 

E. 商品名稱文字對齊

*注意:

  • 此功能目前僅支援 Ultra Chic 版型,您只有在套用 Ultra Chic 版型時能使用此功能。
  • 若您有開啟 layout engine,您需自行更新 liquid,此功能的效果才會在前台生成。

您可以調整商品列表頁中商品名稱的對齊格式,您可選擇置左、置中、置右。商品名稱文字對齊不會影響規格圖片的顯示。pastedGraphic_7.png

 

F. 自訂標籤樣式

*注意:

  • 此功能目前僅支援 Ultra Chic 版型,您只有在套用 Ultra Chic 版型時能使用此功能。
  • 若您有開啟 layout engine,您需自行更新 liquid,此功能的效果才會在前台生成。

您可自訂商品標籤的樣式,目前共有圓角、方角、箭頭 3 種樣式可選,若您沒有調整,則會依預設樣式呈現。有關促銷標籤的設定說明,請參考商品促銷標籤pastedGraphic_8.png

pastedGraphic_9.png

 

G. 商品分類總數量

*注意:

  • 此功能目前僅支援 Ultra Chic 版型,您只有在套用 Ultra Chic 版型時能使用此功能。
  • 若您有開啟 layout engine,您需自行更新 liquid,此功能的效果才會在前台生成。

「商品分類總數量」開關預設關閉,開啟後,前台商品分類的名稱旁會出現該商品分類擁有的商品總數量。
pastedGraphic_10.png

 

H. 預設每頁顯示商品數量

您可以選擇商品列表頁每頁預設顯示的商品數量,目前可選擇每頁 24、48、72 個商品。顧客仍可在前台選擇當頁要顯示的商品數量。
pastedGraphic_11.png

 

I. 商品頁面中的社群分享按鈕

此開關預設開啟,即隱藏將不會出現社群分享的按鈕。若關閉此開關,則顧客可以透過按鈕分享商品。pastedGraphic_12.png

5. 其他

前往「店面級別設定 > 其他」,可設定店面級別的其他設定。

*注意:調整完其他設定設定後須點按左側欄下方的「儲存」按鈕,變更才會顯示於右側預覽畫面。pastedGraphic_13.png


A.
回到頁面頂端

開啟「回到頁面頂端」開關,在商店前台往下滑後將出現回到頁面頂端的按鈕,反之關閉則按鈕消失。pastedGraphic_14.png


B. 啟用 Cookies 授權提示

開啟「啟用 Cookies 授權提示」,顧客造訪網店時,系統將出現使用 Cookies 的提示,反之關閉則提示消失。有關啟用 Cookies 授權提示的詳細功能介紹,請參考此篇文章pastedGraphic_15.png

 

四、發佈頁面

完成店面級別設定後,您可以點按右上方的「預覽商店」,查看商店前台的呈現效果。CN 15.png


確認無誤後點按「發佈」,您自訂的店面級別設定便會套用的您的網店。
CN 16.png

 

延伸閱讀

 

 

 

 

 

還有其他問題?提交請求

評論