設定商品標語與商品簡述文字
客製商品頁面上的「商品標語」與「商品簡述」文字樣式¶
客製商品頁面上的「商品標語」與「商品簡述」文字樣式，以符合品牌風格並提升資訊可讀性。
功能概述¶
商品頁面標語與簡述的客製化功能，允許您精確控制文字的視覺呈現，包括顏色、字型、大小及分行設定。您可以選擇針對單一商品進行細部語法編輯，或透過後台的程式碼編輯器進行全站範圍的統一樣式調整，確保品牌視覺一致性並優化顧客瀏覽體驗。
使用情境¶
- 品牌風格統一：確保商品頁面文字樣式符合品牌視覺規範。
- 提升資訊可讀性：透過調整文字大小與顏色，使商品標語和簡述更易於閱讀。
- 突顯商品特色：利用客製化樣式，強調商品的核心賣點或促銷資訊。
操作流程¶
您可以透過以下兩種方法設定商品標語與簡述的文字樣式：
個別商品樣式修改¶
此方法適用於針對單一商品的「商品標語」與「商品簡述」進行客製化樣式設定。
步驟一：進入商品編輯頁面¶
- 登入 CYBERBIZ 後台，前往 商品 → 所有商品。
-
點選您欲編輯的商品，進入 商品編輯頁面。
步驟二：產生 HTML 樣式碼¶
若您不熟悉 HTML 語法，可透過以下步驟快速產生樣式碼：
- 點擊 商品描述 欄位。
- 將編輯器模式從「標準」切換為「標準(DIV)」。
- 在編輯區輸入您想要的文字，並設定文字顏色、大小等樣式。
- 點擊編輯器中的 原始碼 按鈕，複製產生的 HTML 程式碼。
- 將商品描述欄位內的程式碼刪除，僅保留需要使用的部分，以避免前台顯示錯誤。
為什麼要刪除商品描述中的程式碼？
為避免商品描述內容顯示錯誤，複製 HTML 程式碼後，請務必將商品描述欄位內的程式碼刪除，僅保留您需要使用的部分。
步驟三：貼上並儲存樣式碼¶
- 將複製的 HTML 程式碼貼入 商品標語 或 商品簡述 欄位。
-
點擊 儲存。
步驟四：驗證前台顯示¶
前往商品頁面，確認文字樣式已依設定修改。
語法編輯優先級
「商品標語」與「商品簡述」欄位中的語法編輯設定，其優先級高於「樣版編輯器」的全站設定。因此，個別商品設定的樣式將會覆蓋全站樣式。
全站樣式調整¶
此方法適用於對所有商品頁面的「商品標語」與「商品簡述」進行統一的樣式調整。
步驟一：開啟開發人員工具¶
- 進入您的網頁商品頁面。
-
點選瀏覽器右上角「工具」→「更多工具」→「開發人員工具」或使用快捷鍵 Ctrl+Shift+I。
步驟二：查找目標 CSS 樣式¶
- 在開發人員工具中，點選左上角的「選取元素」箭頭圖示。
- 將滑鼠游標移至您想修改的「商品標語」或「商品簡述」文字上，點擊左鍵。
-
在右側的 Styles 面板中，查找並複製相關的 CSS 程式碼。
步驟三：修改 CSS 樣式¶
- 登入 CYBERBIZ 後台，前往 網站外觀 → 套版主題管理 → 程式碼編輯器。
- 開啟
css/theme_main.css檔案。 - 將複製的 CSS 程式碼貼到檔案的最下方。
-
根據需求，修改
color或font-size等屬性值。您可參考 色碼表 選擇合適顏色代碼。
注意事項
拖拉版型不支援部分程式碼編輯功能，請以後台開放功能為主。
- 公開版型程式碼可自行調整，但建議先備份原始檔案。
- 若需進一步客製化修改，請委託具備經驗的工程師處理。
步驟四：驗證前台顯示¶
回到商品頁面，確認所有商品的「商品標語」與「商品簡述」已統一更改為您設定的樣式。
回溯修改
樣版編輯器提供「查看之前版本」功能，「1」為預設值，可隨時回溯至預設值或修改前版本。詳情請參考 恢復樣版編輯器。
常見問題¶
為什麼我的群組頁面出現跑版？
這通常是 HTML 語法編輯錯誤所導致，例如標籤未正確閉合。
- 正確寫法：
<span style="color:black;">浙江風味，甘鹹好下飯</span> - 錯誤範例：
<span style="color:black;">浙江風味，甘鹹好下飯> - 建議：HTML 相關問題仍委託專業人士處理，CYBERBIZ 無法提供個別協助。
CYBERBIZ 是否提供個別程式碼修改協助？
CYBERBIZ 僅提供現有文件內修改資訊，無法提供文件外程式碼修改協助。若需進一步修改，可透過 APP MARKET 聯繫 外部設計廠商。