自訂 CSS

操作指南 所有方案 1 分鐘閱讀

當設定、字型和顏色無法滿足您的需求時（例如特殊的懸停效果、單一項目的字型大小，或佈景主題的小修正），請使用 Stylesheet / CSS（樣式表 / CSS）。CSS 會隨選單一起儲存，並在您發佈時加入到店面。

注意

自訂 CSS 需要具備基本的 CSS 知識。如果您不想自己寫程式碼，請與我們聯絡，我們會免費協助進行小幅度的樣式調整。

新增自訂 CSS

1. 開啟進階分頁

   在選單編輯器中，點擊左側邊欄的 Advanced（進階）圖示（</>）(1)。

   

   開啟 Advanced 分頁 (1)，然後在 Stylesheet / CSS 中輸入您的 CSS (2)。

2. 加入您的 CSS

   在 Stylesheet / CSS (2) 中輸入或貼上您的 CSS，取代 //enter css custom here 預留文字。

3. 儲存並發佈

   點擊 Save（儲存），然後點擊 Publish（發佈）。強制重新整理您的店面即可查看結果。

鎖定正確的元素

CSS 會原封不動地加入頁面，且不限於這個選單，因此請限定選擇器的範圍：

• 所有選單：以 .gm-menu 開頭。
• 單一選單：以 .gm-menu-<ID> 開頭。若要找出 ID，請在店面的選單上按一下滑鼠右鍵，然後選擇 Inspect（檢查）。
• 單一項目：在項目設定的 Advanced 區段中為它設定 Extra classname（額外類別名稱）（請參閱編輯選單項目），然後使用該類別。

例如，若要讓額外類別名稱為 sale-item 的項目以粗體紅字顯示：

.gm-menu .sale-item > .gm-target {
  color: #d72c0d !important;
  font-weight: 700 !important;
}

Advanced 分頁中也有 Market availability（市場供應情況），可將選單限制在選定的市場，請參閱依市場顯示選單。

疑難排解

我的 CSS 沒有效果

• 請確認您在儲存後有點擊 Publish。
• 應用程式本身的樣式經常使用 !important，因此您的規則可能也需要加上。
• 檢查是否有打字錯誤，例如少了 }：一個錯誤就可能讓後面的規則全部失效。

相關頁面

• 調整選單顏色設定選單列、子選單、分頁、商品標籤與加入購物車按鈕的顏色。
• 調整選單字型為選單的每個部分選擇字型系列、字重與字型大小。
• 編輯選單項目變更項目的標題、連結、圖示、顏色、徽章、子選單與顯示設定，或複製、移動和刪除項目。

這個頁面有幫助嗎？

回報問題