Therefore, like all third-party theme developers, we are unable to provide coding customizations as per Shopify's official guidelines.
To customize your theme, you can use your theme settings to change your storefront's colors, typography, and other stylistic features. However, if you wish to make changes to your storefront that are not options within your theme editor, you can do so by changing your 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, allowing you to start again if you need to.
- Within your Shopify admin, go to Online Store > Themes.
- Select your theme, and click Actions > Duplicate.
Here at Eight, we strongly recommend following Shopify's advice and duplicating your working theme for worst-case scenarios.
Step 2: Edit Your Theme Code
To alter your theme code, use your theme's code editor:
- Under Sales Channels with your Shopify admin, go to Online Store > Themes.
- Select your theme.
- Click Actions, and select Edit Code from the drop-down menu.
How to Edit Your CSS
There are 2 methods to edit your themes CSS:
Via Theme settings within the theme editor
This is a quick way to add custom CSS and will be copied over if you decide to update your theme.
This will overwrite both default CSS and anything added to the custom.css file within the theme.
To update your CSS within the theme editor go to Online store > Customise > Theme settings > Custom styles > Custom CSS and add your custom CSS and save.
Via a stylesheet
Located in the themes code. This option gives a more traditional way of updating CSS but will not be copied over if you decide to update the theme.
This code will overwrite the themes default styles but will be overwritten by anything added to the Custom CSS global setting in the theme editor under Online store > Customise > Theme settings > Custom styles > Custom CSS
To find your theme's style-sheet:
- Scroll down the left sidebar, and select Assets.
- Locate the custom.css file and insert CSS code directly here.