在佈景主題中新增自訂 CSS

層疊樣式表 (CSS) 可變更佈景主題中各元素的呈現方式，並同時控制多個頁面的外觀。透過自訂 CSS 功能，您可以突破佈景主題的內建設定，進一步自訂佈景主題。例如，您可以use CSS to set gradients，調整佈景主題的顏色設定。您可以將自訂 CSS 套用至整個佈景主題，或套用至佈景主題中某個template的特定區段。「結帳」頁面不支援自訂 CSS。

自訂 CSS 需要具備一定的 CSS 與 HTML 基礎。在自訂佈景主題之前，請先瞭解what level of support is available。

本頁內容

使用自訂 CSS 的注意事項

在佈景主題加入自訂 CSS 之前，請先審閱以下注意事項：

自訂 CSS 不支援以下 CSS 選擇器與屬性：
- 不支援使用 at-rule @import、@charset、@namespace。
- 在區段層級的 CSS 中，只允許使用 at-rule @media、@container、@layer 以及 @supports。
- 在區段層級的 CSS 中，您不能針對佈景主題所渲染、包覆 Shopify Section 的外層元素之 ID 或類別 (class) 進行選取；該元素的類別為 shopify-section。
- 自訂 CSS 不支援 content 屬性。
若以包覆父層區段元素的標籤宣告自訂 CSS 規則，該標籤會視為後代標籤，樣式規則會套用至該區段。請注意，父層區段預設以 <div> 標籤包覆，但佈景主題開發者可在區段結構定義中將其設為permitted values之一。
目前在自訂 CSS 中使用 URL，僅允許 https://cdn.shopify.com 網域。
自訂字型不受限制。然而，自訂字型屬於獨立資源，瀏覽器會在文字渲染前先下載，可能影響商店的overall performance。您需自行確保線上店面不受自訂字型的負面影響。Learn how to use custom fonts in your theme。
影響整個佈景主題的 CSS 規則限 1,500 個字元。
影響特定區段的 CSS 規則限 500 個字元。
視您使用的 CSS 選擇器或類別而定，更新佈景主題可能會讓自訂 CSS 失效。

Shopify 不支援進階的佈景主題自訂作業。若您的自訂 CSS 因上述限制而發生錯誤，且無法判斷原因，請參考other support resources available。

新增自訂 CSS

自訂 CSS 可套用至整個佈景主題，影響網路商店的所有頁面，但不包括結帳頁面。例如，您可以變更整個商店的按鈕顯示方式。

步驟：

在 Shopify 管理介面中，前往網路商店 > Themes。
按一下編輯佈景主題。
按一下佈景主題設定。
按一下自訂 CSS。
新增您的程式碼。
按一下儲存。

您也可以將自訂 CSS 加到佈景主題的特定區段。若將自訂 CSS 套用到某個區段，則 CSS 只會作用在該區段。例如，您可以只在單一區段套用自訂字級或背景顏色。

步驟：

在 Shopify 管理介面中，前往網路商店 > Themes。
按一下編輯佈景主題。
按一下您要新增 CSS 的區段。
在區段屬性面板的底部，按一下 自訂 CSS。
新增您的程式碼。
按一下儲存。

其他 CSS 資源

自訂 CSS 需要具備一定的 CSS 與 HTML 基礎。在自訂佈景主題之前，請先瞭解what level of support is available。

如果您想進一步瞭解 CSS，可參考以下資源：