# Add custom CSS

Although we create Zest theme with a variety of customizable features and settings, it's likely that sometimes you still want to adjust and fine-tune some elements beyond what is already available in the theme editor. 

Customizations range in complexity. An easy way to make these styling adjustments is by using CSS. 

{% hint style="warning" %}
Modifying theme code requires you to have a certain knowledge of web design languages (CSS, HTML, and Liquid). If you are not familiar with them, avoid modifying the theme code to prevent unwanted technical issues. 

Check out [W3Schools](https://www.w3schools.com/Css/) for a quick CSS tutorial. 
{% endhint %}

## Create a backup of your theme

We recommend you back up your work before attempting any theme file adjustments. If errors are encountered, you can use the duplicated (backup) version to restore to the original function and styling.

{% hint style="success" %}
**Steps**

1. In your Shopify admin > **Online store**, click **Actions**.
2. Select **Duplicate**.
3. Rename the copied file.
   {% endhint %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FERECNblRXLCxJt35ciYa%2Fimage.png?alt=media&#x26;token=96c6df3c-3314-4298-867c-8d648eca5feb" alt=""><figcaption></figcaption></figure>

## Create a customization file

All overriding CSS styles should be added to the same file in the Assets folder. This makes it easier to track and carry across customizations when updating your theme.

Follow the steps below to create a customization file in your theme code.

1\. In your Shopify admin > **Online store**, click **Edit code**.

2\. Navigate the **Assets** folder > click **Add a new asset**.&#x20;

3\. In the popup, click **Create a blank file**.

4\. Select the **Extension** and enter the **File name** as *custom*.

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FrPl6HjmtVKACNJweyrOz%2Fimage.png?alt=media&#x26;token=4e82d00c-c794-478c-af96-69766b5e3ce4" alt=""><figcaption></figcaption></figure>

5\. Click **Done**.

6\. After the new asset is created, go to the **Layout** folder > choose file **theme.liquid**.&#x20;

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FCe0r20xLJoBEQuJf4qxZ%2Fimage.png?alt=media&#x26;token=ec36bd42-89a7-4e89-90a0-1c292f9827da" alt=""><figcaption></figcaption></figure>

7\. In theme.liquid file, find and copy this code line:

&#x20;\<link rel="preload" href="{{ 'drawer-component.css' | asset\_url }}" as="style" onload="this.onload=null;this.rel='stylesheet';">

Then, move to a new line and paste the code you've just copied.

8\. In the new code line, change the file name from *drawer-component* to *custom* (the new file name).

9\. Click **Save**.

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FG2KvEKBMMOgIARYl4yWH%2Fezgif.com-gif-maker.gif?alt=media&#x26;token=3b703f42-32ee-4cdf-aa34-c9d798e17bea" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If you want to make complex customizations, consider hiring a Shopify Expert or a third-party developer.

[Shopify Community](https://community.shopify.com/c/shopify-community/ct-p/en) is also a great resource to get advice from other store owners on a wide range of topics.
{% endhint %}