Custom CSS
Custom CSS can be found in the Theme settings ↗ section. Theme settings control the colors, typography and other common elements of your online store.
⬇️ On this page:
Custom CSS: overview
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 a template ↗ within your theme. Custom CSS isn't supported on the Checkout page.
Warning! This will override the theme's styles. This should be done by a skilled developer.
Considerations for using custom CSS ↗ is a great resource we recommend reviewing before adding custom CSS.
Additional resources:
Adding custom CSS
Customizing your CSS requires some familiarity with CSS and HTML. Custom CSS can be added to your entire theme that affects all pages in your online store except the Checkout page. For example, you can change the way that buttons are displayed across your entire store.
Steps to add custom CSS to the entire theme:
- In your Shopify admin, go to Online Store > Themes ↗.
- Click Customize.
- Click Theme settings.
- Click Custom CSS.
- Add your code.
- Click Save.
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.
To add custom CSS to a specific section:
- In your Shopify admin, go to Online Store > Themes ↗.
- Click Customize.
- Click the section that you want to add CSS to.
- At the bottom of the section properties panel, click Custom CSS.
- Add your code.
- Click Save.