Skip to main content

How to customize your theme's code

Dylan Hughes
Head of Content
Here at Eight Themes, we don't have the means to view, diagnose, or address theme issues related to third-party coding customizations. Like all third-party theme developers, we are unable to provide coding customizations as per Shopify's official guidelines.

 

Customizing your theme - Introduction

There are two main ways to customize your theme:

  1. You can use your Theme Settings to change your storefront's colors, typography, and other stylistic features.

  2. 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.

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

Step 1: Duplicate your theme (recommended)

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. This allows you to start again if you need to.

To duplicate your theme:

Step 1: Within your Shopify admin, go to Online Store and continue to Themes.

Online Store - Themes.png

Step 2: Locate your theme and click the button containing three small dots.

Step 3: Select Duplicate.

Influence Duplicate Theme.png

Here at Eight, we strongly recommend following Shopify's advice and duplicating your working theme for worst-case scenarios.

To learn more, click here to read Shopify's help guide on duplicating themes.

Step 2: Access your theme's code editor

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

Step 1: Staying in Themes within your Shopify admin, click the button containing three small dots.

Step 2: Click Edit code in the drop-down menu.

Influence Edit Code.png

Step 3: Edit your theme's style sheet

To find your theme's style sheet:

Step 1: Scroll down the left sidebar, and select Assets.

Step 2: Locate the custom.css file and insert CSS code directly here.

Custom CSS Influence.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.

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

Related articles