Welcome to Eight Docs

How to Customize Your Theme's Code

Here at Eight, unfortunately we do not 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, click here to read our article.

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.

 

 

 

Read: To learn more about how to duplicate a theme, read Shopify's help guides here.

‚Äč

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.

 

 

Step 3: Edit Your Theme's Style Sheet (Optional)

 

To find your theme's style-sheet:

  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.
  4. Scroll down the left sidebar, and select Assets.
  5. Locate the custom.css file and insert CSS code directly here.

 

Was this article helpful?