Adding custom CSS to your theme

A cascading style sheet (CSS) changes how elements are displayed in your theme, and can control the appearance of several pages at one time. You can customize your theme beyond the settings that are built into a theme by using the custom CSS feature. You can add custom CSS to your entire theme, or to a specific section of atemplate在你的主题。自定义CSS并不支持theCheckoutpage.

Customizing your CSS requires some familiarity with CSS and HTML. Before you customize your theme, make sure that you understandwhat level of support is available.

Considerations for using custom CSS

Before you add custom CSS to your theme, review the following considerations:

• The following CSS selectors are not supported in custom CSS:
  • At-rules@import,@charset, and@namespacecannot be used
  • For section-level CSS, only at-rules@media,@container,@layer, and@supportsare permitted
  • For section-level CSS, you can't target the ID or classes of the wrapping Shopify Section element rendered by the theme with theshopify-sectionclass
• If a custom CSS rule is declared with the tag that's wrapping the parent section element, then it's considered a descendent tag, and the styling rule is applied to that section. Note that by default the parent section is wrapped in a
  tag, but this can be set to any of thepermitted valuesin the section schema by theme developers.
• Currently only the https://cdn.shopify.com domain is permitted when using URLs in custom CSS.
• Custom fonts aren't restricted. However, custom fonts are a separate resource that are downloaded by browsers before text is rendered, which can impact a store'soverall performance. It's your responsibility to ensure that your storefront isn't negatively affected by custom fonts.Learn how to use custom fonts in your theme.
• CSS rules that affect the entire theme are limited to 1500 characters.
• CSS rules that affect a specific section are limited to 500 characters.
• Depending on the CSS selectors or classes you use, updating your theme might cause your custom CSS to stop functioning.

Shopify doesn't support advanced theme customizations. If you encounter an error related to these limitations in your custom CSS and can't determine what's causing the error, then refer to the list ofother support resources available.

Add custom CSS

Custom CSS can be added to your entire theme that affects all pages in your online store except theCheckoutpage. For example, you can change the way that buttons are displayed across your entire store.

Steps:

1. In your Shopify admin, go to欧宝体育官网入口首页>Themes.
2. ClickCustomize.
3. ClickTheme settings.
4. ClickCustom CSS.
5. Add your code.
6. ClickSave.

Custom CSS can also be added to a specific section of your theme. If you add custom CSS to a section of your theme, then the CSS is scoped to that section. For example, you can apply a custom font size or a background color to a single section.

Steps:

1. In your Shopify admin, go to欧宝体育官网入口首页>Themes.
2. ClickCustomize.
3. Click the section that you want to add CSS to.
4. At the bottom of the section properties panel, clickCustom CSS.
5. Add your code.
6. ClickSave.

Additional resources for CSS

Customizing your CSS requires some familiarity with CSS and HTML. Before you customize your theme, make sure that you understandwhat level of support is available.

If you're interested in learning more about CSS, then you can explore some of the following resources:

• CSS basics
• Learn to style HTML using CSS
• CSS reference
• CSS selectors