Eight Themes Support Documentation

Search

How to Customize Your Themes Code

Here at Eight, we don't have the means to 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, 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.

 

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, allowing you to start again if you need to.

 

  1. Within your Shopify admin, go to Online Store > Themes.
  2. Select your theme, and click Actions > Duplicate.

 

mceclip1.jpg

 

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.

Step 2: Edit Your Theme Code

 

To alter your theme code, use your theme's code editor:

 

  1. Under Sales Channels with your Shopify admin, go to Online Store > Themes.
  2. Select your theme.
  3. Click Actions, and select Edit Code from the drop-down menu.

mceclip2.jpg

 

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. 

mceclip5.jpg

 

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:

  1. Scroll down the left sidebar, and select Assets.
  2. Locate the custom.css file and insert CSS code directly here. 

 

mceclip4.jpg

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?