添加自定义 CSS
先使用应用自带的样式设置，只有在这些设置未涵盖的少数情况下，才在模板中添加 CSS。
应用的样式设置涵盖了商店所需的大部分内容。当它们不够用时（例如特定的圆角半径，或仅应在手机上生效的调整），您可以添加自己的 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 “找到要定位的元素”在您的店面中右键点击该元素并选择 Inspect。这样可以看到用于编写规则的类名。
在您自己的店面中检查报价按钮，找到要定位的内容。
开始之前，有两点值得了解：
- 报价按钮会显示您设置的 Button text，并位于您在 Button position 下选择的位置，因此在去找它之前，请先查看 Product page button position。
- 悬浮的报价小组件（标签为 Quote (n)）位于类名为
grfq-quote-widget-container的容器中。
几条实用规则
Section titled “几条实用规则”| 规则 | 原因 |
|---|---|
| 一次只改一处 | 出问题时，您就知道是哪条规则导致的。 |
| 在手机上测试 | 大多数报价请求来自手机，仅针对桌面端的调整往往会在手机上出问题。 |
| 在别处保留一份副本 | 将您的 CSS 也粘贴到一份笔记中，以便在需要时恢复。 |
尽量避免使用 !important | 它今天能生效，但会让以后的每次更改都更困难。 |
| 为每条规则添加注释 | 六个月后，一段没有说明的 CSS 没有人敢删除。 |
更换模板之后
Section titled “更换模板之后”请先从新模板上的应用嵌入开始检查。它需要在您的模板中启用，在启用之前，应用所做的任何内容都不会出现在您的店面上，请参阅 在模板中启用应用。
然后检查您的 CSS。它是针对您模板的标记编写的，因此在切换模板或进行重大模板更新后，请查看您的报价按钮、报价表单和悬浮小组件，规则可能需要调整。