Making minor font, color, and layout edits using Custom CSS
Shopify has added a feature to all themes where you can add some custom CSS code to your theme without having to edit the actual template files or stylesheet. This is a nice feature because it ensures that these changes will still be in place if you choose to update your theme version later. It is possible to add custom CSS globally to your entire site, or just to an individual section on your theme.
In this article
Add custom CSS to your entire store
Adding CSS here will affect all pages in your store except for the checkout page. This is useful if you wanted to change the appearance of all buttons throughout your store, for example. To access this, please follow these steps:
- 1
- In your Shopify admin, go to Sales Channels > Online Store > Themes
- 2
- Click Customize next to the theme you want to edit
- 3
- Click the small gear icon in the upper left to view Theme settings
- 4
- Click the Custom CSS heading to display the code editor box
- 5
- Add your code and click Save
Add custom CSS to a single section
Adding CSS here will affect just the section you add it to. Note that if you add some custom CSS to a section, those changes will appear everywhere on your store that this section is added. To add this code, please follow these steps:
- 1
- In your Shopify admin, go to Sales Channels > Online Store > Themes
- 2
- Click Customize next to the theme you want to edit
- 3
- Click the section for which custom CSS should be added
- 4
- At the bottom of the section properties panel, click Custom CSS
- 5
- Add your code and click Save
