Therefore, like all third-party theme developers, we are unable to provide coding customizations as per Shopify's official guidelines.
To customize your theme, use the theme settings to change your storefront's colours, typography, and other stylistic features. If you want to make changes to your storefront with options that are not within the theme editor, you can change the theme's code. Some of these changes may include:
- Custom changes made by you, the merchant (such as by following tutorials to amend the theme).
- Custom changes made by a developer.
- Installing (and uninstalling) apps.
Step 1: Duplicate Your Theme
Due to the far-reaching and potentially compromising nature of altering theme code-files, Shopify recommends duplicating your theme to create a backup copy before adding custom code.
The backup gives you a chance to start again, if you need to.
- Within your Shopify admin, go to Online Store > Themes.
- Select your theme.
- Click the ellipsis (three-dot icon) and then Duplicate.
Here at Eight, we strongly recommend following Shopify's advice and duplicating your working theme for worst-case scenarios.
How to Edit Your CSS
There are two ways to edit a theme's CSS.
1. Via Theme settings within the theme editor
This is a quick way to add custom CSS. Another benefit of this approach is that the code will be copied over if you decide to update your theme. This method overwrites the default CSS and anything added to the custom.css file within the theme and is transferable with a theme update without manual duplication.
To update your CSS within the theme editor:
- Go to Online Store > Customize > Theme settings > Styles > Custom CSS.
- Paste the custom CSS into the field.
- Click Save.
Via a stylesheet
This is the traditional way to update CSS. The downside is that it will not be copied over if you decide to update the theme.
This code overwrites the themes default styles but will be overwritten by anything added to the Custom CSS global setting in the theme editor under (as described above).
To find the theme's stylesheet:
- Log in to your Shopify store.
- Click Online Store > Themes.
- Click the ellipsis (three-dot icon) and then Edit code.
- Scroll down the left panel and click Assets.
- Click custom.css. A new window displays.
- Add CSS code to the window.
- Click Save.