將自訂 CSS 加入您的佈景主題
階層式樣式表 (CSS) 會變更元素在您佈景主題中的顯示方式，並且可同時控制多個頁面的外觀。除了佈景主題內建的設定外，您還可以使用自訂 CSS 功能來自訂佈景主題。舉例來說，您可以在佈景主題的顏色設定中使用 CSS 設定漸層。您可以將自訂 CSS 加入您整個佈景主題，或加入您佈景主題內某個範本的特定區段。結帳頁面不支援自訂 CSS。
自訂 CSS 需要熟悉一點 CSS 和 HTML 語法。自訂佈景主題之前，請務必瞭解您可享有的支援等級。
使用自訂 CSS 的考量事項
在將自訂 CSS 加入佈景主題之前，請查看以下考量事項：
-
自訂 CSS 不支援下列 CSS 選擇器：
- 不得使用下列 @ 規則：
@import、@charset和@namespace - 若為區段層級的 CSS，僅允許下列 @ 規則：
@media、@container、@layer和@supports - 就區段層級的 CSS 而言，您在
shopify-section等級下，無法鎖定佈景主題所呈現且包圍 Shopify 區段元素的 ID 或等級
- 不得使用下列 @ 規則：
如果使用包圍父層區段元素的標籤來宣告自訂 CSS 規則，系統便會將其視為子元素標籤，且該樣式規則會套用至該區段。 請注意，父層區段會預設包圍在
<div>標籤內，但佈景主題開發人員可在區段結構中將其設為任何允許的值。在自訂 CSS 中使用網址時，目前僅允許此網域：https://cdn.shopify.com。
自訂字型並不受限。 但是，自訂字型是瀏覽器在呈現文字前下載的獨立資源，這可能會影響商店的整體成效。 您應負責確保店面不會受到自訂字型的負面影響。 瞭解如何在佈景主題中使用自訂字型。
影響整個佈景主題的 CSS 規則的字元數上限為 1500。
影響特定區段的 CSS 規則的字元數上限為 500。
根據您使用的 CSS 選擇器或類別，更新佈景主題可能會導致您的自訂 CSS 停止運作。
Shopify 不支援進階的自訂佈景主題。 如果您在自訂 CSS 時遇到與這些限制相關的錯誤，且無法確定導致錯誤的原因，請參閱其他可用的支援資源清單。
新增自訂 CSS
可將自訂 CSS 加入您整個佈景主題中，該佈景主題會影響您網路商店的所有頁面 (結帳頁面除外)。例如，您可以變更按鈕在整個商店中的顯示方式。
步驟：
- 在 Shopify 管理介面 中，前往「網路商店」>「佈景主題」。
- 按一下「自訂」。
- 點擊「佈景主題設定」。
- 點擊「自訂 CSS」。
- 加入您的程式碼。
- 點擊「儲存」。
自訂 CSS 也能加入佈景主題的特定區段。如果您將自訂 CSS 新增至佈景主題區段，則 CSS 範圍會設為該區段。舉例來說，您可以將自訂字型大小或背景顏色套用至單一區段。
步驟：
- 在 Shopify 管理介面 中，前往「網路商店」>「佈景主題」。
- 按一下「自訂」。
- 點擊要新增 CSS 的區段。
- 在區段屬性面板的底部，點擊「自訂 CSS」。
- 加入您的程式碼。
- 點擊「儲存」。
CSS 的其他資源
自訂 CSS 需要熟悉一點 CSS 和 HTML 語法。自訂佈景主題之前，請務必瞭解您可享有的支援等級。
若您有興趣深入瞭解 CSS，便可探索一些下列資源：