自訂 CSS

「設定」中有一個自訂 CSS 欄位，供您商店中所有活動的小工具共用。適合用於活動自身「Widget › Style」分頁沒有涵蓋的細節調整 — 例如比對字型、調整間距、重新設計邊框樣式，或隱藏某個元素 — 而不是用來從頭打造一個完全不同的小工具。Style 分頁已經以簡單欄位涵蓋顏色、間距、圓角與效果；只有在那些欄位不夠用時，才需要用到自訂 CSS，因為在此加入的規則會套用到所有地方，而不只是單一活動。

您的 CSS 會在小工具自身樣式之後載入，因此大多數變更不需要加上 !important 就能覆寫。

限制

規則	數值
最大長度	10,000 個字元
禁止內容	CSS 中任何位置出現 `</` 字元

僅支援純 CSS。之所以禁止 </，是因為您的 CSS 會以行內方式嵌入商品頁面的 <script> 標籤中，同時也會透過 CDN 提供 — 這個確切的字元序列可能會提早關閉外層標籤，而真正的 CSS 從來不需要用到它。除此之外沒有其他黑名單：選取器、@media 查詢、動畫與自訂屬性都可以正常使用。

變更會在您下一次發佈時立即生效，只要您點選儲存，發佈就會隨即開始 — 沒有另外一個「發佈 CSS」的步驟。

範例

應用程式並未公開發佈類別參考文件，因此請使用瀏覽器的檢查工具，在實際的商品頁面上找出您想鎖定的類別。以下範例使用目前小工具標記中的真實類別。

讓小工具的字型與您的佈景主題一致：

.sfw { font-family: inherit; }

僅在 Option cards（卡片選項）版面配置中將價格加粗：

.w-cards .price { font-weight: 700; }

若您希望小工具更精簡，可隱藏「You save」（省下）文字：

.you-save { display: none; }

僅在窄螢幕上縮小間距，因為 @media 查詢可正常運作：

@media (max-width: 480px) {
  .sfw { padding: 8px; }
}

相關連結：小工具版面配置、小工具文字與翻譯。