# 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="/files/Aqo9hWGbT9zdsZJCwvvl" 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="/files/BfqPbK7CG6uiN54pFGZ8" 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="/files/x5W5tpHOuGGNADeXfHBu" 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="/files/lFGLs9AMoqn0HTtyGAlU" 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/zest-theme/faqs/generic/add-custom-css.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.