Eight Themes Support Documentation

Search

How to customize your theme's code

Here at Eight, we cannot view, diagnose, or address theme issues related to third-party coding customizations.

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.

 

Read: To learn more about how apps affect your theme's code, read our article, Are my apps causing issues with my theme?

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.

  1. Within your Shopify admin, go to Online Store > Themes.
  2. Select your theme.
  3. Click the ellipsis (three-dot icon) and then Duplicate.

a-4.png

 
Read: To learn more about how to duplicate a theme, read Shopify's help guide on Duplicating themes.

​

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:

  1. Go to Online Store > Customize > Theme settings > Styles > Custom CSS.
  2. Paste the custom CSS into the field.
  3. Click Save. 

b-10.png

 

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:

  1. Log in to your Shopify store.
  2. Click Online Store > Themes.
  3. Click the ellipsis (three-dot icon) and then Edit code.
  4. Scroll down the left panel and click Assets.
  5. Click custom.css. A new window displays.
  6. Add CSS code to the window.
  7. Click Save. 

b-13.png

Note: We’re unable to provide one-to-one support for customizing code. If you need any assistance customizing your theme's code, then we suggest reaching out to a Shopify Expert to help you with the task.

HeyCarson and StoreTasker are recommended partners of Eight Themes - both specializing in website development and offering free quotes for their services.
 

Was this article helpful?