新增自訂 CSS
請先使用 App 自己的樣式設定，只有在這些設定無法涵蓋的少數情況，才在佈景主題中新增 CSS。
App 的樣式設定已涵蓋大多數商店的需求。當它們不夠用時，例如特定的圓角半徑，或只該套用在手機上的微調，您可以加入自己的 CSS。
先從內建設定開始
Section titled “先從內建設定開始”人們想用 CSS 做的外觀變更，幾乎都已經是 Quote settings > Customize 中的設定。在動手寫任何內容之前，請先檢查這些設定。
| 位置 | 可設定的項目 |
|---|---|
| Button & widget > Style | Button type (Filled / Outline / Text link)、Size (Medium / Large / Full width)、Text color、Background color 和 Font size。 |
| Quote form > Style | 樣式預設組合，以及 Match theme styling if possible。 |
| Quote form > Customize text | Font style。 |
| Quote form > Customize form color | Title bar color、Title bar background、Color、Background color、Border color 和 Quote popup primary color。 |
| Quote cart page > Enable Quote Cart Widget | Text color 和 Background color：這是浮動小工具僅有的兩項設定。 |
大多數外觀變更其實已經是設定項目，請先從這裡開始。
將您的 CSS 放在哪裡
Section titled “將您的 CSS 放在哪裡”無論您把自訂 CSS 放在哪裡，都要放在您能再次找到並能還原的地方。把 CSS 放在自己的佈景主題中有個好處：它會隨佈景主題一起版本化，所以在編輯之前先複製佈景主題，就能有可以回復的版本。
找出要指定的目標
Section titled “找出要指定的目標”在商店前台的元素上按右鍵，並選擇 檢查。這會顯示您可以用來撰寫規則的 class 名稱。
在您自己的商店前台檢查報價按鈕，找出要指定的目標。
開始之前，有兩件事值得知道：
- 報價按鈕會以您設定的 Button text 顯示，並位於您在 Button position 下選擇的位置，因此在尋找它之前，請先確認 Product page button position。
- 標示為 Quote (n) 的浮動報價小工具，位於 class 為
grfq-quote-widget-container的容器中。
幾項實用原則
Section titled “幾項實用原則”| 原則 | 原因 |
|---|---|
| 一次只改一個地方 | 出問題時，您就知道是哪條規則造成的。 |
| 在手機上測試 | 大多數詢價來自手機，只針對桌面版的微調常會在手機上出問題。 |
| 在其他地方保留一份副本 | 也將您的 CSS 貼到備忘錄中，需要時就能還原。 |
盡量避免使用 !important | 它今天有效，但會讓之後的每次變更都更困難。 |
| 為每條規則加上註解 | 六個月後，一段沒有說明的 CSS 沒人敢刪除。 |
變更佈景主題之後
Section titled “變更佈景主題之後”請先從新佈景主題上的應用程式嵌入開始。它是在您的佈景主題中啟用的，在啟用之前，App 的任何功能都不會出現在您的商店前台，請參閱在佈景主題中啟用 App。
接著檢查您的 CSS。它是針對您佈景主題的標記所撰寫，因此在更換佈景主題或佈景主題大幅更新之後，請查看您的報價按鈕、報價表單和浮動小工具，規則可能需要調整。